Complete design system extracted from levainbakery.com — 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: National2Web-Regular · Display: Platform. Font files loaded by the site: Assistant (400, 700) · National (400) · National Condensed (500) · Pitch (600).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | Shop our Father's Day Gift Guide Don't forget Dad. Last Call to Order for Father's Day! |
||
| Link | Shop our Father's Day Gift Guide Don't forget Dad. Last Call to Order for Father's Day! |
||
| Subheading | Signature Cookie Assortment |
||
| Link | Raspberry Pistachio is Here! |
||
| Body | Shop our Father's Day Gift Guide Don't forget Dad. Last Call to Order for Father's Day! |
||
| UI Label | The quick brown fox jumps over the lazy dog |
||
| Body | Shop our Father's Day Gift Guide Don't forget Dad. Last Call to Order for Father's Day! |
||
| UI Label | The quick brown fox jumps over the lazy dog |
||
| Micro | EST. 1995 |
||
| Link | Read more → |
Nav demo using extracted colors, font, real link labels.
| Background | #1a1a1a |
| Text color | #ffffff |
| Font family | National2Web-Regular |
| Links (extracted) | Cookies & Gifts · Corporate Gifting · Catering · Weddings · Bakeries |
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: 6px · fill type: solid · padding density: normal.
bg #000096 · color #ffffff · radius: 6px
Demo variant — outlined treatment of the extracted primary color #000096.
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 #f7eddf · text #000096
bg #f7eddf · text #0000ee
Representative form patterns styled with extracted color and radius tokens. Input border-radius: 8px (extracted).
radius: 8px · demo border/background styling
Demo focus treatment using extracted primary color #000096.
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.
Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.
0px 4px 5px rgba(0,0,0,0.05)
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 | 6× in stylesheet |
| duration-base | 0.2s | 4× in stylesheet |
| duration-slow | 0.3s | 17× in stylesheet |
| duration-slower | 0.4s | 7× in stylesheet |
| duration-slowest | 0.5s | 8× in stylesheet |
| easing-1 | ease | 83× in stylesheet |
| easing-2 | ease-in-out | 12× in stylesheet |
| easing-3 | cubic-bezier(.25,.46,.45,.94) | 8× in stylesheet |
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
| Breakpoint | Boundary | Usage |
|---|---|---|
| Tablet | 749px | 3 @media rules |
| Tablet-2 | 750px | 156 @media rules |
| Tablet-3 | 751px | 2 @media rules |
| Desktop | 990px | 66 @media rules |
| Desktop-2 | 991px | 2 @media rules |
Extracted from https://levainbakery.com/ stylesheets.
Assets and links extracted from the scraped pages.
No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.