# Odins Crow · Design system migration spec

> Source: https://odins-crow.com  ·  Curated by OpenDesign  ·  en

> The site is a strong example of modern editorial design for a professional services brand, using bold typography and a restrained palette to convey authority.

## 1. Identity DNA

The design system for Odins Crow operates as a modern digital manifesto, treating the agency's digital presence with the gravity of a printed broadsheet. Its architecture is defined by preservation and growth, using stark typographic weight and a disciplined palette to convey strategic legacy.

**One-liner:** A stark, editorial agency site using bold typography and a monochrome palette to convey authority and clarity.
**Keywords:** preservation · growth · legacy · strategic · bold
**Analogy:** A modern digital manifesto for a consultancy that bridges heritage and future.

## 2. Color

The color system is a warm, high-contrast monochrome centered on off-white and deep charcoal. It rejects vibrant accents in favor of a sophisticated, editorial contrast that places all emphasis on content and structure.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1EDE8` | main background |
| `--ink` | `#2B2B2B` | body text |
| `--muted` | `#C9C8C9` | placeholder |
| `--line` | `rgba(43,43,43,0.8)` | divider |

**Color principle:** High-contrast monochrome with warm neutrals for a sophisticated, editorial feel.

The principle is absolute restraint, using the full spectrum between two values to create clarity and authority.

## 3. Typography

Typography is the system's most assertive element, employing a bold, tightly tracked grotesque sans-serif for maximum visual impact. It maintains a strict monochrome hierarchy, using transformation and scale to differentiate voice from supporting detail.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 187px | 1.0 | 700 | -9px | Main hero headline |
| display-lg | 60px | 1.0 | 700 | -3px | Section headline |
| display-md | 41.8px | 1.0 | 700 | -2.09px | Subheadline |
| body-lg | 20px | 1.5 | 400 | -0.8px | Large body text |
| body | 16px | 1.5 | 400 | -0.5px | Standard body text |
| caption | 10px | 1.5 | 400 | 0px | Small captions and labels |

**Type rules:**
- Use tight negative letter-spacing for all display sizes.
- Maintain a strict monochrome type hierarchy.
- Apply uppercase transformation to small labels and captions.

## 4. Spacing

A strict 4px base grid establishes a predictable rhythm, with generous padding applied to create essential breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid with generous padding for breathing room.

## 5. Surfaces

Surfaces are intentionally flat and clean, defined by structural dividers rather than depth or shadow. Thin, 1px solid lines in a semi-transparent charcoal provide the primary means of visual separation and hierarchy.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Thin 1px solid lines using rgba(43,43,43,0.8) for structural dividers.

## 6. Layout

The layout skeleton is a single-column, full-width composition anchored by centered content. Structural horizontal lines become key graphic elements, framing massive typography in the hero and dividing sections with graphic precision.

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

**Skeleton:** Single-column centered layout with full-width structural elements like horizontal lines.

## 7. Motion & Interaction

Motion is subtle and purposeful, governed by a philosophy of smooth, consistent easing. Transitions use cubic-bezier curves to provide precise, immediate feedback without decorative flourish.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0, 1)`
- **Patterns:**
  - Subtle fade and transform transitions for content appearance.

- **Hover:** Subtle color shifts or transforms on interactive elements.
- **Click:** Immediate visual feedback.
- **Transition:** Smooth cubic-bezier transitions for all interactive state changes.
- **Keyboard:** Standard focusable element outlines.

## 8. Voice & Don'ts

The editorial voice is authoritative, concise, and forward-looking. It favors short, punchy phrases in massive typography and direct calls to action, avoiding overly casual language and excessive decoration.

- **Tone:** Authoritative, concise, and forward-looking.
- **Headline style:** Short, punchy phrases in massive, tight-spaced typography.
- **CTA style:** Direct and action-oriented, e.g., 'Get in touch'.
- **Avoid:** Overly casual language / Excessive decoration / Cluttered layouts

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use decorative serifs — screenshot shows a clean, bold grotesque sans.
- ❌ Don't use wide letter-spacing — screenshot shows tightly tracked display text.
- ❌ Don't use heavy drop shadows — screenshot shows flat, clean surfaces.
- ❌ Don't use centered alignment for everything — screenshot shows left-aligned text with a structured, full-width hero.
- ❌ Don't use rounded corners extensively — screenshot shows mostly sharp, rectangular shapes.

The system deliberately does not accommodate vibrant accents, decorative serifs, or wide letter-spacing, maintaining its rigorous, monospaced clarity.

## System Prompt (paste into AI tool)

```
This site is for a strategic consultancy or agency, positioning itself with bold, editorial confidence. The primary colors are a warm off-white (#F1EDE8) and a deep charcoal (#2B2B2B). Typography is centered around a bold, tightly tracked grotesque sans-serif for headlines, creating a strong visual impact. The layout is clean and structured, using full-width horizontal lines as a key design element. Critical donts: do not use bright accent colors, do not use decorative or serif fonts, and do not use wide letter-spacing on display text. The overall aesthetic is minimalist and refined, focusing on clarity and authority.
```