The Porch brand
Every value on this site is a CSS custom property in one file, styles/tokens.css. This page reads them live: primitives, semantic tokens and component tokens.
Mark and lockup
A roof over a smile. The tile reads --mark-tile, the strokes --mark-stroke.
Primitives
Tier 1. Raw values: Porch's brand palette on top of Dub's neutral scale. Components never read these directly.
Coral
--p-coral-50 --p-coral-100 --p-coral-500 --p-coral-600 --p-coral-700 Ink
--p-ink-400 --p-ink-600 --p-ink-700 --p-ink-800 --p-ink-900 Warm neutrals
--p-warm-0 --p-warm-50 --p-warm-100 --p-warm-150 --p-warm-200 --p-warm-300 Dub neutrals (reference)
--p-neutral-50 --p-neutral-100 --p-neutral-200 --p-neutral-300 --p-neutral-400 --p-neutral-500 --p-neutral-700 --p-neutral-900 Status
--p-green-50 --p-green-700 --p-blue-50 --p-blue-700 --p-amber-50 --p-amber-500 --p-amber-700 --p-red-50 --p-red-700 Semantic colour
Tier 2. What a colour is for. Tailwind classes such as bg-background, text-muted-foreground and border-border map here.
--bg-default Page and card ground
--bg-muted Canvas, secondary panels
--bg-subtle Hover fills
--bg-emphasis Strong fills
--bg-inverted Primary buttons, dark cards
--fg-emphasis Headings, strong text
--fg-default Running text
--fg-subtle Captions, labels
--fg-muted Meta only
--border-default Frame rails, dividers
--border-muted Grid pattern lines
--border-emphasis Active outlines
--accent The single accent
--accent-fg Coral words, focus ring
--accent-wash Quiet highlights
--status-success Verified
--status-info Sent
--status-warn Waiting
--status-danger Errors
Type
Manrope for headings (--font-display), Inter for everything else (--font-body). Sizes follow Dub's Tailwind scale.
Hero, --text-hero
Section, --text-section
--text-2xs --text-xs --text-13 --text-sm --text-base --text-lg --text-xl --text-2xl --text-3xl --text-4xl --text-5xl --text-6xl Spacing
Tailwind's 4px scale. Every step is calc(var(--p-unit) * n), so p-4, gap-6 and h-10 all read a token.
--space-0_5--space-1--space-1_5--space-2--space-3--space-4--space-5--space-6--space-8--space-10--space-12--space-16--space-20--space-24--space-32Radii
Controls 8px (--btn-radius), cards 12px (--card-radius), badges round (--badge-radius).
--radius-none--radius-sm--radius-default--radius-md--radius-lg--radius-xl--radius-2xl--radius-3xl--radius-fullShadows
Dub's geometry, tinted with Ink.
--shadow-sm--shadow-default--shadow-card--shadow-float--shadow-window--shadow-drop--shadow-ring--shadow-accent-glowMotion
Durations and easings from Dub's Tailwind animations. Hover a row to see it run.
--motion-instant --motion-fast --motion-base --motion-slow --motion-slower --motion-slowest --ease-standard --ease-out --ease-expo Components
Tier 3. Dub components read component tokens, which read semantic tokens.
Buttons
--btn-*Badges
--badge-*Status pills
Toggle group (Dub)
--bg-muted, --border-subtleTab select (Dub)
--fg-emphasis, --accentCard
--card-*Nav pill
--nav-*Voice
A neighbour, not a platform. Short sentences and plain words.
Porch sounds like
- A neighbour, not a platform
- Short sentences and plain words
- Sure of itself without selling
- Active voice, sentence case
- Facts first, then the proof
Porch never
- Uses buzzwords
- Pressures people to act now
- Apologises for the tenant
- Uses em dashes or shouts in capitals