ombrelle
Design system · v2

Styleguide.

The tokens, type and parts every Ombrelle page is built from. Toggle the theme in the header to see each one in carbon.

01

Color

Bone neutrals, one signal orange and five image placeholder tones. Each swatch shows the light value on the left and the dark value on the right.

app/globals.css · tokens/ombrelle.tokens.json
  • paper--o-paper
    Light
    #f2f1ed
    Dark
    #0b0b0a
    Page background
  • paper-2--o-paper-2
    Light
    #e8e7e2
    Dark
    #141413
    Bands, chips, hovers
  • card--o-card
    Light
    #ffffff
    Dark
    #181817
    Cards, fields, header bar
  • ink--o-ink
    Light
    #0d0d0c
    Dark
    #f2f1ed
    Text, primary buttons, feature tiles
  • muted--o-muted
    Light
    #64635e
    Dark
    #a3a29c
    Secondary text, headline tails
  • subtle--o-subtle
    Light
    #9c9a93
    Dark
    #6e6d68
    Indices and quiet metadata
  • line--o-line
    Light
    #dddcd6
    Dark
    #262624
    Hairlines, card borders
  • line-strong--o-line-strong
    Light
    #c5c3bc
    Dark
    #3a3a37
    Outline buttons, hover borders
  • accent--o-accent
    Light
    #ff4f1f
    Dark
    #ff6a3d
    CTA, dots, one word or period
  • accent-fg--o-accent-fg
    Light
    #0d0d0c
    Dark
    #0b0b0a
    Text on accent (never white)
  • plate-1--o-plate-1
    Light
    #e3e1da
    Dark
    #bfbcb4
    Image placeholder, lightest
  • plate-2--o-plate-2
    Light
    #c9c6bc
    Dark
    #a5a298
    Image placeholder, light
  • plate-3--o-plate-3
    Light
    #a29e92
    Dark
    #87837a
    Image placeholder, mid
  • plate-4--o-plate-4
    Light
    #625f57
    Dark
    #4e4c46
    Image placeholder, shade
  • plate-5--o-plate-5
    Light
    #272623
    Dark
    #1e1d1b
    Image placeholder, deepest

Use them as Tailwind classes only: bg-paper bg-card text-ink text-muted border-line bg-accent text-accent-fg and opacity modifiers. White and black appear only on image overlays.

02

Themes

Light (bone) is the default; the dark (carbon) theme is the .dark class on <html>, saved in localStorage as theme.

:root · .dark · app/layout.tsx
Bone · light:root

Shaped by light.

Casa do Arco

Comporta · 2025

PrimaryAccent
Carbon · dark.dark

Shaped by light.

Casa do Arco

Comporta · 2025

PrimaryAccent
03

Type scale

One family. Geist for everything, big and tight at the top; Geist Mono only for small uppercase labels.

app/globals.css → @layer utilities
  • Hero.text-heroGeist 600 · clamp(52px, 11.5vw, 176px) · 0.86 · −0.065emPage titles

    Light.

  • Display.text-displayGeist 600 · clamp(40px, 6.4vw, 96px) · 0.92 · −0.055emSection titles

    Lime and timber.

  • Headline.text-headlineGeist 600 · clamp(30px, 3.6vw, 52px) · 1.0 · −0.045emSub-sections, quotes

    Thresholds, stairs and long windows

  • Title.text-titleGeist 600 · 24px · 1.1 · −0.035emCard titles

    Casa do Arco, Comporta

  • Heading.text-headingGeist 600 · 19px · 1.25 · −0.025emSmall headings, list rows

    Lime plaster, smoked oak, basalt

  • Lede.text-ledeGeist 450 · clamp(19px, 1.7vw, 24px) · 1.4 · −0.02emIntro paragraphs

    We design buildings and rooms that slow people down, places that hold the light and age well.

  • BodybodyGeist 400 · 15px · 24pxDefault on <body>

    A low house arranged around a single arched threshold that frames the pines. Lime plaster walls, oak floors and a roof of handmade tiles.

  • Label.text-labelGeist Mono 500 · 11px · 16px · 0.06em · uppercaseChips, meta, indices

    01 · Residential · 2025

Emphasis is a second tone, never a second typeface: Shaped by light. Big numbers use font-semibold tracking-[-0.07em].

04

Radii

Two shape tokens carry the whole kit, plus pills and the 24px glass radius.

@theme --radius-tile · --radius-panel
  • Tile20px--radius-tile · .tile / rounded-tileImages, swatches, small cards
  • Panel32px--radius-panel · .panel / rounded-panelLarge images, cards, feature tiles
  • Glass24pxrounded-3xlGlass overlays, FAQ rows, modal
  • Pill9999pxrounded-fullButtons, chips, tabs, header bar
05

Buttons

Pill buttons in five variants and two sizes, plus a round icon size. Pass href to render a link.

components/ui/button.tsx

size="md" · 48px

size="sm" · 36px

Icon · with icon · disabled

Signature CTA · pill with a round icon well

Start a projectAll projects
06

Form fields

Rounded filled fields, 48px tall, with a label above and an optional hint below. Always pair id and htmlFor.

components/ui/field.tsx

We reply within three working days.

07

Badges

Small status labels. Add a dot so state never relies on color alone.

components/ui/badge.tsx
ResidentialNewCompletedIn progressClosed
08

Chips

Mono label chips: a section chip with an accent dot, a meta chip, and frosted chips over images.

Pattern · rounded-full + .text-label
Section labelMeta · 2025SelectedOpen for briefs
White coastal house with glass balustrades01 · Residential
Glass caption barÉvora · 2024
09

Tabs

Segmented pill tabs with optional counts and arrow-key navigation.

components/ui/tabs.tsx · data-tabs

Every project, newest first. Move between tabs with the arrow keys.

10

Switch

A binary setting that applies immediately. Give it a visible label.

components/ui/switch.tsx · data-switch

Captions: on

13

Photography

53 royalty-free CC0 photographs, free for commercial use with no attribution (sources in docs/CREDITS.md). Pick one by name; the box sets the crop.

components/ui/plate.tsx · public/images/

Swap the photos

Replace a file in public/images/ with your own photograph under the same name, or point a name in PHOTOS at a new file. Layouts, crops and captions stay as they are.

While a photo loads, its box shows the plate-2 placeholder tone. Below the first screen, photos load lazily.

<Plate variant="white-kitchen" label="…" className="tile aspect-[4/3] w-full" />
  • White kitchen with an island, cropped 16 / 9aspect-[16/9]
  • White kitchen with an island, cropped 4 / 3aspect-[4/3]
  • White kitchen with an island, cropped 1 / 1aspect-square
  • White kitchen with an island, cropped 4 / 5aspect-[4/5]
  • Cubic villa lit at dusk above a reflecting poolvilla-dusk
  • Single-storey villa opening onto a pool terracevilla-pool
  • Curved infinity pool on a stone terracepool-terrace
  • Infinity pool facing the sea at duskinfinity-pool
  • Long tiled pool and timber deck by the seapool-deck
  • White villa with curved balconieswhite-villa
  • White coastal house with glass balustradescoast-house
  • Glazed gable framed in white render and timberglass-gable
  • Cantilevered upper floor with a glass balconycantilever
  • House of stone, render and timber claddingtimber-house
  • Brick house above a planted gravel gardengarden-house
  • Brick cube house with a gravel pathbrick-cube
  • White house behind tall grasseswhite-house
  • Sharp roof edge against a blue skyroof-edge
  • Deep roof overhang above a lit clerestoryroof-light
  • White cubic houses above the seawhite-cubes
  • Timber barn house at sunsetbarn-dusk
  • Black barn house under a storm skyblack-barn
  • White wall and pergola on the shoresea-wall
  • Timber pergola with festoon lightspergola
  • Terrace chairs facing a dry gardengarden-terrace
  • Board-marked concrete wall with a line of lightconcrete-light
  • Light through slits in a concrete roomconcrete-slits
  • Concrete courtyard in raking sunconcrete-court
  • Deep window slots in a dark facadeconcrete-windows
  • Curved concrete corridor under a skylightconcrete-curve
  • Spiral stair seen from abovespiral-stair
  • White stairs folding around a light wellwhite-stair
  • Stair descending between dark wallsdark-stair
  • Stone stair hall with a lit doorwaystair-hall
  • Facade corner of horizontal bandscorner-lines
  • White curved gallerywhite-gallery
  • Timber-lined bedroom with sheer curtainstimber-bedroom
  • Bedroom with a leather bench at golden hourwarm-bedroom
  • Quiet white bedroom by the windowsoft-bedroom
  • Attic bedroom under skylightsattic-bedroom
  • Freestanding bath in a dark master suitedark-bath
  • Freestanding bath on stone tilesstone-bath
  • Round bath in a candlelit spa roomround-bath
  • Timber loungers along a lit stone wallspa-loungers
  • Glazed dressing room on dark floorsdressing-room
  • White living room with a lacquer tablewhite-living
  • Living room behind full-height glazingglass-living
  • Lounge with globe lights and tall windowslounge
  • Living room with a green sofa at duskwarm-living
  • Sunlit room with a potted treesunlit-room
  • White reading corner with a wire chairreading-corner
  • Round dining table by tall windowsdining-view
  • Dining corner on herringbone oakherringbone-dining
  • White kitchen with an islandwhite-kitchen
  • Kitchen island on dark tilesisland-kitchen
  • Long kitchen with rattan pendantslong-kitchen
  • Loggia furnished for the eveningloggia
14

Cards & tiles

Bento grids on 12 columns with 12–16px gaps. Card, ink feature, accent feature and image tile.

Pattern · .panel / .tile in grid gap-3 md:gap-4
Casa do Arco: single-storey villa opening onto a pool terraceImage tileCasa do ArcoComporta, Portugal
Ink feature48+
Accent featureInk text on orange.
Cardbg-card + line.
15

Motion

Pure CSS. Tiles rise in as they enter the viewport, tickers loop, hovers ease out. Everything stops for reduced motion.

app/globals.css · .reveal · .marquee · ease-out-expo
  • .revealScroll-driven, entry 0–60%, 40px rise + 0.98 scale
  • .marquee40s linear loop, pauses on hover, two copies
  • ease-out-expocubic-bezier(0.16, 1, 0.3, 1) for hovers

Architecture, Interiors, Furniture, Landscape