Larch Estates
Style guide
Every token and component on one page
Colors
--surface
Page background
--surface-raised
Raised areas
--surface-sunken
Alternate sections
--surface-dark
Footer
--text
Text
--text-muted
Secondary text
--accent
Accent
--accent-strong
Accent hover
--accent-soft
Accent tint
--line
Hairlines
--line-strong
Input borders
--error
Error
Type
Newsreader for headlines, Instrument Sans for text. Sizes change per breakpoint in fixed steps.
Heading 1
Quiet homes in the valley
Heading 2
Three homes we would live in
Heading 3
Larchwood House
Heading 4
Interior and exterior
Lead
Short introductory text that sets the tone for a section.
Body
Body text uses 16 to 17 pixels with a generous line height, so long paragraphs stay easy to read on every screen.
Small
Captions, meta lines and legal notes.
Buttons and tags
Radius and spacing
--radius-m
Buttons, inputs
--radius-l
Images, cards
--radius-round
Icon circles
--space-2
--space-4
--space-5
--space-6
--space-7
--space-9
--space-10
Form field
Label
With error
Please enter a value.
Stat, icons, accordion
186
Homes placed
