---
version: alpha
name: Samara
description: "One electric-blue pill floating on bone-white calm — prefab homes, Apple-clean."
colors:
  on-surface-variant: "#545657"
  on-surface: "#000000"
  surface: "#FFFFFF"
  outline: "#dadad9"
  error: "#ff4000"
  primary: "#0096F7"
  blue-hover: "#008de8"
  blue-lift: "#0f9cf7"
  blue-bright: "#33abf9"
  beige: "#fdfdf7"
  beige-darker: "#f7f7f0"
  bone-white: "#f6f7f5"
  parchment: "#d7d5cb"
  evergreen: "#375033"
  dark-bronze: "#2e2e2c"
  amber: "#ffbd00"
typography:
  caption:
    fontFamily: Regola
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  small:
    fontFamily: Regola
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  body:
    fontFamily: Regola
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  link-base:
    fontFamily: Regola
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  heading:
    fontFamily: Regola
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  display:
    fontFamily: Regola
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
rounded:
  small-chip-tag: 6px
  input-control: 9px
  card: 12px
  media-large-card: 18px
  button: 22px
  pill: 100px
spacing:
  grid-gutter: 24px
  grid-margin: 54px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 54px
---
# Samara — Style Reference
> One electric-blue pill floating on bone-white calm — prefab homes, Apple-clean.

**Theme:** light

Samara builds factory-made homes, backyard ADUs, and multifamily units, and the site carries itself like the product: quiet, precise, almost entirely absent of decoration. The canvas is near-pure white warmed by a family of bone and beige neutrals (`#fdfdf7`, `#f7f7f0`, `#f6f7f5`) that reads as daylight rather than a UI. Color discipline is the signature move — the entire interface is black text on white, and a single saturated blue (`#0096f7`) is reserved almost exclusively for the "Get started" pill and inline links. Type is Regola, a warm geometric grotesque, run light (300) at large sizes so a 72px headline feels calm rather than loud. Layout is a wide 12-column grid (1600px center column, 54px margins) that lets architectural photography breathe full-width. A second, quieter reserve of nature tones — evergreen, driftwood, parchment, dark bronze — exists in the token set for editorial and material contexts, but the front-of-house palette stays black, white, and blue.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink | `#000000` | `--color-black` | Primary text, wordmark, headings — the default foreground on every surface. |
| Paper | `#FFFFFF` | `--color-white` | Base canvas and the text color inside the blue pill; the page is overwhelmingly this. |
| Samara Blue | `#0096F7` | `--color-blue` | The one accent — primary CTA fill and inline links. Never decorative; if it's blue, it's clickable. |
| Blue Hover | `#008de8` | `--color-blue-black-6` | Blue darkened ~6% for the pressed/hover state of the CTA. |
| Blue Lift | `#0f9cf7` | `--color-blue-white-6` | Blue lightened ~6% for a subtle hover lift. |
| Blue Bright | `#33abf9` | `--color-blue-white-20` | Lightest blue tint, for focus glows and highlighted-on-dark contexts. |
| Beige | `#fdfdf7` | `--color-biege` | Warmest off-white surface — the top of the neutral ladder, barely distinct from paper. |
| Beige Darker | `#f7f7f0` | `--color-biege-darker` | Section-tint background; the warm panel that separates content bands from pure white. |
| Bone White | `#f6f7f5` | `--color-bone-white` | Cool-leaning bone surface, an alternate section wash. |
| Driftwood | `#dadad9` | `--color-driftwood` | Hairline dividers and muted metallic-silver borders. |
| Parchment | `#d7d5cb` | `--color-parchment` | Deeper warm neutral for card fills and material swatches. |
| Slate Gray | `#545657` | *(measured)* | Mid-gray used as a muted background/text step (secondary nav, captions). |
| Evergreen | `#375033` | `--color-evergreen` | Editorial forest-green accent — material/landscape contexts only, never a CTA. |
| Dark Bronze | `#2e2e2c` | `--color-dark-bronze` | Near-black warm neutral for deep panels and footers. |
| Alert Red | `#ff4000` | `--color-red` | Utility-only error/alert signal. |
| Amber | `#ffbd00` | `--color-orange` | Utility-only warning/highlight signal; never a brand accent. |

## Tokens — Typography

### Regola — the whole system, one warm grotesque · `--font-regola`
Regola (ARK Type) is a humanist geometric sans used across every role — wordmark, headings, body, links. The signature choice is running it *light* (300 / regola-light) even at display sizes, so headlines feel composed and residential rather than corporate. Book (400) carries body and links; a Medium and oblique exist in the loaded set for rare emphasis.
- **Substitute:** Neue Haas Grotesk, Söhne, Inter
- **Weights:** 300 (regola-light), 400 (regola-book / regola-regular), 400 (regola-medium), oblique (regola-book-oblique)
- **Sizes:** 12px, 14px, 15px, 16px, 18px, 72px
- **Line height:** ~1.1 on display, ~1.5 on body
- **Letter spacing:** near-zero; display sizes run slightly tight, body neutral
- **Role:** One family for everything — headings, body, nav, and links all speak Regola; weight and size carry all the hierarchy.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Small | 14px | 1.5 | 0 | `--text-sm` |
| Body | 15px | 1.5 | 0 | `--text-body` |
| Link / Base | 16px | 1.5 | 0 | `--text-base` |
| Heading | 18px | 1.4 | 0 | `--text-heading` |
| Display | 72px | 1.1 | -0.01em | `--text-display` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Grid gutter | 24px | `--modern-grid-column-gutter` |
| Grid margin | 54px | `--modern-grid-column-margin` |
| xs | 4px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 54px | `--spacing-lg` |

### Border Radius
| Element | Value |
|---------|-------|
| Small chip / tag | 6px |
| Input / control | 9px |
| Card | 12px |
| Media / large card | 18px |
| Button (raised) | 22px–24px |
| Pill (CTA, secondary) | 100px (fully round) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Hairline lift | `rgba(0, 0, 0, 0.11) 0px 0.5px 1px 0px` | `--shadow-hairline` |
| Button | `rgba(0, 0, 0, 0.1) 0px 2px 1.5px 0px` | `--shadow-button` |
| Floating card | `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` | `--shadow-card` |

### Layout
- **Page max-width:** 1600px (`--center-column-max-width`)
- **Section gap:** wide, photography-led full-bleed bands
- **Card padding:** ~24px
- **Element gap:** 24px grid gutter on a 12-column grid, 54px outer margins

## Components

### Primary CTA — "Get started"
**Role:** The one loud element on the page; the single conversion action.
Fully-rounded pill (`border-radius: 100px`) filled `#0096F7` with `#FFFFFF` Regola text, subtle raised shadow `rgba(0, 0, 0, 0.1) 0px 2px 1.5px`. Hover darkens toward `#008de8`. It is the only place saturated blue appears as a fill — reserve it.

### Secondary Button
**Role:** Low-emphasis action beside or below the primary CTA.
White (`#FFFFFF`) pill, `border-radius: 100px`, black Regola text, floated on a soft double shadow `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px` that gives a hairline ring plus a diffuse lift — no visible border needed.

### Top Navigation
**Role:** Persistent site header on white.
Left: "Samara" wordmark in black Regola. Center: text links (ADUs, Homes, Multifamily) in a muted gray, no underline, weight ~300–400. Right: the blue "Get started" pill. Transparent over the white canvas, no bottom border.

### Inline Link
**Role:** Text-flow navigation.
`#0096F7`, Regola Book, no underline at rest, 16px. Blue is the only signal that text is a link — used sparingly inside body copy.

### Icon / Labeled Link
**Role:** Link paired with a leading icon or indent.
Blue (`#0096F7`), 15px, weight 300, with left padding (`3px 0 3px 32px`) reserving room for a glyph — used in lists and footer link groups.

### Heading
**Role:** Section and content titles.
Black (`#000000`) Regola Light (300) at 18px for sub-heads, scaling to 72px for hero display. Weight stays light even large; size does the shouting.

### Card
**Role:** Content and product tiles over tinted sections.
`border-radius: 12px` (18px for media-forward cards), fill of a warm neutral (`#f7f7f0` / `#f6f7f5` / `#d7d5cb`), floating card shadow. Padding ~24px. Corners soft, edges undecorated.

### Section Band
**Role:** Full-width content zone separating white from warm.
Alternates pure `#FFFFFF` with a beige wash (`#f7f7f0`) or bone (`#f6f7f5`); no borders — the tone shift alone marks the boundary.

### Chip / Tag
**Role:** Small metadata or filter label.
`border-radius: 6px`, neutral fill (`#f7f7f0`), black text at 12–14px.

### Input / Field
**Role:** Form control (Regola has dedicated `-field` variants).
`border-radius: 9px`, driftwood (`#dadad9`) hairline, white fill, black Regola Book text — quiet and unornamented.

### Footer
**Role:** Site-wide link and legal zone.
Deep warm-neutral or dark-bronze (`#2e2e2c`) panel option, or plain white with driftwood dividers; link groups in Regola, blue for actionable links.

## Do's and Don'ts

### Do
- Keep blue (`#0096F7`) exclusive to the CTA pill and links — if it's blue, it's clickable.
- Run Regola *light* (300) at display sizes; let size, not weight, carry the hierarchy.
- Separate content bands with warm tone shifts (`#FFFFFF` → `#f7f7f0` → `#f6f7f5`), not borders.
- Use fully-round pills (`100px`) for both primary and secondary buttons.
- Let architectural photography run full-bleed inside the 1600px / 12-column grid.

### Don't
- Don't add a second accent color to the front-of-house palette — evergreen, red, and amber are editorial/utility only.
- Don't underline links or box them; blue text is the only link affordance.
- Don't use heavy weights for headlines — bold breaks the residential calm.
- Don't apply hard borders where a shadow ring or tone step will do.
- Don't tint surfaces with cool grays; the neutral ladder is warm (beige/bone/parchment).

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper | `#FFFFFF` | Base canvas — the dominant surface. |
| 1 | Beige | `#fdfdf7` | Warmest lift, barely-there panel. |
| 2 | Beige Darker | `#f7f7f0` | Standard tinted section band. |
| 3 | Bone White | `#f6f7f5` | Cool-bone alternate section wash. |
| 4 | Parchment | `#d7d5cb` | Deeper warm card fill / material swatch. |
| 5 | Dark Bronze | `#2e2e2c` | Deep panel / footer, near-black warm. |

## Elevation
Depth is conveyed by shadow and tone, never by borders. Buttons carry a tight raised shadow (`0px 2px 1.5px`), floating cards a hairline ring plus a soft 12px-blur drop (`rgba(0,0,0,0.08) 0px 4px 12px`), and everything else sits flat on the page. Between sections, elevation is faked by a warm luminance step (white → beige → bone) rather than a line. The result reads as paper and daylight — soft, matte, architectural.

## Imagery
Photography-led. Expect large, full-bleed images of homes, backyard ADUs, and interiors — natural light, real materials, minimal styling — treated as the hero rather than illustration. Iconography is sparse and line-based. No gradients, no decorative graphics; the images and the single blue pill are the only saturated elements on the page.

## Layout
Full-bleed content bands stacked vertically, each either pure white or a warm tint. Content sits inside a 1600px center column on a 12-column grid with 24px gutters and 54px outer margins. The nav is a transparent top bar — wordmark left, text links center, blue pill right — with no border. Sections alternate tone to segment content, and imagery frequently breaks to the full viewport width.

## Typography Signature
Samara proves how far one warm grotesque and two weights can carry an entire brand. Regola runs in two modes: *Light 300* for anything large — the wordmark, hero display at 72px, section heads — where the thin strokes keep even huge type residential and calm; and *Book 400* for body, nav, and links where it reads clean at 14–16px. There is no serif, no second family, no italic except a rare oblique for emphasis. Line-height stays generous (~1.5) on body and tight (~1.1) on display, and letter-spacing is essentially neutral. The move that makes it feel premium is the refusal to bold — hierarchy is size and color, never weight.

## Agent Prompt Guide
## Quick Color Reference
- background: #FFFFFF / text: #000000 / surface: #f7f7f0 / border: #dadad9 / accent: #0096F7 / primary action: #0096F7 (blue pill, white text)

## Example Component Prompts
1. **Primary CTA**: Fully-rounded pill button, `border-radius: 100px`, fill `#0096F7`, white Regola text ~16px, subtle shadow `rgba(0,0,0,0.1) 0px 2px 1.5px`; hover darkens to `#008de8`. Label "Get started".
2. **Top Nav**: Transparent header on white, no border. "Samara" wordmark left in black Regola; center text links (ADUs, Homes, Multifamily) in muted gray weight 300, no underline; blue `#0096F7` "Get started" pill right.
3. **Section Band**: Full-width band, background `#f7f7f0`, black Regola Light heading at ~72px, body copy `#000000` at 15px, generous vertical padding; separated from adjacent white sections by tone alone (no border).
4. **Product Card**: `border-radius: 12px` (18px if media-led), fill `#f6f7f5`, floating shadow `rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.08) 0px 4px 12px`, ~24px padding, black Regola title, blue inline link.
5. **Inline Link**: `#0096F7` Regola Book text, no underline at rest, 16px — the only blue in running copy.

## Similar Brands
- **Apple** — the same reductive white-canvas, one-accent, product-as-hero restraint (fitting, given Samara's Apple-designer lineage).
- **Dwell** — residential-architecture editorial that lets full-bleed home photography carry the page.
- **Cover / Plant Prefab** — prefab-home peers with clean, material-honest, near-monochrome sites.
- **Muji** — warm-neutral, unbranded calm where the absence of decoration *is* the brand.
- **Linear** — a single saturated accent on a disciplined neutral system, hierarchy by weight and space.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-blue: #0096f7;
  --color-blue-10: rgba(0, 150, 247, 0.1);
  --color-blue-20: rgba(0, 150, 247, 0.2);
  --color-blue-white-20: #33abf9;
  --color-blue-white-6: #0f9cf7;
  --color-blue-black-6: #008de8;
  --color-white-80: rgba(255, 255, 255, 0.8);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-black-80: rgba(0, 0, 0, 0.8);
  --color-black-60: rgba(0, 0, 0, 0.6);
  --color-black-40: rgba(0, 0, 0, 0.4);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-12: rgba(0, 0, 0, 0.12);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-6: rgba(0, 0, 0, 0.06);
  --color-black-4: rgba(0, 0, 0, 0.04);
  --color-black-2: rgba(0, 0, 0, 0.02);
  --color-biege: #fdfdf7;
  --color-biege-darker: #f7f7f0;
  --color-bone-white: #f6f7f5;
  --color-driftwood: #dadad9;
  --color-parchment: #d7d5cb;
  --color-evergreen: #375033;
  --color-dark-bronze: #2e2e2c;
  --color-metallic-silver: #dadad9;
  --color-slate-gray: #545657;
  --color-red: #ff4000;
  --color-orange: #ffbd00;

  /* Typography — Families */
  --font-regola: 'Regola', 'Neue Haas Grotesk', 'Söhne', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 15px;
  --text-base: 16px;
  --text-heading: 18px;
  --text-display: 72px;
  --leading-display: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 54px;
  --modern-grid-column-gutter: 24px;
  --modern-grid-column-margin: 54px;
  --center-column-max-width: 1600px;

  /* Border Radius */
  --radius-chip: 6px;
  --radius-input: 9px;
  --radius-card: 12px;
  --radius-media: 18px;
  --radius-button: 22px;
  --radius-button-lg: 24px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-hairline: rgba(0, 0, 0, 0.11) 0px 0.5px 1px 0px;
  --shadow-button: rgba(0, 0, 0, 0.1) 0px 2px 1.5px 0px;
  --shadow-card: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-blue: #0096f7;
  --color-blue-white-20: #33abf9;
  --color-blue-white-6: #0f9cf7;
  --color-blue-black-6: #008de8;
  --color-biege: #fdfdf7;
  --color-biege-darker: #f7f7f0;
  --color-bone-white: #f6f7f5;
  --color-driftwood: #dadad9;
  --color-parchment: #d7d5cb;
  --color-evergreen: #375033;
  --color-dark-bronze: #2e2e2c;
  --color-slate-gray: #545657;
  --color-red: #ff4000;
  --color-orange: #ffbd00;

  /* Typography — Families */
  --font-regola: 'Regola', 'Neue Haas Grotesk', 'Söhne', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-sm: 14px;
  --text-body: 15px;
  --text-base: 16px;
  --text-heading: 18px;
  --text-display: 72px;
  --leading-display: 1.1;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 12px;
  --spacing-md: 24px;
  --spacing-lg: 54px;

  /* Border Radius */
  --radius-chip: 6px;
  --radius-input: 9px;
  --radius-card: 12px;
  --radius-media: 18px;
  --radius-button: 22px;
  --radius-button-lg: 24px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-button: rgba(0, 0, 0, 0.1) 0px 2px 1.5px 0px;
  --shadow-card: rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
}
```