Complete design system extracted from www.toolchat.io — 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: Ui-Sans-Serif · Display: Bakbak One. Font files loaded by the site: Geist (100 900) · Geist Mono (100 900) · Plus Jakarta Sans (400, 700) · Bakbak One (400).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | TOOLCHATFeaturesPricingOpen App |
||
| Thin Display | The quick brown fox jumps over the lazy dog |
||
| Micro | Open App |
||
| Body | Transform your files in secondsConvertExplore all features |
||
| Body | TOOLCHATFeaturesPricingOpen App |
||
| Link | TOOLCHATFeaturesPricingOpen App |
||
| Body | TOOLCHATFeaturesPricingOpen App |
||
| Body | TOOLCHATFeaturesPricingOpen App |
||
| Body | TOOLCHAT |
||
| Display Hero | Easily manipulate your files with AI All-in-One File Assistant – Smart & Simple |
Nav demo using extracted colors, font, real link labels.
| Background | #000000 |
| Text color | lab(2.75381 0 0) |
| Font family | Ui-Sans-Serif |
| Links (extracted) | TOOLCHAT · Features · Pricing · Open App · Try Toolchat now |
| Copyright (extracted) | © 2026 toolchat.io. All rights reserved. |
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: 3.35544e+07px · fill type: solid · padding density: normal.
bg #000000 · color #ffffff · radius: 3.35544e+07px
Demo variant — outlined treatment of the extracted primary color #000000.
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 #ffffff · text #000000
bg #000000 · text lab(2.75381 0 0)
bg #000000 · text transparent
bg #000000 · text #ffffff
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
contact@toolchat.io (extracted from site)
radius: not detected · demo border/background styling
Demo focus treatment using extracted primary color #000000.
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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.209999 0.00163988 -0.0057656) 0px 25px 50px -12px
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(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(16, 23, 30) 0px -1px 0px 0px inset, rgba(13, 135, 222, 0.24) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.32) 0px 4px 8px 0px
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, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.15s ease).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.15s | 1× in stylesheet |
| duration-base | 0.2s | 1× in stylesheet |
| duration-slow | 0.3s | 2× in stylesheet |
| duration-slower | 0.5s | 1× in stylesheet |
| duration-slowest | 0.7s | 1× in stylesheet |
| easing-1 | ease | 7× in stylesheet |
| easing-2 | cubic-bezier(.4,0,.2,1) | 1× in stylesheet |
| easing-3 | ease-in-out | 1× in stylesheet |
No media-query breakpoints detected in the scraped stylesheets of https://www.toolchat.io/.