# Firstandforemost · Design system migration spec

> Source: https://firstandforemost.co  ·  Curated by OpenDesign  ·  en

> This site is a great example of using a single, high-chroma color and massive typography to create a strong, memorable brand identity without visual clutter.

## 1. Identity DNA

The First and Foremost design system is built on a single, declarative gesture: the massive, bold typeface. Like a broadsheet newspaper headline or a hand-painted sign, this typographic weight anchors the entire identity, creating an immediate sense of impact and responsibility.

**One-liner:** A branding agency website that balances massive, impactful typography with warm, earthy tones and organic illustrations.
**Keywords:** Bold · Earthy · Responsible · Collective · Branding
**Analogy:** A modern editorial layout for a design agency that values impact and nature.

## 2. Color

The color system is rigorously minimal, operating as a strict two-tone dialogue between a warm off-white ground and a single, vibrant orange. Every element of text and graphic detail lives within this high-contrast relationship, creating immediate visual clarity and a natural, earthy warmth.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF7F1` | main background |
| `--ink` | `#FF4501` | body text |
| `--line` | `rgba(255,69,1,1.0)` | divider |

**Color principle:** A restrained, high-contrast palette using a single vibrant orange as the primary foreground color over a warm, soft off-white background, creating a natural and impactful look.

This constraint is the system's core principle: chromatic unity over decorative variety.

## 3. Typography

Type is not mere container for content but the primary visual element, deployed in a humanist sans-serif category for its balanced warmth and clarity. Its voice is intentionally massive and declarative, scaling from viewport-spanning hero statements down to functional paragraphs.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 0.8 | 900 | -1px | Massive hero typography |
| heading | 80px | 1.0 | 700 | -0.5px | Section headings |
| title | 36px | 1.2 | 400 | 0px | Large descriptive text |
| body | 16px | 2.0 | 400 | 0px | Paragraphs and navigation |

## 4. Spacing

The rhythm is defined by contrast: expansive, 160px vertical buffers separate major sections, creating a deliberate pause, while spacing within content blocks remains tight and functional.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding (160px) separates major sections, with tight internal spacing.

## 5. Surfaces

Surface treatment is deliberate and restrained, relying on a single, large offset shadow to suggest depth for key elements. Borders, where used, are a thin, structural 1px line in the primary orange, acting more as precise outlines than decorative frames.

- **Radius:** sm 0px · md 8px · lg 80px · pill 999px
- **Shadows:**
  - rgba(153, 18, 2, 0.36) -32px 32px 80px 0px
- **Borders:** 1px solid rgba(255,69,1,1.0) for outlines and separators.

## 6. Layout

The structural skeleton is a disciplined single-column layout that channels focus downward. This vertical flow is deliberately broken by a full-width, hero section where massive typography overflows conventional boundaries, asserting the system's bold editorial posture.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single-column layout with a sticky header and full-width hero.

## 7. Motion & Interaction

Motion philosophy follows the principle of substantive, not decorative, transition. Animations are slow and deliberate (0.5s to 1s), using simple opacity fades and vertical transforms to guide focus during load-in sequences without introducing complexity.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - opacity transitions (1s)
  - transform (0.5s ease-in-out)

- **Hover:** Cursor changes to pointer on interactive elements; subtle opacity transitions.
- **Click:** Standard pointer interaction.
- **Transition:** All properties with a 1s opacity transition for load-in effects.
- **Keyboard:** Standard keyboard navigation.

## 8. Voice & Don'ts

The editorial voice is direct and mission-driven, matching the typographic boldness with clear, unadorned language. Headlines are declarative statements, while calls to action are deliberately understated, often rendered as simple text links to maintain the clean, open composition.

- **Tone:** Direct, professional, and mission-driven.
- **Headline style:** Massive, bold, and declarative.
- **CTA style:** Minimal and understated, using simple text links.
- **Avoid:** Corporate jargon / Aggressive sales language / Dark mode

### Don'ts
- ❌ Don't use multiple competing colors — the palette is strictly orange and off-white.
- ❌ Don't use thin, delicate typography — the design relies on heavy, bold weights.
- ❌ Don't use standard grid layouts for everything — the hero breaks the grid with massive type.
- ❌ Don't use dark backgrounds — the site is strictly light with warm tones.
- ❌ Don't use complex, busy UI components — the design is minimal and open.
- ❌ Don't use small, cramped spacing — the layout uses generous whitespace and padding.

The system consciously rejects dark mode, competing color palettes, and complex UI components, favoring instead the purity of its core constraints.

## System Prompt (paste into AI tool)

```
This website is for a branding agency called First and Foremost. It features a warm, off-white background (#FFF7F1) and a single, dominant vibrant orange (#FF4501) for all text and illustrations. The typography is a humanist sans-serif used at a massive scale, with the hero text reaching 200px. The layout is minimal and editorial, with generous padding between sections and a full-width hero. Key critical don'ts include: never use dark backgrounds, never use multiple competing colors, and never use thin, delicate typography. The overall feel is earthy, bold, and responsible.
```