Skip to content

Design preview: no database is connected, so anything you submit is temporary.

Tiny Home List

Design index

The Tiny Home List system, modelled on the calm, editorial structure of Landfolk — Work Sans for the work, a book serif for the voice, deep-green frames and peach surfaces — with every type step about 12.5% larger. Source of truth: DESIGN.md and the @theme tokens in globals.css.

Principles

  1. 1

    Search first

    The search bar is visible without scrolling on every viewport.

  2. 2

    Photos carry the warmth

    Quiet chrome: off-white, charcoal, one green. No gradients.

  3. 3

    Serif for voice, sans for work

    Serif for titles; Work Sans for facts, filters and forms.

  4. 4

    Generous rhythm

    Sections 64–96px apart; content inside a card stays tight.

  5. 5

    Honest labels are components

    Sponsored, Demo, Claimed and Illustrative photo have fixed styles and are never hidden.

  6. 6

    Accessible by default

    AA contrast, 2px focus rings, 44px targets, reduced motion respected.

Colour

Landfolk's palette with a warmer paper background. Contrast is shown against white.

  • ink

    #022021

    Body text, headings, primary buttons

    17.1:1 AAA

  • ink-muted

    #485856

    Secondary text

    7.5:1 AAA

  • ink-soft

    #637270

    Meta text, captions

    5.0:1 AA

  • line

    #E0E1DE

    Hairlines, card borders

    1.3:1 decorative

  • line-strong

    #C4C4BE

    Input borders

    1.8:1 decorative

  • paper

    #FBFAF7

    Page background

    1.0:1 decorative

  • surface

    #FFFFFF

    Cards, inputs, header

    1.0:1 decorative

  • stone

    #F2F2EF

    Quiet panels, filters, footer

    1.1:1 decorative

  • sand

    #FCF6F1

    Page surface below the hero, warm callouts

    1.1:1 decorative

  • sand-strong

    #E6C596

    Decorative borders on sand

    1.6:1 decorative

  • clay

    #8D6D0F

    Sponsored label text

    4.9:1 AA

  • forest

    #0A6448

    Accent: links, active, focus

    7.2:1 AAA

  • forest-deep

    #073B3A

    Accent hover, dark bands

    12.4:1 AAA

  • forest-tint

    #EAFCF1

    Selected chips, success

    1.1:1 decorative

  • error

    #983314

    Errors

    7.5:1 AAA

  • error-tint

    #FFF1EF

    Error backgrounds

    1.1:1 decorative

  • warning

    #E2BF59

    Demo stripe

    1.8:1 decorative

  • warning-tint

    #FFF8E8

    Demo & pending backgrounds

    1.1:1 decorative

  • info

    #426E73

    Informational

    5.7:1 AA

  • info-tint

    #F3FAFD

    Informational backgrounds

    1.1:1 decorative

Typography

Work Sans (UI, body and bold section titles), Newsreader (display — closest open match to Landfolk's Study) and DM Mono (data). Body is 18px.

text-f1

72 / 76px · Statement

Find the right people for your project

text-f2

54 / 58px · Home headline

Find the right people for your project

text-f2b

40 / 44px · Page titles

Find the right people for your project

text-f3

28 / 34px · Section titles

Find the right people for your project

text-f4

22 / 28px · Card titles

Find the right people for your project

text-f5

18 / 28px · Body (default)

Find the right people for your project

text-f6

16 / 24px · Secondary body, inputs, buttons

Find the right people for your project

text-f7

14 / 20px · Meta, labels, badges

Find the right people for your project

text-f8

12 / 16px · Eyebrows only

Find the right people for your project

Spacing & shape

Spacing steps (px)

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 64
  • 96

Radii

4

8

16

24

pill

Depth

shadow-card — search bar, sticky panels
shadow-lift — popovers, dialogs

Listing cards have no shadow at rest.

Buttons

Pills, 600 weight. 48px default height meets touch-target guidance.

Small (40px)Medium (48px)Large (56px)

Badges & chips

Labels describe exactly one thing each — claimed, checked and sponsored are never combined into a single 'trust' badge.

SponsoredDemo listingClaimed by businessChecked on 12 Sept 2026Basic details checkedDraft guidanceRejectedNot yet claimed

Forms

Label above, 48px controls, 16px input text, errors wired with aria-describedby.

We only share it with the business you contact.

Enter a valid email address

Notices

Info

Rules for small homes are set locally.

Success

Inquiry sent to the business.

Warning

Saved — email delivery isn't configured yet.

Error

Something went wrong. Please try again.

Patterns

Search bar and listing card, rendered live from the directory.

Shells & building kits

Summerwood Products

  • Based in Toronto, Ontario
  • Serves All provinces and territories

Toronto-based maker of prefab sheds, cabins, bunkies, studios, garages and gazebos sold as pre-cut or pre-assembled kits.

Pricing on request

Sponsored

Shells & building kits

Summerwood Products

  • Based in Toronto, Ontario
  • Serves All provinces and territories

Toronto-based maker of prefab sheds, cabins, bunkies, studios, garages and gazebos sold as pre-cut or pre-assembled kits.

Why this matches: Serves Quebec · based in Ontario

Pricing on request

Breadcrumbs, section headers and the footer appear throughout — see any directory page.