Kharon Labs.
Design system: tokens, foundations and React primitives. Warm paper and near-black ink, one ember accent, and a cursor-reactive globe.
Colors
PaperWarm off-white surfaces and hairlines
Paper 0 · card
--paper-0
#FFFFFF
#FFFFFF
Paper 1 · page
--paper-1
#FAF9F6
#FAF9F6
Paper 2 · subtle
--paper-2
#F3F1EC
#F3F1EC
Paper 3 · sunken
--paper-3
#EAE7E0
#EAE7E0
Line 1
--line-1
#E6E3DC
#E6E3DC
Line 2
--line-2
#D4D0C7
#D4D0C7
InkNear-black text ramp
Ink 1 · strong
--ink-1
#0C0C0B
#0C0C0B
Ink 2 · body
--ink-2
#3A3935
#3A3935
Ink 3 · muted
--ink-3
#66645D
#66645D
Ink 4 · disabled
--ink-4
#9A978F
#9A978F
Night surfacesDark sections behind 3D scenes
Night 0
--night-0
#060607
#060607
Night 1
--night-1
#0B0B0D
#0B0B0D
Night 2
--night-2
#141417
#141417
Night 3
--night-3
#1E1E22
#1E1E22
Night line
--night-line
#2A2A2F
#2A2A2F
Night text
--night-text
#EDEBE6
#EDEBE6
EmberThe one brand accent
Ember 50
--ember-50
#FFF2EB
#FFF2EB
100
--ember-100
#FFDCCB
#FFDCCB
200
--ember-200
#FFB997
#FFB997
400
--ember-400
#FF7A45
#FF7A45
500 · accent
--ember-500
#FF5A1F
#FF5A1F
600 · hover
--ember-600
#E5470F
#E5470F
700
--ember-700
#B8360A
#B8360A
SemanticLift / drop / warn / info for data states
Lift · positive
--lift-50 / 500 / 700
Drop · negative
--drop-50 / 500 / 700
Warn
--warn-50 / 500 / 700
Info
--info-50 / 500 / 700
Type
DisplayGeist 600, tight tracking
Every visitor gets
their own website.
their own website.
Display L · 64/1.0 · −0.045em · weight 600 | Display XL 88 for hero
HeadingsH1–H4
h1 · 48Personalize the first fold
h2 · 36Personalize the first fold
h3 · 24Personalize the first fold
h4 · 20Personalize the first fold
BodyGeist 400, 1.5 line height
body-l · 18
We rewrite your landing page for each visitor — their industry, their intent, the ad they clicked — in under 80ms.
body · 16Install one snippet. Connect your ad accounts. Ship variants without a deploy.
body-s · 14Secondary copy, table cells, helper text.
caption · 12Updated 2 min ago · 14,203 sessions
Mono & eyebrowGeist Mono for data, keys, eyebrows
● Live · 2,481 visitors now
<script src="https://cdn.kharonlabs.com/e.js" data-site="acme"></script>
+38.4% CVR lift
Serif accentInstrument Serif italic, one phrase per headline at most
Convert the one who's here.
--font-serif · italic 400 · inline emphasis only, never body copy
Spacing
Spacing scale4px base
--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1248px
--space-1664px
--space-2496px
--space-32128px
RadiiTight, engineered corners
--radius-xs
4px
4px
--radius-sm
6px
6px
--radius-md
8px
8px
--radius-lg
12px
12px
--radius-xl
16px
16px
--radius-2xl
24px
24px
--radius-pill
999px
999px
ElevationBorders first, shadow second
none · border
--shadow-1
--shadow-2
--shadow-3
--glow-ember
MotionEase-out, short, no bounce on UI
--ease-out · 200ms
--ease-in-out · 320ms
--ease-spring · 320ms (3D/hero only)
Brand
WordmarkNo logo provided, so the name is set in type
Kharon Labs.
Kharon Labs.
BackgroundsDot grid on paper, ember glow on night, hairline grid
VoicePlain, specific, numerate
DO
Your page, rewritten for every visitor. +31% median signups in 30 days.
DON'T
Unlock the power of AI-driven hyper-personalization to supercharge growth 🚀
Components
Buttons & iconsButton variants, sizes, states; IconButton; Icon
variant
size
state
night
icon btn
Form controlsInput, Select, Checkbox, Radio, Switch
We'll crawl your top 20 pages.
ms
Enter a full email address.
DisplayCard, Badge, Tag, Stat
LiveLearningDraftNewErrorBetaSolidEmber
industryFintechsourceGoogle AdsEMEAEnterprise
Experience
Fintech · Paid search
Rewrites hero + social proof for fintech visitors arriving from search.
Conversion rate
6.4%
+38.4%vs. control
TabsUnderline + segmented
FeedbackDialog, Toast, Tooltip
Experience published
Serving 4 variants to 3 segments.
New winner detected
Snippet not found on /pricing
Preview as visitorPDuplicate