Layout values (height, padding, link states) are demo styling — not extracted from the site.
04 — Components
Button Variants
Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 99px · fill type: solid · padding density: normal.
btn-primary · token demo
bg #000000 · color #ffffff · radius: 99px
btn-secondary · outlined demo
Demo variant — outlined treatment of the extracted primary color #000000.
btn-ghost · text-only demo
Demo variant — text-only treatment of the extracted primary color.
btn-disabled · demo state
Generic disabled-state demo — not extracted from the site.
05 — Components
Cards & Surfaces
Depth communicated through shadows and background contrast.
section surface
bg #ffffff · text #000000
page canvas
bg #fffdf5 · text #000000
07 — Components
Form Elements
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
Contact form — site-styled demo
littlebird.ai Get in Touch
Input states
input · default
radius: not detected · demo border/background styling
input · focus state demo
Demo focus treatment using extracted primary color #000000.
select · dropdown
08 — Foundations
Spacing Scale
Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.
4px xs
8px sm
12px md
16px base
18px lg
40px 2xl
50px 3xl
120px section
600px section-2
09 — Foundations
Border Radius
Corner radius tokens observed across components. All values extracted from live stylesheet.
8px
sm 8px
12px
md 12px
16px
lg 16px
20px
lg 20px
99px
full 99px
10 — Foundations
Elevation & Depth
Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.
Observed element shadow
rgba(0, 0, 0, 0.2) 0px 1px 1px 0px inset
Observed element shadow
rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset
11 — Interactions
Motion
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
hover demo · using extracted tokens
Demo transitions use the fastest extracted duration (0.15s ease-in-out).
idle vs hover · frozen demo states
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
Motion tokens (extracted)
Token
Value
Occurrences
duration-fast
0.15s
11× in stylesheet
duration-base
0.2s
17× in stylesheet
duration-slow
8s
55× in stylesheet
duration-slower
38s
9× in stylesheet
duration-slowest
42s
9× in stylesheet
easing-1
ease-in-out
56× in stylesheet
easing-2
linear
21× in stylesheet
easing-3
ease
9× in stylesheet
12 — Responsive
Responsive Behavior
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
Breakpoint
Boundary
Usage
Mobile
353px
4 @media rules
Mobile-2
426px
4 @media rules
Mobile-3
441px
4 @media rules
Mobile-4
480px
5 @media rules
Mobile-5
577px
4 @media rules
353px
426px
441px
480px
577px
Extracted from https://littlebird.ai/ stylesheets.
13 — Assets
Iconography & Brand Assets
Assets and links extracted from the scraped pages.
littlebird.ai
