Gero AI
Biotech longevity company — Euclid Circular B, warm neutrals, gradient text headings, purple/turquoise/sunbound accent system — Extracted from https://gero.ai
98 tokensOnboarded 2026-04-10
Color System
Typography
Euclid Circular B
Display — The quick brown fox jumps
H1 — The quick brown fox jumps
H2 — The quick brown fox jumps
H3 — The quick brown fox jumps
Euclid Circular B
Bold: Design tokens bridge the gap between design tools and code.
Regular: They encode visual decisions — colors, typography, spacing — as structured data that both designers and developers can share.
monospace
const tokens = await extractFromCSS(url); const merged = mergeTokens(foundation, overrides); const css = toCSSVariables(merged);
Spacing & Shape
Spacing Scale
sm
4px
md
16px
lg
24px
xl
32px
Border Radius
sm
5px
md
8px
lg
12px
Component Gallery
Shared UI components themed with this project's design tokens via CSS custom property cascade.
Button
Badge & Tag
DefaultSuccessWarningErrorInfo
DefaultDefaultSuccessWarningError
Alert
Tokens extracted successfully from source site.
Some token values may need manual refinement.
Build failed — check console for details.
Re-analyze to update tokens from the live site.
Form Controls
Data Display
Tokens
98Colors
26Components
66LiveBuildingFailed
Token density
Score Gauge
95
Design Drift
98
Token Count
75
Coverage
Avatar & Tooltip
Hover me
Token Reference
| DTCG Path | Type | Value | CSS Variable |
|---|---|---|---|
| color.primary.base | color | #857bf8 | --color-primary-base |
| color.primary.light | color | #cbc6ff | --color-primary-light |
| color.secondary.turquoise | color | #20cbdd | --color-secondary-turquoise |
| color.secondary.turquoiseLight | color | #d2f5f8 | --color-secondary-turquoiseLight |
| color.accent.sunbound | color | #febe5c | --color-accent-sunbound |
| color.accent.begonia | color | #fe7575 | --color-accent-begonia |
| color.success | color | #d8ec29 | --color-success |
| color.warning | color | #febe5c | --color-warning |
| color.error | color | #ea384c | --color-error |
| color.background.base | color | #faf9f6 | --color-background-base |
| color.background.surface | color | #ffffff | --color-background-surface |
| color.background.dark | color | #36322d | --color-background-dark |
| color.background.overlay | color | #000000e6 | --color-background-overlay |
| color.background.muted | color | #e0ddd9 | --color-background-muted |
| color.text.primary | color | #36322d | --color-text-primary |
| color.text.secondary | color | #726d68 | --color-text-secondary |
| color.text.tertiary | color | #ada8a3 | --color-text-tertiary |
| color.text.inverse | color | #ffffff | --color-text-inverse |
| color.border.default | color | #e0ddd9 | --color-border-default |
| color.border.subtle | color | #e0ddd900 | --color-border-subtle |
| color.border.focus | color | #857bf8 | --color-border-focus |
| color.neutral.0 | color | #ffffff | --color-neutral-0 |
| color.neutral.3 | color | #e0ddd9 | --color-neutral-3 |
| color.neutral.6 | color | #ada8a3 | --color-neutral-6 |
| color.neutral.8 | color | #726d68 | --color-neutral-8 |
| color.neutral.10 | color | #36322d | --color-neutral-10 |
| gradient.purpleToTurquoise | gradient | linear-gradient(229deg, #857bf8 5.83%, #20cbdd) | --gradient-purpleToTurquoise |
| gradient.purpleSunboundTurquoise | gradient | linear-gradient(117deg, var(--purple), var(--turquoise) 50%, var(--sunbound)) | --gradient-purpleSunboundTurquoise |
| gradient.coralToAmber | gradient | linear-gradient(229deg, #fe7575 5.83%, #febe5c) | --gradient-coralToAmber |
| gradient.amberToTurquoise | gradient | linear-gradient(229deg, #febe5c 5.83%, #20cbdd) | --gradient-amberToTurquoise |
| gradient.headingPurple | gradient | linear-gradient(269deg, white, #857bf8) | --gradient-headingPurple |
| gradient.headingSunbound | gradient | linear-gradient(269deg, white, #febe5c) | --gradient-headingSunbound |
| gradient.headingTurquoise | gradient | linear-gradient(269deg, white, #20cbdd) | --gradient-headingTurquoise |
| gradient.turquoiseRange | gradient | linear-gradient(270deg, #20cbdd, #d2f5f8) | --gradient-turquoiseRange |
| gradient.purpleRange | gradient | linear-gradient(to right, #cbc6ff, #857bf8 95.93%) | --gradient-purpleRange |
| gradient.darkFade | gradient | linear-gradient(16deg, #000, transparent) | --gradient-darkFade |
| typography.fontFamily.heading | fontFamily | Euclid Circular B, sans-serif | --typography-fontFamily-heading |
| typography.fontFamily.body | fontFamily | Euclid Circular B, sans-serif | --typography-fontFamily-body |
| typography.fontFamily.mono | fontFamily | monospace | --typography-fontFamily-mono |
| typography.fontSize.xs | dimension | 10px | --typography-fontSize-xs |
| typography.fontSize.sm | dimension | 12px | --typography-fontSize-sm |
| typography.fontSize.base | dimension | 14px | --typography-fontSize-base |
| typography.fontSize.md | dimension | 16px | --typography-fontSize-md |
| typography.fontSize.lg | dimension | 18px | --typography-fontSize-lg |
| typography.fontSize.xl | dimension | 20px | --typography-fontSize-xl |
| typography.fontSize.2xl | dimension | 24px | --typography-fontSize-2xl |
| typography.fontSize.3xl | dimension | 32px | --typography-fontSize-3xl |
| typography.fontSize.4xl | dimension | 40px | --typography-fontSize-4xl |
| typography.fontSize.5xl | dimension | 48px | --typography-fontSize-5xl |
| typography.fontSize.display | dimension | 80px | --typography-fontSize-display |
| typography.fontWeight.light | fontWeight | 300 | --typography-fontWeight-light |
| typography.fontWeight.regular | fontWeight | 400 | --typography-fontWeight-regular |
| typography.fontWeight.medium | fontWeight | 500 | --typography-fontWeight-medium |
| typography.fontWeight.semibold | fontWeight | 600 | --typography-fontWeight-semibold |
| typography.fontWeight.bold | fontWeight | 700 | --typography-fontWeight-bold |
| typography.lineHeight.tight | dimension | 110% | --typography-lineHeight-tight |
| typography.lineHeight.snug | dimension | 116.667% | --typography-lineHeight-snug |
| typography.lineHeight.base | dimension | 125% | --typography-lineHeight-base |
| typography.lineHeight.relaxed | dimension | 130% | --typography-lineHeight-relaxed |
| typography.lineHeight.loose | dimension | 150% | --typography-lineHeight-loose |
| typography.letterSpacing.tight | dimension | -2.56px | --typography-letterSpacing-tight |
| typography.letterSpacing.snug | dimension | -1.152px | --typography-letterSpacing-snug |
| typography.letterSpacing.normal | dimension | -0.768px | --typography-letterSpacing-normal |
| typography.letterSpacing.wide | dimension | 1.44px | --typography-letterSpacing-wide |
| spacing.0 | dimension | 0px | --spacing-0 |
| spacing.1 | dimension | 1px | --spacing-1 |
| spacing.2 | dimension | 8px | --spacing-2 |
| spacing.3 | dimension | 10px | --spacing-3 |
| spacing.4 | dimension | 12px | --spacing-4 |
| spacing.5 | dimension | 16px | --spacing-5 |
| spacing.6 | dimension | 20px | --spacing-6 |
| spacing.7 | dimension | 24px | --spacing-7 |
| spacing.8 | dimension | 32px | --spacing-8 |
| spacing.9 | dimension | 40px | --spacing-9 |
| spacing.10 | dimension | 54px | --spacing-10 |
| spacing.11 | dimension | 60px | --spacing-11 |
| spacing.12 | dimension | 80px | --spacing-12 |
| spacing.13 | dimension | 120px | --spacing-13 |
| spacing.14 | dimension | 126px | --spacing-14 |
| borderRadius.xs | dimension | 2px | --borderRadius-xs |
| borderRadius.sm | dimension | 5px | --borderRadius-sm |
| borderRadius.md | dimension | 8px | --borderRadius-md |
| borderRadius.lg | dimension | 12px | --borderRadius-lg |
| borderRadius.xl | dimension | 16px | --borderRadius-xl |
| borderRadius.2xl | dimension | 20px | --borderRadius-2xl |
| borderRadius.3xl | dimension | 24px | --borderRadius-3xl |
| borderRadius.full | dimension | 9999px | --borderRadius-full |
| shadow.subtle | shadow | 0 0 3px rgba(51,51,51,0.4) | --shadow-subtle |
| shadow.focusRing | shadow | 0 0 3px 1px #3898ec | --shadow-focusRing |
| shadow.outline | shadow | 0 0 0 2px #fff | --shadow-outline |
| shadow.glowPurple | shadow | 0 2px 100px 35px #857bf8 | --shadow-glowPurple |
| shadow.glowSunbound | shadow | 0 2px 100px 35px #febe5c | --shadow-glowSunbound |
| shadow.glowTurquoise | shadow | 0 2px 100px 35px #20cbdd | --shadow-glowTurquoise |
| transition.fast | duration | 0.2s ease-in | --transition-fast |
| breakpoint.mobile | dimension | 479px | --breakpoint-mobile |
| breakpoint.mobileLandscape | dimension | 767px | --breakpoint-mobileLandscape |
| breakpoint.tablet | dimension | 991px | --breakpoint-tablet |
| breakpoint.desktop | dimension | 992px | --breakpoint-desktop |
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"primary": {
"base": {
"$value": "#857bf8",
"$type": "color",
"$description": "Purple — primary brand accent"
},
"light": {
"$value": "#cbc6ff",
"$type": "color",
"$description": "Light purple for gradient endpoints"
}
},
"secondary": {
"turquoise": {
"$value": "#20cbdd",
"$type": "color",
"$description": "Turquoise — secondary brand accent"
},
"turquoiseLight": {
"$value": "#d2f5f8",
"$type": "color",
"$description": "Light turquoise for gradient endpoints"
}
},
"accent": {
"sunbound": {
"$value": "#febe5c",
"$type": "color",
"$description": "Sunbound/amber — tertiary accent"
},
"begonia": {
"$value": "#fe7575",
"$type": "color",
"$description": "Begonia/coral — warm accent"
}
},
"success": {
"$value": "#d8ec29",
"$type": "color",
"$description": "Lime/chartreuse success indicator"
},
"warning": {
"$value": "#febe5c",
"$type": "color",
"$description": "Amber warning (maps to sunbound)"
},
"error": {
"$value": "#ea384c",
"$type": "color",
"$description": "Red error state"
},
"background": {
"base": {
"$value": "#faf9f6",
"$type": "color",
"$description": "Warm off-white page background"
},
"surface": {
"$value": "#ffffff",
"$type": "color",
"$description": "White card/surface background"
},
"dark": {
"$value": "#36322d",
"$type": "color",
"$description": "Dark background (neutral-10)"
},
"overlay": {
"$value": "#000000e6",
"$type": "color",
"$description": "Dark overlay 90% opacity"
},
"muted": {
"$value": "#e0ddd9",
"$type": "color",
"$description": "Neutral-3 muted background"
}
},
"text": {
"primary": {
"$value": "#36322d",
"$type": "color",
"$description": "Neutral-10 — primary body text"
},
"secondary": {
"$value": "#726d68",
"$type": "color",
"$description": "Neutral-8 — secondary/muted text"
},
"tertiary": {
"$value": "#ada8a3",
"$type": "color",
"$description": "Neutral-6 — tertiary/caption text"
},
"inverse": {
"$value": "#ffffff",
"$type": "color",
"$description": "White text on dark backgrounds"
}
},
"border": {
"default": {
"$value": "#e0ddd9",
"$type": "color",
"$description": "Neutral-3 — default border"
},
"subtle": {
"$value": "#e0ddd900",
"$type": "color",
"$description": "Transparent border (hover reveal)"
},
"focus": {
"$value": "#857bf8",
"$type": "color",
"$description": "Purple focus ring"
}
},
"neutral": {
"0": {
"$value": "#ffffff",
"$type": "color",
"$description": "Neutral-0 (white)"
},
"3": {
"$value": "#e0ddd9",
"$type": "color",
"$description": "Neutral-3 (warm light gray)"
},
"6": {
"$value": "#ada8a3",
"$type": "color",
"$description": "Neutral-6 (mid gray)"
},
"8": {
"$value": "#726d68",
"$type": "color",
"$description": "Neutral-8 (dark gray)"
},
"10": {
"$value": "#36322d",
"$type": "color",
"$description": "Neutral-10 (near-black warm)"
}
}
},
"gradient": {
"purpleToTurquoise": {
"$value": "linear-gradient(229deg, #857bf8 5.83%, #20cbdd)",
"$type": "gradient",
"$description": "Primary brand gradient"
},
"purpleSunboundTurquoise": {
"$value": "linear-gradient(117deg, var(--purple), var(--turquoise) 50%, var(--sunbound))",
"$type": "gradient",
"$description": "Full spectrum brand gradient"
},
"coralToAmber": {
"$value": "linear-gradient(229deg, #fe7575 5.83%, #febe5c)",
"$type": "gradient",
"$description": "Warm begonia-to-sunbound gradient"
},
"amberToTurquoise": {
"$value": "linear-gradient(229deg, #febe5c 5.83%, #20cbdd)",
"$type": "gradient",
"$description": "Sunbound-to-turquoise gradient"
},
"headingPurple": {
"$value": "linear-gradient(269deg, white, #857bf8)",
"$type": "gradient",
"$description": "Heading text gradient (white to purple)"
},
"headingSunbound": {
"$value": "linear-gradient(269deg, white, #febe5c)",
"$type": "gradient",
"$description": "Heading text gradient (white to sunbound)"
},
"headingTurquoise": {
"$value": "linear-gradient(269deg, white, #20cbdd)",
"$type": "gradient",
"$description": "Heading text gradient (white to turquoise)"
},
"turquoiseRange": {
"$value": "linear-gradient(270deg, #20cbdd, #d2f5f8)",
"$type": "gradient",
"$description": "Turquoise full range"
},
"purpleRange": {
"$value": "linear-gradient(to right, #cbc6ff, #857bf8 95.93%)",
"$type": "gradient",
"$description": "Purple full range"
},
"darkFade": {
"$value": "linear-gradient(16deg, #000, transparent)",
"$type": "gradient",
"$description": "Dark overlay fade"
}
},
"typography": {
"fontFamily": {
"heading": {
"$value": "Euclid Circular B, sans-serif",
"$type": "fontFamily"
},
"body": {
"$value": "Euclid Circular B, sans-serif",
"$type": "fontFamily"
},
"mono": {
"$value": "monospace",
"$type": "fontFamily"
}
},
"fontSize": {
"xs": {
"$value": "10px",
"$type": "dimension",
"$description": "Smallest text"
},
"sm": {
"$value": "12px",
"$type": "dimension",
"$description": "Captions, preheadings, fine print"
},
"base": {
"$value": "14px",
"$type": "dimension",
"$description": "Body text default"
},
"md": {
"$value": "16px",
"$type": "dimension",
"$description": "Job descriptions, heading-s mobile"
},
"lg": {
"$value": "18px",
"$type": "dimension",
"$description": "Navigation links"
},
"xl": {
"$value": "20px",
"$type": "dimension",
"$description": "Lead paragraphs, left-border headings, heading-s"
},
"2xl": {
"$value": "24px",
"$type": "dimension",
"$description": "Mid-size headings"
},
"3xl": {
"$value": "32px",
"$type": "dimension",
"$description": "Heading-m, hero text mobile"
},
"4xl": {
"$value": "40px",
"$type": "dimension",
"$description": "Large section headings"
},
"5xl": {
"$value": "48px",
"$type": "dimension",
"$description": "Heading-l, major section titles"
},
"display": {
"$value": "80px",
"$type": "dimension",
"$description": "Hero display text"
}
},
"fontWeight": {
"light": {
"$value": "300",
"$type": "fontWeight",
"$description": "Euclid Circular B Light"
},
"regular": {
"$value": "400",
"$type": "fontWeight",
"$description": "Euclid Circular B Regular"
},
"medium": {
"$value": "500",
"$type": "fontWeight",
"$description": "Euclid Circular B Medium"
},
"semibold": {
"$value": "600",
"$type": "fontWeight",
"$description": "Euclid Circular B SemiBold"
},
"bold": {
"$value": "700",
"$type": "fontWeight",
"$description": "Euclid Circular B Bold"
}
},
"lineHeight": {
"tight": {
"$value": "110%",
"$type": "dimension",
"$description": "Display/hero text"
},
"snug": {
"$value": "116.667%",
"$type": "dimension",
"$description": "Heading-l"
},
"base": {
"$value": "125%",
"$type": "dimension",
"$description": "Heading-m"
},
"relaxed": {
"$value": "130%",
"$type": "dimension"
},
"loose": {
"$value": "150%",
"$type": "dimension",
"$description": "Body text, descriptions, heading-s"
}
},
"letterSpacing": {
"tight": {
"$value": "-2.56px",
"$type": "dimension",
"$description": "Display headings"
},
"snug": {
"$value": "-1.152px",
"$type": "dimension",
"$description": "Heading-l (48px)"
},
"normal": {
"$value": "-0.768px",
"$type": "dimension",
"$description": "Heading-m (32px)"
},
"wide": {
"$value": "1.44px",
"$type": "dimension",
"$description": "Preheadings, labels (uppercase)"
}
}
},
"spacing": {
"0": {
"$value": "0px",
"$type": "dimension"
},
"1": {
"$value": "1px",
"$type": "dimension"
},
"2": {
"$value": "8px",
"$type": "dimension"
},
"3": {
"$value": "10px",
"$type": "dimension"
},
"4": {
"$value": "12px",
"$type": "dimension"
},
"5": {
"$value": "16px",
"$type": "dimension"
},
"6": {
"$value": "20px",
"$type": "dimension"
},
"7": {
"$value": "24px",
"$type": "dimension"
},
"8": {
"$value": "32px",
"$type": "dimension"
},
"9": {
"$value": "40px",
"$type": "dimension"
},
"10": {
"$value": "54px",
"$type": "dimension"
},
"11": {
"$value": "60px",
"$type": "dimension"
},
"12": {
"$value": "80px",
"$type": "dimension"
},
"13": {
"$value": "120px",
"$type": "dimension"
},
"14": {
"$value": "126px",
"$type": "dimension"
}
},
"borderRadius": {
"xs": {
"$value": "2px",
"$type": "dimension"
},
"sm": {
"$value": "5px",
"$type": "dimension"
},
"md": {
"$value": "8px",
"$type": "dimension"
},
"lg": {
"$value": "12px",
"$type": "dimension"
},
"xl": {
"$value": "16px",
"$type": "dimension",
"$description": "Nav links, problem headings"
},
"2xl": {
"$value": "20px",
"$type": "dimension"
},
"3xl": {
"$value": "24px",
"$type": "dimension",
"$description": "White box hero cards"
},
"full": {
"$value": "9999px",
"$type": "dimension",
"$description": "Pill shapes"
}
},
"shadow": {
"subtle": {
"$value": "0 0 3px rgba(51,51,51,0.4)",
"$type": "shadow"
},
"focusRing": {
"$value": "0 0 3px 1px #3898ec",
"$type": "shadow",
"$description": "Default Webflow focus ring"
},
"outline": {
"$value": "0 0 0 2px #fff",
"$type": "shadow"
},
"glowPurple": {
"$value": "0 2px 100px 35px #857bf8",
"$type": "shadow",
"$description": "Purple radial glow"
},
"glowSunbound": {
"$value": "0 2px 100px 35px #febe5c",
"$type": "shadow",
"$description": "Sunbound/amber radial glow"
},
"glowTurquoise": {
"$value": "0 2px 100px 35px #20cbdd",
"$type": "shadow",
"$description": "Turquoise radial glow"
}
},
"transition": {
"fast": {
"$value": "0.2s ease-in",
"$type": "duration",
"$description": "Navigation hover transitions"
}
},
"breakpoint": {
"mobile": {
"$value": "479px",
"$type": "dimension"
},
"mobileLandscape": {
"$value": "767px",
"$type": "dimension"
},
"tablet": {
"$value": "991px",
"$type": "dimension"
},
"desktop": {
"$value": "992px",
"$type": "dimension"
}
},
"$metadata": {
"source": "https://gero.ai",
"platform": "Webflow",
"extractedAt": "2026-04-10",
"primaryFont": "Euclid Circular B",
"fontWeights": "Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)",
"fontFormat": "OpenType (.otf) via Webflow CDN",
"cssVariables": "--background, --neutral-0/3/6/8/10, --purple, --turquoise, --sunbound, --begonia, --regular",
"aesthetic": "Premium biotech — warm neutrals, dark mode emphasis, gradient text headings, radial glow effects, clean geometric typography",
"brandMessage": "Rewriting Human Aging with Physics and AI",
"partners": "Pfizer, Harvard Medical School, National University of Singapore",
"publications": "Nature Communications, Science",
"designAttribution": "Codon65 digital product studio"
}
}