Styleguide
Tokens, type and components for Yieldhouse. Dark theme only. Icons come from lucide-react.
Colour
Use the token name as a Tailwind colour, e.g. bg-surface, text-muted, border-border.
Surfaces
obsidian
#0E0E0E
Page background
surface
#1A1A1A
Cards, panels
elevated
#242424
Inputs, raised elements
border
#2E2E2E
Dividers, outlines
Brand
teal
#1F8473
Primary actions
teal-accent
#2DA88F
Logo, links, focus
teal-dark
#0F4A40
Tinted backgrounds
Text
ivory
#ECE9E2
Headings, emphasis
text
#D7D4CC
Body copy
muted
#8A8780
Secondary copy
tertiary
#6E6B62
Captions, placeholders
Status
positive
#2DA88F
Gains, success
caution
#D4A340
Warnings
risk
#C75450
Losses, errors
Type scale
Fraunces (variable, weight 500, optical size 144) for display; Inter 400/500 for everything else. Both self-hosted via Fontsource.
Display
Fraunces 500 · opsz 144 · 72px
Yieldhouse
Heading 1
Fraunces 500 · opsz 144 · 48px
Find the yield. Skip the noise.
Heading 2
Fraunces 500 · opsz 144 · 30px
Net yield by postcode
Heading 3
Fraunces 500 · opsz 144 · 20px
Three-bed terrace, Leeds LS6
Body large
Inter 400 · 18px
Every listing, scored for yield and risk.
Body
Inter 400 · 16px
Gross yield is annual rent divided by purchase price, before costs.
Label
Inter 500 · 14px
Asking price
Small
Inter 400 · 14px
Updated 2 hours ago from 14 sources
Caption
Inter 500 · 12px · uppercase
Estimated value
Logo
Three nested gable chevrons in teal-accent at 100%, 65% and 40% opacity, with the Fraunces wordmark.
Lockup sizes
YieldhouseYieldhouseYieldhouseYieldhouseMark only
On elevated
Badge
Card
Basic card
Surface background with a border token outline.
Leeds LS6
Strong3-bed terrace
£185,000 · £1,150 pcm
Gross yield
7.5%
Net yield
5.8%
Flood zone 3
Use a status-tinted border to draw attention without shouting.
Input
We'll only email you about your account.
Enter a number, e.g. 250000.