---
name: Odins Crow
description: "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."
version: alpha

colors:
  background: "#F1EDE8"
  primary: "#2B2B2B"
  neutral: "#C9C8C9"
  line: "rgba(43,43,43,0.8)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 187px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-9px"
  display-lg:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-3px"
  display-md:
    fontFamily: grotesque-sans
    fontSize: 41.8px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2.09px"
  body-lg:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.8px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.5px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A stark, editorial agency site using bold typography and a monochrome palette to convey authority and clarity.

*A modern digital manifesto for a consultancy that bridges heritage and future.*

## Colors

High-contrast monochrome with warm neutrals for a sophisticated, editorial feel.

- **Background (`#F1EDE8`)** — uses `bg` token
- **Primary text (`#2B2B2B`)** — uses `ink` token
- **Muted (`#C9C8C9`)** — uses `muted` token
- **Borders (`rgba(43,43,43,0.8)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 4px base grid with generous padding for breathing room.

## Elevation & Depth

- Borders: Thin 1px solid lines using rgba(43,43,43,0.8) for structural dividers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal text-based button with an underline or thin border, no background fill.
- **card:** Not explicitly visible in the screenshot.
- **chip:** Not visible in the screenshot.
- **input:** Not visible in the screenshot.
- **hero:** Full-width section featuring massive typography and a series of horizontal structural lines.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```