---
name: Typewolf
description: "An excellent reference for how to build a sophisticated, typography-first editorial site using a highly restrained color palette and elegant serif fonts."
version: alpha

colors:
  background: "#e6ddde"
  primary: "#2e2c2c"
  secondary: "#443235"
  neutral: "#654a4e"
  bg-soft: "#f8f5f5"
  muted-soft: "#916a70"
  line: "rgba(101, 74, 78, 0.3)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  heading-1:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading-2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: humanist-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 900
    letterSpacing: "-0.4px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A refined editorial platform for discovering and curating modern typography.

*A refined, well-curated library for typography enthusiasts.*

## Colors

Warm, muted earthy palette anchored by deep brownish-ink, using white cards and subtle shadows for layered depth.

- **Background (`#e6ddde`)** — uses `bg` token
- **Primary text (`#2e2c2c`)** — uses `ink` token
- **Secondary text (`#443235`)** — uses `ink-soft` token
- **Muted (`#654a4e`)** — uses `muted` token
- **Borders (`rgba(101, 74, 78, 0.3)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use transitional-serif for all major display and heading text to maintain the refined editorial aesthetic.
- Use humanist-sans for navigation labels, small meta text, and uppercase UI elements.
- Maintain tight negative letter-spacing for large display text and navigation labels.

## Layout

A centered, single-column layout with a prominent header, followed by a responsive 2-column grid of content cards.

*Rhythm:* Consistent spacing based on a 4px grid, providing ample breathing room between sections and within components.

## Elevation & Depth

- rgba(145, 106, 112, 0.15) 0px 6px 24px 0px
- Borders: 1px solid rgba(101, 74, 78, 0.3)

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Typically uppercase humanist-sans text links with bold weight and tight letter-spacing, often separated by horizontal rules.
- **card:** Clean white rectangular cards containing an image at the top and typography/meta information below, elevated by subtle warm shadows.
- **chip:** Simple, uppercase sans-serif text labels separated by a long dash.
- **input:** Not prominently featured, but implied text inputs would follow the minimalist aesthetic.
- **hero:** A large, centered typographic logo in a transitional-serif font on a warm, muted background, paired with a concise tagline.

## Do's and Don'ts

**Don't:**
- Don't use vibrant, high-saturation colors — the palette relies on warm, muted, desaturated earth tones.
- Don't use geometric sans-serif for all text — the primary display font is a transitional serif.
- Don't use heavy drop shadows or 3D effects — elevation is achieved through very subtle, warm box-shadows.
- Don't use a strictly strict, rigid grid — the layout feels editorial and slightly organic despite the underlying structure.
- Don't use uppercase for body copy — uppercase is reserved strictly for small navigation labels and meta tags.
- Don't center all text alignment — while the hero is centered, much of the subsequent content uses left or mixed alignment.

---

## System Prompt (paste into AI agent)

```
This is a refined editorial platform focused on typography curation and discovery. The design DNA is anchored by a warm, muted, desaturated earthy palette, using a soft grayish-pink background and deep brownish-ink for text. The primary typography relies heavily on a transitional serif for elegant display headings, contrasted with a bold humanist sans for uppercase navigation and metadata. White card components with subtle warm shadows create layered depth without harsh borders. Key critical donts: do not use vibrant neon colors, do not use geometric sans-serifs for primary display text, do not use heavy 3D effects, do not use uppercase for body copy, do not create overly dense layouts. The overall aesthetic is sophisticated, quiet, and highly focused on readability and typographic excellence.
```