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

# Odin's Crow · Design System

> Quiet earth tones, bold type, and an unhurried editorial rhythm.

**Theme:** light · **Industry:** other · **Source:** https://www.odins-crow.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._

Odin's Crow presents an investment firm's story through oversized typography, warm neutrals, and restrained graphic rules. The homepage balances expansive editorial moments with concise, structured sections about its approach and portfolio.

## North star

Let oversized near-black typography and precise horizontal rules lead, while warm neutral surfaces keep every section calm and editorial.

## Overview

The visual identity is built around a warm off-white canvas (#f1ede8), near-black typography (#2b2b2b), and muted stone and taupe section surfaces. The opening screen uses an exceptionally large, tightly tracked wordmark as the main visual event; thin rules and stacked dark bands turn the typography into a graphic system rather than decoration. Plain, a measured sans-serif family, supports both oversized display text and compact navigation, with a clear shift from heavy headlines to regular-weight body copy. Layouts are broad and editorial, using generous empty space around the hero and more structured two- and three-column arrangements in explanatory sections. A dark horizontal statement band creates a strong contrast before the warm, subdued content blocks. Imagery is secondary to type and layout, with video and image-led material appearing within the longer page. Keep surfaces flat, use fine dark dividers, and avoid introducing bright colours, gradients, or ornamental effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Crow Ink | `#2b2b2b` | `--color-crow-ink` | brand | Primary wordmark, headlines, body text, navigation, and the bold horizontal statement band. |
| Warm Parchment | `#f1ede8` | `--color-warm-parchment` | brand | Dominant page canvas and background for the spacious hero and most content sections. |
| Soft Stone | `#c9c8c9` | `--color-soft-stone` | surface | Muted section surface; use for quiet content bands rather than prominent calls to action. |
| Oat Paper | `#e5d5c3` | `--color-oat-paper` | surface | Warm neutral section surface that supports the restrained, earth-toned palette. |
| Taupe Linen | `#cdc0b1` | `--color-taupe-linen` | surface | Card and section surface, including the muted warm block visible beneath the hero. |
| Pale Ash | `#dbd7d3` | `--color-pale-ash` | surface | Light grey-beige section surface for subtle tonal variation against the canvas. |
| Graphite Rule | `#525150` | `--color-graphite-rule` | semantic | Dark structural borders and section rules; reinforces the page's graphic linework. |
| Mushroom Haze | `#afa7a2` | `--color-mushroom-haze` | surface | Occasional muted section background; secondary to the main canvas and taupe surfaces. |
| Weathered Charcoal | `#4f4c49` | `--color-weathered-charcoal` | semantic | Secondary dark linework and section details, not a separate accent colour. |
| Sage Slate | `#82887c` | `--color-sage-slate` | accent | Appears on a single 'Close the deal in 60 days' card; treat as a local card surface, not a global accent. |

### Semantic aliases

`--color-canvas` → `#f1ede8` (Warm Parchment) · `--color-surface` → `#c9c8c9` (Soft Stone) · `--color-surface-2` → `#e5d5c3` (Oat Paper) · `--color-surface-3` → `#cdc0b1` (Taupe Linen) · `--color-surface-4` → `#dbd7d3` (Pale Ash) · `--color-text` → `#2b2b2b` (Crow Ink) · `--color-border` → `#525150` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2b2b2b` | `#f1ede8` | 12.15:1 | AAA |
| `#2b2b2b` | `#c9c8c9` | 8.49:1 | AAA |
| `#2b2b2b` | `#e5d5c3` | 9.87:1 | AAA |
| `#2b2b2b` | `#cdc0b1` | 7.94:1 | AAA |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 39px, rgb(43, 43, 43) 0px, rgb(43, 43, 43) 40px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plain | `--font-body` | webfont | 400, 700 | Sole measured typeface for display, headings, body copy, navigation, and captions. | Inter |

- **Plain:** Use bold for display and headings, regular for body and navigation; the main h1 is tightly tracked, while captions are uppercase.

### Type scale — Golden Ratio (ratio ≈ 1.564, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 187px | 700 | 1 | 0 | — | Plain | Oversized opening wordmark and primary typographic statement. |
| h1 | 60px | 700 | 1 | -0.05em | — | Plain | Major section headline, set bold with tight negative tracking. |
| h2 | 42px | 700 | 1 | 0 | — | Plain | Prominent section titles such as 'What we do'. |
| h3 | 36px | 700 | 1.11 | -0.05em | — | Plain | Subsection headings in explanatory and comparison content. |
| h4 | 27px | 700 | 1.5 | -0.05em | — | Plain | Smaller content headings and card titles. |
| body | 20px | 400 | 1.4 | 0 | — | Plain | Main explanatory paragraphs and editorial copy. |
| caption | 10px | 400 | 1.5 | 0 | uppercase | Plain | Compact uppercase labels, dates, and section markers. |
| nav | 16px | 400 | 1.5 | 0 | — | Plain | Header links for Home, About, and Get in touch. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 10, 14, 16, 18, 20, 24, 36, 40, 47, 160 px.
- Section rhythm 36px · element gap — · card padding — · max content width 1400px.

Use a broad editorial canvas, with the measured page max width of 1400px as the desktop content boundary. Keep the header minimal and horizontally distributed, then give the hero substantial open space before the oversized wordmark. Align major content to a consistent edge and use full-width rules or bands as graphic anchors. The page moves from a single-column introduction into two-column explanatory content and three-column comparison or process sections. Maintain comfortable density and clearly separated section rhythms; do not invent fixed card padding or corner radii.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s cubic-bezier(0.4, 0, 0, 1)` on interactive elements.

The design reads as flat: measured cards have square corners, no shadow, and no extra padding values. Separate regions with tonal surface changes and dark hairlines instead of raised panels. The stacked hero rules and solid dark statement band provide the strongest visual layering; keep any imagery integrated into the page rather than floating above it.

## Imagery

Typography and graphic rules dominate the first viewport, while imagery remains secondary within later content. The measured page includes video in the introduction and portfolio area, with image and SVG elements in comparison and process sections. Use restrained, contextual media rather than decorative stock imagery, and let warm neutrals frame it without filters or saturated overlays.

## Components

### Header navigation

Minimal horizontal header on the warm canvas: bold brand wordmark at left, Home and About near the center-right, and an underlined contact link with an outline icon at the far right.

### Oversized wordmark hero

A very large bold 'Odin's Crow' display sits low in a spacious first screen, followed by a fine label-and-date line and multiple near-black horizontal rules.

### Dark statement band

Full-width near-black strip with bold light text, 'Preserving legacies, driving growth,' and a downward arrow aligned to the right.

### Numbered introduction

Warm taupe-toned section begins with a large numeral and pairs the editorial introduction with video or other restrained media.

### Editorial content sections

Explanatory sections use broad whitespace and shift from two-column copy to three-column comparison and process layouts.

### Process cards

A three-column sequence presents response, offer, and closing milestones; one measured card uses #82887c with near-black text.

### Portfolio area

A later three-column portfolio section combines platform names and acquisition status with video-led material and compact graphic elements.

### Measured component styles

- **Link** (“How we're different”): transparent background · text #2b2b2b · radius 0px · padding 0px 0px 2px 0px · 400 20px Plain
- **Card** (“Close the deal in 60 days”): background #82887c · text #2b2b2b · radius 0px · padding 0px · 400 16px Plain
- **Navigation item** (“Odin’s Crow Home About Get in touch”): transparent background · text #2b2b2b · radius 0px · padding 0px · 400 16px Plain

## Do

- Use Warm Parchment (#f1ede8) as the dominant page canvas.
- Make Crow Ink (#2b2b2b) the main text and graphic-rule colour.
- Let oversized bold typography anchor the opening viewport.
- Use warm grey and taupe surfaces to distinguish selected sections.
- Build hierarchy with spacing, columns, and crisp horizontal rules.
- Keep navigation small, restrained, and aligned along one horizontal line.

## Don't

- Don't add bright accent colours absent from the measured palette.
- Don't use gradients or ornamental decorative effects.
- Don't give cards rounded corners or drop shadows.
- Don't make imagery more prominent than the page typography.
- Don't crowd the hero; preserve its expansive empty space.
- Don't treat the single sage card colour as a site-wide accent.

## Agent prompt

Build a new page in the Odin's Crow visual style. Use Warm Parchment (#f1ede8) as the main canvas and Crow Ink (#2b2b2b) for typography, navigation, and graphic rules. Use Plain, or a close sans-serif substitute such as Inter, with bold oversized display headlines and regular-weight body copy. Keep the header sparse and horizontal. Create strong editorial hierarchy through open space, large type, fine dividers, and occasional dark bands; use muted stone and taupe surfaces such as Soft Stone (#c9c8c9) or Taupe Linen (#cdc0b1) for selected sections. Favor broad alignments and simple two- or three-column content layouts. Keep panels flat and square, with no shadows or gradients. Treat media as supporting content, not decoration, and reserve Sage Slate (#82887c) for a small local card use rather than a global accent.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Spacious single-column hero with oversized wordmark, fine metadata line, and stacked horizontal rules. | Downward scroll cue, Brand-first entry | Oversized bold wordmark, Dark stacked rules, Warm canvas |
| 2 | video | Single-column introductory area with a numbered section and video-led content. | Scroll-led storytelling, Media-supported introduction | Large section numeral, Warm muted surface, Embedded video |
| 3 | feature-split | Two-column editorial section pairing a heading and supporting copy. | Concise company overview, Parallel text layout | Bold section heading, Warm neutral canvas, Open column spacing |
| 4 | feature-split | Single-column section with supporting image and small link treatment. | Owner-focused explanation, Contextual text link | Large editorial heading, Subtle image placement, Underlined link |
| 5 | comparison | Three-column comparison area combining concise text, imagery, and graphic marks. | Compare ownership outcomes, Scan columns side by side | Three-column structure, Muted surfaces, SVG graphic details |
| 6 | how-it-works | Three-column process section presenting response, offer, and close milestones. | Three-step timeline, Time-bound milestones | Three-column cards, Muted card surface, Large section heading |
| 7 | product-grid | Three-column portfolio area with platform names, statuses, and video content. | Browse portfolio platforms, Show acquisition status | Three-column grid, Compact status labels, Video-led media |

## Source CSS custom properties (selected)

```css
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
--color1: #c5c6c1;
--color2: #fbd4b7;
--color3: #afa7a2;
--color3-rgb: 175 167 162;
--color4: #82887c;
--color5: #c9c8c9;
--color6: #e5d5c3;
--color7: #cdc0b1;
--color8: #82887c;
```

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