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

# San Rita — About · Design System

> An editorial studio identity shaped by wild landscapes.

**Theme:** dark · **Industry:** design · **Source:** https://sanrita.ca/en/about · **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._

San Rita’s About page pairs dramatic landscape photography with oversized condensed headlines and restrained monospace details. A deep forest canvas carries the long-form story, while pale green type and a final travel-led call to action provide contrast.

## North star

Let one monumental headline and authentic landscape photography define each section, with all supporting UI kept quiet.

## Overview

The visual strategy sets an adventurous, editorial mood through contrast rather than ornament. Deep Green (#161b13) forms the long, quiet story canvas; the measured gray-green (#84907f) appears in the opening section, while Icy Blue (#dde2e4) and white are supporting light surfaces and muted text tones. Adventure Yellow (#e2ffcc) is the high-visibility accent: it colors the enormous opening headline, navigation button, and small markers over the landscape. F37stout gives the display copy its narrow, forceful silhouette; monospace handles uppercase labels, captions, and compact details. The opening is a full-bleed aerial map image, with small controls overlaid and a huge headline anchored across its lower area. Farther down, the story becomes a sparse dark field with a compact cluster of overlapping documentary photos. The final pale image band returns to oversized type. Generous dark negative space, square-edged elements, and minimal ornament let the imagery and typography carry the page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Green | `#161b13` | `--color-deep-green` | brand | Main dark canvas for the long story section and footer. |
| Icy Blue | `#dde2e4` | `--color-icy-blue` | neutral | Muted light text and a pale supporting surface, including the closing band. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Light canvas surface; supporting background rather than the dominant page color. |
| Trail Lime | `#e2ffcc` | `--color-trail-lime` | accent | Oversized hero lettering, pale CTA surfaces, and small navigation or map markers. |
| Terrain Sage | `#84907f` | `--color-terrain-sage` | brand | Measured opening-section ground and subdued green surfaces, text, and links. |
| Moss Shadow | `#2d3329` | `--color-moss-shadow` | semantic | Muted text and dark card surface; supports compact content against lighter accents. |

### Semantic aliases

`--color-canvas` → `#161b13` (Deep Green) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#84907f` (Terrain Sage) · `--color-surface-3` → `#dde2e4` (Icy Blue) · `--color-text` → `#e2ffcc` (Trail Lime) · `--color-text-muted` → `#dde2e4` (Icy Blue) · `--color-text-subtle` → `#2d3329` (Moss Shadow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e2ffcc` | `#161b13` | 16.17:1 | AAA |
| `#e2ffcc` | `#ffffff` | 1.08:1 | fail |
| `#e2ffcc` | `#84907f` | 3.09:1 | AA-large |
| `#e2ffcc` | `#dde2e4` | 1.21:1 | fail |
| `#dde2e4` | `#161b13` | 13.39:1 | AAA |
| `#dde2e4` | `#ffffff` | 1.31:1 | fail |
| `#dde2e4` | `#84907f` | 2.56:1 | fail |
| `#2d3329` | `#161b13` | 1.35:1 | fail |
| `#2d3329` | `#ffffff` | 12.99:1 | AAA |
| `#2d3329` | `#84907f` | 3.88:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 60%, rgb(22, 27, 19) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| mono | `--font-mono` | webfont | 400, 700 | Most page text: uppercase body copy, captions, links, and small labels. | Space Mono |
| F37stout | `--font-display` | webfont | 400 | Display headlines, including the oversized hero statement and section headings. | Bebas Neue |

- **mono:** Regular weight dominates; use uppercase with slightly tight tracking for body and compact uppercase captions.
- **F37stout:** Use the measured regular weight in uppercase; tight line height and a tall, condensed silhouette are defining.

### Type scale — Custom (ratio ≈ 2.839, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 366px | 400 | 0.9 | 0 | uppercase | F37stout | Monumental uppercase hero headline over the landscape. |
| h1 | 48px | 400 | 0.9 | 0 | uppercase | F37stout | Primary page headline in the condensed display face. |
| h2 | 40px | 400 | 0.9 | 0 | uppercase | F37stout | Large uppercase story or section headlines. |
| body | 16px | 400 | 1.2 | -0.01em | uppercase | mono | Uppercase monospace narrative and supporting copy. |
| caption | 12px | 400 | normal | 0 | uppercase | mono | Small uppercase monospace image and origin notes. |
| link | 12px | 400 | normal | 0 | uppercase | mono | Compact uppercase monospace navigation links. |
| code | 16px | 400 | 1.2 | -0.01em | uppercase | mono | Monospace utility text where a code-like treatment is needed. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 5, 12, 16, 24, 40 px.
- Section rhythm 50px · element gap 12px · card padding 20px · max content width 1392px.

The opening fills the viewport with landscape imagery and places branding and a compact trail control at opposite top corners. Its main headline spans almost the full width near the bottom, balanced by a small origin note. The page then shifts to a very long, sparse Deep Green story canvas with a small photo collage rather than a dense grid. The measured maximum page width is 1392px; comfortable spacing and broad negative space keep each visual moment distinct.

## Shape & elevation

- No box shadows measured: the page is flat.

The page is predominantly flat: measured shadows are absent, borders are not a defining element, and components have square corners. Create depth through full-bleed photography, a dark gradient fading into the hero base, and the overlap of the story photos. Keep controls crisp and pale against their backgrounds rather than adding card shadows.

## Imagery

Use cinematic, full-bleed aerial landscape photography as the opening image, with natural terrain colors visible beneath the graphic overlays. Add a small, loosely stacked documentary photo collage within the dark story area. The closing section uses a pale landscape image behind oversized type. Keep imagery photographic and grounded; avoid decorative illustration or polished product renders.

## Components

### Brand mark

Place the expressive pale-green San Rita wordmark at the top-left over the hero photograph.

### Trail control

A compact pale-green rectangular control sits at the top-right; pair its uppercase monospace label with a small icon.

### Hero headline

Set a very large, uppercase F37stout statement across the lower hero image in #e2ffcc.

### Map markers

Use small pale-green outlined markers and a route graphic over the aerial landscape, keeping them subordinate to the headline.

### Origin caption

A small uppercase monospace note sits near the lower-right of the hero, with a minimal outlined symbol nearby.

### Story photo collage

Overlap a small number of documentary photographs within the otherwise open Deep Green story canvas.

### Closing call to action

A pale photographic band combines oversized condensed uppercase copy with a simple lime directional cue.

### Measured component styles

- **Link** (“EN”): transparent background · text #2d3329 · radius 0px · padding 0px · 700 12px mono · uppercase
- **Card** (“EXPLORATION AND CRAFT MASTERY We explore”): background #2d3329 · text #e2ffcc · radius 0px · padding 0px 40px · 400 16px mono

## Do

- Use #161b13 as the main story canvas.
- Reserve #e2ffcc for high-contrast headlines and key controls.
- Let landscape photography fill the hero.
- Set display statements in uppercase condensed type.
- Keep supporting labels small, uppercase, and monospace.
- Leave generous dark negative space around story imagery.

## Don't

- Do not crowd the sparse story section with cards or grids.
- Do not introduce unmeasured palette colors as brand UI.
- Do not add rounded corners, prominent borders, or shadows.
- Do not compete with the hero image using multiple headline blocks.
- Do not use decorative illustration in place of documentary photography.
- Do not turn small navigation and captions into dominant elements.

## Agent prompt

Build a new editorial page in San Rita’s visual style. Use Deep Green (#161b13) as the quiet main canvas and Terrain Sage (#84907f) for subdued section surfaces. Start with full-bleed, authentic landscape photography; overlay a single oversized uppercase headline in a condensed display face using Trail Lime (#e2ffcc). Keep navigation compact and monospace, with pale rectangular controls and small map-inspired markers. Use Icy Blue (#dde2e4) and white sparingly for light surfaces or muted copy, and Moss Shadow (#2d3329) for dark supporting cards. Structure the story with broad negative space and a small overlapping photo collage, then finish with a pale image-led CTA and large type. Keep corners square, avoid shadows and ornamental borders, and let photography and typography provide the drama.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed aerial landscape with top-corner controls, a wide lower headline, and a small origin caption. | Map-style location markers, Top-right trail navigation, Hero-to-story gradient fade | Pale-green wordmark, Oversized condensed headline, Uppercase monospace labels, Square pale CTA |

## Source CSS custom properties (selected)

```css
--color-icy-blue: #dde2e4;
--color-adventure-yellow: #e2ffcc;
--color-terrain-grey: #84907f;
--color-forest-green: #2d3329;
--color-deep-green: #161b13;
--spacing-12: .75rem;
--spacing-16: 1rem;
```

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