---
title: "Samara design system"
variant: extended
source: https://www.samara.com/
captured_at: 2026-10-12
theme: light
industry: real-estate
generator: Design DNA (https://four.wiralomi.com/style/samara-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Samara · Design System

> Quiet architecture, framed by nature.

**Theme:** light · **Industry:** real-estate · **Source:** https://www.samara.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Samara’s homepage pairs restrained navigation with large, immersive photography of contemporary homes. Soft neutral surfaces and a single bright blue CTA let the architecture and landscape carry the visual story.

## North star

Keep the interface quiet and spacious, using crisp neutral surfaces to frame immersive architectural photography.

## Overview

The visual strategy keeps interface chrome quiet so the homes and landscapes lead. A white header sits against a pale gray canvas, while the first feature is a broad, rounded photograph with a subtle dark overlay behind its caption. The palette is mostly white, soft gray, and black; Signal Blue appears sparingly on the primary “Get started” button and text links. Regola’s clean sans-serif forms support compact navigation and unobtrusive captions, with a slightly larger, airy feel in the nav. The composition favors generous open space around a centered, wide media frame rather than a dense card grid. Photo color is intentionally earthy and should be treated as imagery, not as brand palette. Pill-shaped buttons and restrained shadows create small, tactile controls without adding heavy borders or decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f2f2f2` | `--color-soft-canvas` | surface | Pale gray page canvas and surrounding space; use as a calm neutral behind content. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Header and clean content surfaces; also used for light button fills and text over dark imagery. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Muted navigation and secondary text. |
| Image Haze | `#afafaf` | `--color-image-haze` | neutral | Mostly appears in gradient/text sampling; treat as image-related nuance, not a core interface color. |
| Slate Gray | `#666666` | `--color-slate-gray` | neutral | Secondary navigation text and muted interface copy. |
| Signal Blue | `#0096f7` | `--color-signal-blue` | accent | Primary CTA fill and occasional link text; reserve for clear interactive emphasis. |
| Ink | `#000000` | `--color-ink` | semantic | Logo, primary navigation, headings, and dark text on light controls. |
| Soft Divider | `#dfdfdf` | `--color-soft-divider` | neutral | Occasional light text or subtle tonal separation; no prominent border system is measured. |
| Warm Offwhite | `#f7f7f0` | `--color-warm-offwhite` | neutral | A small navigation-area tone; not a dominant page surface. |
| Graphite | `#545657` | `--color-graphite` | neutral | Minor navigation-region tone; use sparingly and do not mistake it for a section background. |

### Semantic aliases

`--color-canvas` → `#f2f2f2` (Soft Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#999999` (Quiet Gray) · `--color-text-subtle` → `#666666` (Slate Gray) · `--color-accent` → `#0096f7` (Signal Blue) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#999999` | `#f2f2f2` | 2.54:1 | fail |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#666666` | `#f2f2f2` | 5.13:1 | AA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#0096f7` | `#f2f2f2` | 2.8:1 | fail |
| `#0096f7` | `#ffffff` | 3.13:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)), url("https://www.samara.com/assets/images/doorway/home-adus/home-adus-480-blur.webp")`
- `linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("https://www.samara.com/assets/images/doorway/home-adus/home-adus-480-blur.webp")`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| regola-book | `--font-body` | webfont | 300, 400 | Primary site face for body copy, navigation, captions, buttons, and links. | Inter |
| regola-regular | `--font-regola-regular` | webfont | 300, 400 | Used for the compact secondary “Learn more” button label. | Inter |

- **regola-book:** Light to regular weights; lowercase-friendly, clean sans-serif with restrained tracking and no forced uppercase.
- **regola-regular:** Regular weight for concise control labels; keep casing natural and avoid display-like emphasis.

### Type scale — Major Third (ratio ≈ 1.25, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 15px | 400 | 1.27 | 0 | — | regola-book | General product and supporting copy. |
| caption | 14px | 300 | 1.29 | -0.01em | — | regola-book | Hero image caption and compact descriptive text. |
| button | 15px | 300 | 1.2 | -0.01em | — | regola-book | Primary CTA label and interactive button text. |
| nav | 18px | 300 | 1.33 | -0.01em | — | regola-book | Main navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 9, 12, 14, 18, 20, 21, 32, 48 px.
- Section rhythm 48px · element gap 12px · card padding — · max content width 1221px.

The page uses a centered, wide content frame with a measured maximum width of 1221px and a comfortable density. The header aligns the brand left, navigation near the center, and primary action right. Below it, a large landscape image dominates the first viewport, with its caption and secondary action anchored over the lower image area. Preserve broad breathing room between the header, media, and following content; keep alignment clean and avoid adding dense columns or visible card borders.

## Shape & elevation

- Radius: button `9999px` · nav `18px` · xs `6px` · sm `9px` · md `18px` · pill `9999px`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0.11) 0px 0.5px 1px 0px`
- Shadow `hairline-2` (button): `rgba(0, 0, 0, 0.1) 0px 2px 1.5px 0px`
- Shadow `md` (button): `rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px`
- Motion: standard transition `0.16s ease` on interactive elements.

The design is mostly flat, with no prominent border treatment. Small pill controls use restrained shadows for separation, while the navigation has a barely visible hairline-level shadow. Image overlays add caption contrast; avoid card-like elevation or heavy outlines.

## Imagery

Use high-quality architectural photography as the main visual content: contemporary homes situated in landscaped settings, framed wide and close to full content width. The first image has softly rounded corners and natural, earthy tones. Captions sit over the photo with a subtle darkened treatment for legibility. The measured earthy screenshot colors belong to photography, not the core brand palette.

## Components

### Header navigation

Minimal white header with Samara wordmark at left, compact Homes, ADUs, and Multifamily links, and a right-aligned blue pill CTA.

### Primary CTA

“Get started” uses Signal Blue #0096f7, white text, rounded pill styling, and a subtle shadow.

### Hero image feature

A wide architectural photograph with softly rounded corners, filling most of the content frame.

### Image caption

Concise white descriptive copy sits over a subtle dark image treatment near the bottom of the hero.

### Secondary action

“Learn more” appears as a compact white pill with dark text and a restrained elevated shadow.

### Text links

Use Signal Blue #0096f7 for a small number of link treatments rather than coloring all navigation.

### Measured component styles

- **Primary button** (“Get started”): background #0096f7 · text #ffffff · radius 24px · padding 0px 18px · 300 15px regola-book · shadow rgba(0, 0, 0, 0.1) 0px 2px 1.5px 0px
- **Secondary button** (“Learn more”): background #fefefe · text #000000 · radius 100px · padding 12px 20px 13px 20px · 400 12px regola-regular · shadow rgba(0, 0, 0, 0.02) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px
- **Link**: transparent background · text #0096f7 · radius 0px · padding 0px · 400 16px regola-book
- **Navigation item** (“Backyard The easy, elegant, smartly cust”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px regola-book

## Do

- Lead with large, authentic architectural photography.
- Keep the header sparse and visually quiet.
- Use #f2f2f2 and #ffffff for calm neutral surfaces.
- Reserve #0096f7 for primary actions and selective links.
- Use rounded pill controls with subtle shadows.
- Keep captions legible over images with restrained contrast treatment.

## Don't

- Do not turn the earthy photo colors into interface brand colors.
- Do not crowd the header with extra controls.
- Do not add heavy borders or strong card shadows.
- Do not use bright blue as a large section background.
- Do not impose uppercase labels or decorative display typography.
- Do not shrink the hero into a small card.

## Agent prompt

Build a new Samara-style page with a quiet, architectural editorial feel. Use Gallery White #ffffff and Soft Canvas #f2f2f2 as the main surfaces, Ink #000000 for primary text, and Signal Blue #0096f7 only for the primary action and selective links. Use a clean sans-serif close to Regola/Inter, with natural casing and restrained weights. Create a minimal header with brand, a small centered navigation group, and a right-aligned pill CTA. Give the main content a centered, broad frame and let one immersive landscape-oriented home photograph dominate. Add concise over-image caption copy with subtle darkening for contrast and a small white secondary pill. Keep spacing generous, surfaces flat, shadows faint, and all photographic earth tones confined to imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Minimal header above a broad, centered landscape image; caption and secondary action overlay the image near its lower edge. | primary navigation, primary CTA, over-image caption, secondary learn-more action | white header, wide rounded photography, blue pill CTA, subtle dark image overlay |

## Source CSS custom properties (selected)

```css
--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-red: #ff4000;
--color-orange: #ffbd00;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/samara-com