Complete design system extracted from kilo.ai — every token, component, interaction pattern, and accessibility note, all from real values.
All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.
Body: JetBrains Mono · Display: Hanken Grotesk. Font files loaded by the site: Inter (100 900) · Roboto Mono (100 700) · Hanken Grotesk (100 900) · JetBrains Mono (100 800).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | Skip to main content |
||
| Body | The quick brown fox jumps over the lazy dog |
||
| Body | Skip to main content |
||
| UI Label | Enterprise |
||
| UI Label | Enterprise |
||
| Link | Read more → |
||
| Body | Skip to main content |
||
| Heading | The quick brown fox jumps over |
||
| UI Label | Your agents should move with your work. |
Nav demo using extracted colors, font, real link labels.
| Background | #0a0a0a |
| Text color | oklch(1 0 0 / 0.9) |
| Font family | JetBrains Mono |
| Links (extracted) | Skip to main content · Kilo · Pricing · Sign in · Contact sales |
Layout values (height, padding, link states) are demo styling — not extracted from the site.
Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 4px · fill type: solid · padding density: normal.
bg #0a0a0a · color #ffffff · radius: 4px
Demo variant — outlined treatment of the extracted primary color #0a0a0a.
Demo variant — text-only treatment of the extracted primary color.
Generic disabled-state demo — not extracted from the site.
Depth communicated through shadows and background contrast.
bg #0a0a0a · text oklch(1 0 0 / 0.9)
bg #0a0a0a · text #ffffff
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
radius: not detected · demo border/background styling
Demo focus treatment using extracted primary color #0a0a0a.
Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.
Corner radius tokens observed across components. All values extracted from live stylesheet.
⚠️ 3.35544e+07px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.
Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(1 0 0 / 0.135) 0px 0px 0px 2px inset, oklab(0 0 0 / 0.05) 0px 1px 3px 0px, oklab(0 0 0 / 0.05) 0px 1px 2px -1px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklch(0.3677 0 0) 0px 0px 0px 2px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(10, 10, 10) 0px 0px 0px 4px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 5px, rgba(0, 0, 0, 0.35) 0px 18px 50px 0px
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.1s ease).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.1s | 3× in stylesheet |
| duration-base | 0.15s | 6× in stylesheet |
| duration-slow | 0.2s | 11× in stylesheet |
| duration-slower | 0.3s | 5× in stylesheet |
| duration-slowest | 0.4s | 7× in stylesheet |
| easing-1 | ease | 17× in stylesheet |
| easing-2 | linear | 4× in stylesheet |
| easing-3 | ease-out | 3× in stylesheet |
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
| Breakpoint | Boundary | Usage |
|---|---|---|
| Mobile | 480px | 1 @media rule |
| Tablet | 601px | 1 @media rule |
| Wide | 1500px | 1 @media rule |
Extracted from https://kilo.ai/ stylesheets.
Assets and links extracted from the scraped pages.