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

# First and Foremost · Design System

> Bold orange identity, grounded in responsible design.

**Theme:** light · **Industry:** agency · **Source:** https://firstandforemost.co/ · **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._

A warm, spacious agency homepage pairs oversized orange typography with botanical illustration and concise statements about responsible creative work. Distinctive peach section bands and direct calls to action give the long page a clear, editorial rhythm.

## North star

Let oversized orange typography lead, and use warm open space and purposeful imagery to keep the message human.

## Overview

The visual identity is built around a near-monochrome pairing: bright orange-red (#ff4501) for nearly all text, navigation and calls to action, against a creamy canvas (#fff7f1). Pale peach (#ffefe9) appears in selected full-width bands, notably the collective introduction and footer, while white provides contrast inside orange sections and circular controls. Oversized, tightly composed display lettering dominates the opening and later transition moments; NeueMontreal supports this expressive scale while remaining clear in compact body copy and navigation. The page uses large areas of open canvas, centered editorial statements, and alternating full-width and contained sections rather than a rigid repeated card grid. Botanical line illustration gives the hero an organic counterpoint to the typographic block; portraits and a monochrome video add human and archival detail. Keep component styling flat and direct: fine peach rules outline selected cards, while the warm palette and section changes provide most of the hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Orange | `#ff4501` | `--color-signal-orange` | brand | Primary brand color for headings, navigation, body text, buttons, illustrations, and the bold comparison section. |
| Cream Canvas | `#fff7f1` | `--color-cream-canvas` | neutral | Main page canvas and background for most content sections, providing warm contrast to orange. |
| Peach Band | `#ffefe9` | `--color-peach-band` | surface | Alternating section background for the collective introduction and footer. |
| Soft White | `#ffffff` | `--color-soft-white` | neutral | Reversed text and button surfaces within orange sections; also used in small circular controls and image treatments. |
| Apricot Line | `#ffc2a9` | `--color-apricot-line` | semantic | Fine card outlines and subtle separators; a supporting detail rather than a dominant surface color. |

### Semantic aliases

`--color-canvas` → `#fff7f1` (Cream Canvas) · `--color-surface` → `#ffefe9` (Peach Band) · `--color-text` → `#ff4501` (Signal Orange) · `--color-text-muted` → `#ffffff` (Soft White) · `--color-border` → `#ffc2a9` (Apricot Line) · `--color-accent` → `#ff4501` (Signal Orange) · `--color-on-accent` → `#ffffff` (Soft White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ff4501` | `#fff7f1` | 3.25:1 | AA-large |
| `#ff4501` | `#ffefe9` | 3.08:1 | AA-large |
| `#ffffff` | `#fff7f1` | 1.06:1 | fail |
| `#ffffff` | `#ffefe9` | 1.12:1 | fail |
| `#ff4501` | `#fff7f1` | 3.25:1 | AA-large |
| `#ff4501` | `#ffefe9` | 3.08:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueMontreal | `--font-body` | webfont | 400, 100, 900, 700 | Display lettering, headings, body copy, navigation, and buttons throughout the page. | DM Sans |

- **NeueMontreal:** Use a broad weight range: very light editorial headings, regular copy, heavy uppercase labels, and bold oversized display lettering.

### Type scale — Golden Ratio (ratio ≈ 1.657, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 200px | 700 | 0.8 | 0 | — | NeueMontreal | Oversized, cropped headline lettering in hero and transition sections. |
| h1 | 80px | 400 | 1.4 | 0 | — | NeueMontreal | Primary section statements and prominent editorial headings. |
| h2 | 58px | 100 | 1.2 | 0 | — | NeueMontreal | Large supporting section headings and feature introductions. |
| h3 | 36px | 100 | 1.2 | 0 | — | NeueMontreal | Subsection headings and service or content titles. |
| h4 | 28px | 900 | normal | 0 | uppercase | NeueMontreal | Short uppercase labels and emphatic section markers. |
| body | 16px | 400 | normal | 0 | — | NeueMontreal | Explanatory paragraphs, service descriptions, and supporting copy. |
| button | 26px | 100 | 3.08 | 0 | — | NeueMontreal | Large, light-weight text on prominent pill-shaped calls to action. |
| nav | 22px | 400 | 1.36 | 0 | — | NeueMontreal | Header navigation links and primary site navigation. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 16, 28, 30, 35, 40, 50, 58, 60, 65, 80, 100, 110, 160 px.
- Section rhythm 160px · element gap 3px · card padding — · max content width 1296px.

The measured page max width is 1296px, with a spacious overall density and a 160px section gap. The header aligns a stacked wordmark, a short introduction, and right-side links across three areas. A full-bleed typographic hero leads into centered editorial content, then alternates pale full-width bands with warm-canvas sections. Feature and service content shifts between split layouts and columns; team imagery spans the page. Preserve broad breathing room and strong alignment changes rather than forcing every block into one grid.

## Shape & elevation

- Radius: button `9999px` · card `50%` · pill `9999px`
- Shadow `xl` (media): `rgba(153, 18, 2, 0.36) -32px 32px 80px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is predominantly flat: section backgrounds, typography, and whitespace establish hierarchy instead of stacked cards. Selected text cards use a thin #ffc2a9 outline, and some media has a pronounced warm-tinted shadow. Preserve clean edges and restrained layering; avoid adding generic shadows to buttons or content blocks.

## Imagery

The hero pairs massive orange lettering with a fine-line botanical illustration that rises from the lower edge. Other sections use a monochrome archival-style video, small illustrated vignettes, and a row of circular team portraits. Keep imagery documentary and graphic rather than glossy; use clear crops, natural contrast, and occasional warm visual integration with the surrounding orange or peach.

## Components

### Header

A three-area header places a stacked orange wordmark on the left, a short introduction beside a vertical divider, and compact links on the right.

### Display hero

An oversized orange headline is intentionally cropped by the viewport, with botanical line art filling the lower edge.

### Editorial statement

Centered heading and compact supporting paragraph sit in a large open canvas area.

### Collective feature

A peach band pairs a left-aligned text block and orange pill CTA with an offset monochrome video or media frame.

### Comparison band

A full-width orange section uses white headings and copy, illustrations, and a circular white control.

### Service list

Large orange service labels stack beside explanatory copy, with a small arrow cue and an outlined language badge.

### Team panel

An orange feature panel combines white heading and description, a white pill CTA, and a horizontal row of circular portraits.

### Footer

A pale peach footer keeps copyright information and compact social icons on a simple, uncluttered row.

### Measured component styles

- **Primary button** (“More about us”): background #ff4501 · text #ffffff · radius 80px · padding 0px 50px · 100 26px NeueMontreal
- **Secondary button** (“Keep it going”): background #ffffff · text #ff4501 · radius 50% · padding 0px · 400 16px NeueMontreal
- **Card** (“Strategy Without a well-defined brand, t”): transparent background · text #ff4501 · border 1px solid #ffc2a9 · radius 0px · padding 0px · 400 16px NeueMontreal
- **Navigation item** (“An international collective offering bra”): transparent background · text #ff4501 · radius 0px · padding 0px · 400 16px NeueMontreal

## Do

- Use #ff4501 for the primary text and action color.
- Keep the main canvas warm with #fff7f1.
- Alternate peach bands selectively to mark important sections.
- Let display lettering extend beyond its container when the composition calls for it.
- Pair expressive typography with concise, readable supporting copy.
- Use illustrations and photography as purposeful editorial accents.

## Don't

- Do not introduce unmeasured palette colors.
- Do not turn every content block into a bordered card.
- Do not center-align every section; vary alignment with intent.
- Do not compress the page into a dense, dashboard-like layout.
- Do not use glossy product renders or generic decorative gradients.
- Do not add shadows to elements that are otherwise flat.

## Agent prompt

Build a new agency page in the First and Foremost visual style. Use #fff7f1 Cream Canvas as the dominant background and #ff4501 Signal Orange for text, navigation, and primary actions. Reserve #ffefe9 Peach Band for occasional full-width section changes; use #ffffff Soft White for reversed content on orange and #ffc2a9 Apricot Line for delicate outlines. Set typography in NeueMontreal or a close free sans-serif substitute, mixing oversized display lettering with light editorial headings and compact body copy. Create a spacious, long-form layout with changing alignments, split features, and selective full-bleed sections. Use organic line illustration, candid team portraits, and documentary media. Keep surfaces mostly flat, buttons rounded, and calls to action direct. Avoid extra colors, generic card grids, and decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Three-part header with stacked wordmark, short introduction, and right-aligned links. | about and contact links, brand orientation | orange wordmark, vertical divider, warm canvas |
| 2 | other | Open two-column composition using large display lettering and supporting vector artwork. | visual brand reveal | orange display type, botanical line illustration |
| 3 | hero | Full-bleed, single-column hero with oversized cropped lettering above illustration. | immediate identity cue | cropped typography, organic line art |
| 4 | other | Centered statement and compact paragraph on a spacious single-column canvas. | mission statement | centered heading, open whitespace |
| 5 | feature-split | Peach section band with text and CTA opposite a media frame. | learn more CTA | split layout, monochrome video, warm media shadow |
| 6 | comparison | Full-width orange band with four-column structure and prominent editorial headings. | contrast agency expectations, circular continue control | white reversed type, illustrated vignettes |
| 7 | other | Short, left-aligned introduction across a broad single-column canvas. | service overview | orange statement, outlined language badge |
| 8 | feature-split | Large stacked service labels on one side and explanatory copy on the other. | service category selection | arrow cue, fine card rules, oversized labels |
| 9 | team | Full-bleed team presentation with a six-column portrait arrangement. | meet the team CTA | orange panel, circular portraits, white button |
| 10 | other | Open two-part interlude on the warm canvas. | breathing-space transition | minimal vector marks, warm background |
| 11 | cta | Left-aligned closing statement with a direct email action. | email contact CTA | large cropped display type, orange pill button |
| 12 | footer | Simple, compact row on a pale peach band. | social navigation, copyright information | small brand mark, compact icons |

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