Complete design system extracted from huly.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: __Inter_f367f3 · Display: __esbuild_b38aaf. Font files loaded by the site: __Inter_f367f3 (100 900) · __esbuild_b38aaf (400, 500, 600) · __sf_0aa2f2 (400).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | See in Action |
||
| Body | See in Action |
||
| Link | See in Action |
||
| Micro | See in Action |
||
| Body | See in Action |
||
| Display Hero | Everything App for your teams |
||
| Body | The quick brown fox jumps over the lazy dog |
||
| Micro | See in Action |
Nav demo using extracted colors, font, real link labels.
| Background | #090a0c |
| Text color | #ffffff |
| Font family | __Inter_f367f3 |
| Links (extracted) | Huly · Pricing · LinkedInGet updates · GitHubStar us · Download |
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: 9999px · fill type: solid · padding density: normal.
bg #5a250a · color #ffffff · radius: 9999px
Demo variant — outlined treatment of the extracted primary color #5a250a.
Demo variant — text-only treatment of the extracted primary color.
Generic disabled-state demo — not extracted from the site.
Flat design system — no box-shadows. Depth is communicated through background contrast and borders.
bg #ffffff · text #000000
bg #090a0c · text #303236
bg #090a0c · text transparent
Real case studies found on the scraped site — titles and URLs extracted from live links.
See in Action
https://front.hc.engineering/workbench/platform
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 #5a250a.
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.
⚠️ 9999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.
Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.
bg #090a0c — the outermost layer. Everything sits on top of this.
bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.
bg #090a0c — depth through color contrast, no shadows.
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.15s cubic-bezier(.4,0,.2,1)).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.15s | 8× in stylesheet |
| duration-base | 0.2s | 3× in stylesheet |
| duration-slow | 0.3s | 2× in stylesheet |
| duration-slower | 0.5s | 4× in stylesheet |
| duration-slowest | 2s | 2× in stylesheet |
| easing-1 | cubic-bezier(.4,0,.2,1) | 12× in stylesheet |
| easing-2 | linear | 2× in stylesheet |
| easing-3 | ease | 1× in stylesheet |
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
| Breakpoint | Boundary | Usage |
|---|---|---|
| Mobile | 414px | 2 @media rules |
| Tablet | 640px | 2 @media rules |
| Tablet-2 | 768px | 10 @media rules |
| Desktop | 1024px | 5 @media rules |
| Wide | 1280px | 4 @media rules |
Extracted from https://huly.io/ stylesheets.
Assets and links extracted from the scraped pages.
No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.