Kaleido-Life Investor Relations
Full Stitch→Tokens→Component→Route pipeline demo — institutional dark theme
14 tokensOnboarded 2026-04-06
Color System
Typography
Heading
Display — The quick brown fox jumps
H1 — The quick brown fox jumps
H2 — The quick brown fox jumps
H3 — The quick brown fox jumps
Body
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.
Spacing & Shape
Spacing Scale
sm
4px
md
16px
lg
24px
xl
32px
Border Radius
sm
4px
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
14Colors
14Components
66LiveBuildingFailed
Token density
Score Gauge
95
Design Drift
14
Token Count
75
Coverage
Avatar & Tooltip
Hover me
Token Reference
| DTCG Path | Type | Value | CSS Variable |
|---|---|---|---|
| color.primary.base | color | #38debb | --color-primary-base |
| color.primary.hover | color | #5ffbd6 | --color-primary-hover |
| color.primary.active | color | #009077 | --color-primary-active |
| color.primary.muted | color | #38debb | --color-primary-muted |
| color.accent.gold | color | #e9c349 | --color-accent-gold |
| color.accent.goldHover | color | #ffe088 | --color-accent-goldHover |
| color.background.dark | color | #071325 | --color-background-dark |
| color.background.card | color | #142032 | --color-background-card |
| color.background.elevated | color | #1f2a3d | --color-background-elevated |
| color.cta.green | color | #e9c349 | --color-cta-green |
| color.cta.greenHover | color | #ffe088 | --color-cta-greenHover |
| color.text.secondary | color | #c5c6cd | --color-text-secondary |
| color.border.default | color | #45474c | --color-border-default |
| color.border.subtle | color | rgba(69, 71, 76, 0.15) | --color-border-subtle |
{
"$schema": "https://design-tokens.org/schema.json",
"$description": "Kaleido-Life Investor Relations — institutional dark theme. Derived from Stitch 'Kaleido Institutional Dark' design system.",
"color": {
"primary": {
"base": {
"$value": "#38debb",
"$type": "color",
"$description": "Institutional teal primary"
},
"hover": {
"$value": "#5ffbd6",
"$type": "color",
"$description": "Bright teal hover"
},
"active": {
"$value": "#009077",
"$type": "color",
"$description": "Deep teal active"
},
"muted": {
"$value": "#38debb",
"$type": "color",
"$description": "Teal muted (matches primary)"
}
},
"accent": {
"gold": {
"$value": "#e9c349",
"$type": "color",
"$description": "Institutional gold"
},
"goldHover": {
"$value": "#ffe088",
"$type": "color",
"$description": "Bright gold hover"
}
},
"background": {
"dark": {
"$value": "#071325",
"$type": "color",
"$description": "Deep navy surface base"
},
"card": {
"$value": "#142032",
"$type": "color",
"$description": "Surface container"
},
"elevated": {
"$value": "#1f2a3d",
"$type": "color",
"$description": "Surface container high"
}
},
"cta": {
"green": {
"$value": "#e9c349",
"$type": "color",
"$description": "Gold CTA (institutional)"
},
"greenHover": {
"$value": "#ffe088",
"$type": "color",
"$description": "Bright gold CTA hover"
}
},
"text": {
"secondary": {
"$value": "#c5c6cd",
"$type": "color",
"$description": "Surface variant text"
}
},
"border": {
"default": {
"$value": "#45474c",
"$type": "color",
"$description": "Outline variant"
},
"subtle": {
"$value": "rgba(69, 71, 76, 0.15)",
"$type": "color",
"$description": "Ghost border"
}
}
}
}