The Unwash About

# Design brief: the The Unwash About design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/10153720/theunwash-com-aboutus-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10153720/theunwash-com-aboutus-featured.webp
- On DesignMunk: https://designmunk.com/the-unwash-about-page/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# The Unwash: Print-calm Cream Canvas and Split-Serif Headlines

## Overview

An editorial system for mission-driven content: quiet, trustworthy, and print-adjacent. The palette is parchment and ink, with typography doing the hierarchy work. Layout is spacious, copy-first, and free of ornament. When a token is missing, bias toward fewer colors, generous vertical spacing, and serif-led headlines supported by a neutral sans-serif body.

## Colors

- **primary (#000000):** Ink for core text, headlines, and primary CTAs.
- **secondary (#241c24):** A warmer near-black for subtle accents, icons, and subdued links.
- **neutral (#faf7e9):** Parchment canvas for the whole experience; use as the page background.
- **border (#e5e7eb):** Hairline separators for nav, cards, and section dividers.
- **surface (#faf7e9):** Same as neutral; surfaces blend into the page for a print feel.
- **on-surface (#000000):** Text and icon color on neutral/surface backgrounds.

## Typography

- Headline LG — Times New Roman, 70px/1.2, 700: Primary hero lines and main headings. Freely available as a common system font; substitutes: Georgia, Libre Baskerville, PT Serif.
- Headline MD — GT Alpina, 48px/1.5, 400, -0.041em: Used for italicized emphasis within headlines and standfirsts. Proprietary/self-hosted; substitutes with similar warmth: Cormorant Garamond, Lora, Spectral.
- Headline SM — Times New Roman, 33px/1.21, 400: Secondary headings and lead-ins.
- Headline XS — Basetica Bold, 23px/1.22, +0.043em: Eyebrow labels (e.g., "OUR MISSION"), navigation sections, and small caps-style markers. Proprietary/self-hosted; substitutes: Inter Semi Bold, IBM Plex Sans SemiBold, Source Sans 3 SemiBold.
- Body MD — Basetica Regular, 16px/1.5, +0.018em: All paragraph copy, menus, and metadata. Proprietary/self-hosted; substitutes: Inter, IBM Plex Sans, Source Sans 3.
Use true italics for GT Alpina callouts and keep body copy roman. Apply modest tracking from tokens to preserve the editorial texture.

## Layout

Spacing follows a short, readable scale: xs 6px for micro-gaps, sm 16px for paragraph spacing and button padding, md 26px for intra-section grouping, lg 46px for major content gaps, and xl 96px for section breaks. Build sections as single-column editorial blocks with a comfortable reading width; center content and keep lines around a medium measure. Use lg (46px) above and below headlines, md (26px) between subhead and body, and sm (16px) between paragraphs and list items. Grids for link lists and footers can snap to equal columns with sm–md gutters to maintain the calm density.

## Elevation & Depth

No shadows are used (all tokens: none). Hierarchy is created by type scale, contrast (black on cream), and subtle borders (#E5E7EB). Use borders to separate navigation, footers, and cards; otherwise let whitespace carry structure. Avoid overlays and glow effects; prefer tonal changes and weight shifts.

## Shapes

Corners are understated: sm=4px for buttons and inputs, md=8px for cards and larger surfaces. Links are unrounded. Rounded shapes signal interactivity; square edges imply static content and copy blocks.

## Components

Buttons and Card
- Primary Button — 40px height, 8x16px padding, 4px radius, black background, cream text. Use for key CTAs only.
- Secondary Button — 40px height, 8x16px padding, 4px radius, black text on neutral background; add a #E5E7EB border when emphasis is needed.
- Link Button — Text-only action in #63625C; no radius. Pair with inline chevrons.
- Card — Neutral background, black text, 8px radius, 16px padding; rely on border or spacing, not shadow.

### Eyebrow Label
- Typeface: Basetica Bold 23px, +0.043em.
- Case: Uppercase or small-caps styling.
- Color: #000000 on #FAF7E9.
- Spacing: md (26px) below before a headline.

### Mission Hero Block
- H1: Times New Roman 70px/1.2, 700.
- Emphasis line: GT Alpina 48px/1.5, italic allowed, -0.041em.
- Body: Basetica Regular 16px/1.5.
- Section padding: xl (96px) top and bottom.

### Trust Statement Block
- H2: Times New Roman 33px/1.21.
- Emphasis word(s): GT Alpina 48px within the heading for contrast.
- Supporting subheads ("Understanding our Standards", etc.): Basetica Bold 23px.
- Paragraphs: 16px body with sm (16px) spacing.

### Search Bar (Header)
- Container: neutral background with #E5E7EB border.
- Input height: 40px; radius sm (4px) or md (8px); placeholder text in Basetica Regular 16px.
- Icon color: #241C24.

### Reviews Menu Drawer
- Label: Basetica Bold 23px.
- Item list: Basetica Regular 16px with sm (16px) vertical gaps; border top #E5E7EB.

### Social Links Row
- Icons/labels in #63625C; hover to #000000.
- Spacing: sm (16px) between items.

### Footer Columns
- Column headers: Basetica Bold 23px.
- Links: Basetica Regular 16px; sm (16px) line spacing; use #E5E7EB dividers on mobile.

### Newsletter Signup
- Headline: Times New Roman 33px.
- Input: 40px height, 4px radius, #E5E7EB border.
- Submit: Primary button spec.

## Do's and Don'ts

- Do keep backgrounds on #FAF7E9 and text on #000000 for maximum readability.
- Do use GT Alpina within headlines for italicized emphasis; keep body copy in Basetica.
- Do separate sections with xl (96px) padding instead of shadows.
- Don't introduce bright accent colors; links and tertiary text should stay near #241C24 or #63625C.
- Don't exceed md (8px) corner radius on cards; roundness is intentionally restrained.
- Don't mix multiple headline scales in one block; pair 70px + 48px or 33px + 23px as defined.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #000000
- Background: #FAF7E9
- Border: #E5E7EB
- Accent (subtle): #241C24; Link text: #63625C

1) Build the mission hero
- Page background #FAF7E9. Center a block with 96px top/bottom padding.
- Add an eyebrow label in "Basetica Bold", 23px/1.22, letter-spacing 0.043em, color #000000, margin-bottom 26px.
- Add H1 in "Times New Roman", 70px, weight 700, line-height 1.2, color #000000, margin-bottom 16px.
- Add an emphasized line in "GT Alpina" (or Cormorant Garamond if unavailable), 48px/1.5, letter-spacing -0.041em, italic.
- Body paragraph in "Basetica Regular" (or Inter), 16px/1.5, color #000000.

2) Create a trust statement section
- Section padding: 96px top, 96px bottom; background #FAF7E9.
- Heading: "Times New Roman" 33px/1.21, color #000000.
- Emphasis word inside heading: "GT Alpina" 48px italic.
- Subhead ("UNDERSTANDING OUR STANDARDS"): "Basetica Bold" 23px, +0.043em tracking, margin-top 46px.
- Paragraphs: Basetica Regular 16px/1.5 with 16px spacing.

3) Header with search
- Horizontal bar on #FAF7E9 with a 1px #E5E7EB bottom border.
- Left: wordmark; right: search input 40px height, 8px radius, 8px 16px padding, border #E5E7EB, text in Basetica Regular 16px #241C24; placeholder "Start small. Start here."

4) Card list of featured brands
- Each card: background #FAF7E9, 8px radius, 16px padding, 1px #E5E7EB border.
- Title: Times New Roman 33px; meta and links: Basetica Regular 16px #63625C.
- Grid: responsive single column → two columns, 26px gutters.

5) Footer columns
- Container background #FAF7E9; 1px #E5E7EB top border; 96px vertical padding.
- Column headers: Basetica Bold 23px; links: Basetica Regular 16px, spacing 16px.
- Social row: icons in #63625C with hover to #000000, 16px gaps.

## Similar Brands

- Kinfolk — similar print-calm cream backgrounds and serif-first hierarchy; Kinfolk leans even airier with more photographic emphasis.
- Aesop — restrained palette and typographic discipline; Aesop uses warmer browns and tighter grids for commerce.
- The Gentlewoman — strong serif headlines with quiet sans body; more high-contrast photography than The Unwash.
- Monocle — editorial structure and small sans eyebrows; Monocle uses denser layouts and richer accent colors than this pared-back scheme.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #241c24;
  --color-neutral: #faf7e9;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 70px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.5;
  --text-headline-md-tracking: -0.041em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-headline-xs-tracking: 0.043em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.018em;
  --font-times-new-roman: "Times New Roman";
  --font-gt-alpina: "GT Alpina";
  --font-basetica-bold: "Basetica Bold";
  --font-basetica-regular: "Basetica Regular";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 26px;
  --spacing-lg: 46px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: #63625c;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #241c24;
  --color-neutral: #faf7e9;
  --color-border: #e5e7eb;
  --color-surface: #faf7e9;
  --color-on-surface: #000000;
  --font-headline-lg: "Times New Roman";
  --font-headline-md: "GT Alpina";
  --font-headline-sm: "Times New Roman";
  --font-headline-xs: "Basetica Bold";
  --font-body-md: "Basetica Regular";
  --text-headline-lg: 70px;
  --text-headline-md: 48px;
  --text-headline-sm: 33px;
  --text-headline-xs: 23px;
  --text-body-md: 16px;
  --tracking-headline-md: -0.041em;
  --tracking-headline-xs: 0.043em;
  --tracking-body-md: 0.018em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 26px;
  --spacing-lg: 46px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.141,
                    0.11,
                    0.141
                ],
                "hex": "#241c24"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.969,
                    0.914
                ],
                "hex": "#faf7e9"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.969,
                    0.914
                ],
                "hex": "#faf7e9"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 26,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 46,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Times New Roman",
                "fontSize": {
                    "value": 70,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "GT Alpina",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.041,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Times New Roman",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Basetica Bold",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.043,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Basetica Regular",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.018,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as The Unwash About**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

---
version: alpha
name: The Unwash
description: The antidote to greenwashing—radical transparency you can trust.
colors:
  primary: "#000000"
  secondary: "#241c24"
  neutral: "#faf7e9"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Times New Roman
    fontSize: 70px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: GT Alpina
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.041em
  headline-sm:
    fontFamily: Times New Roman
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Basetica Bold
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0.043em
  body-md:
    fontFamily: Basetica Regular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.018em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 6px
  sm: 16px
  md: 26px
  lg: 46px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "#63625c"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# The Unwash: Print-calm Cream Canvas and Split-Serif Headlines

## Overview

An editorial system for mission-driven content: quiet, trustworthy, and print-adjacent. The palette is parchment and ink, with typography doing the hierarchy work. Layout is spacious, copy-first, and free of ornament. When a token is missing, bias toward fewer colors, generous vertical spacing, and serif-led headlines supported by a neutral sans-serif body.

## Colors

- **primary (#000000):** Ink for core text, headlines, and primary CTAs.
- **secondary (#241c24):** A warmer near-black for subtle accents, icons, and subdued links.
- **neutral (#faf7e9):** Parchment canvas for the whole experience; use as the page background.
- **border (#e5e7eb):** Hairline separators for nav, cards, and section dividers.
- **surface (#faf7e9):** Same as neutral; surfaces blend into the page for a print feel.
- **on-surface (#000000):** Text and icon color on neutral/surface backgrounds.

## Typography

- Headline LG — Times New Roman, 70px/1.2, 700: Primary hero lines and main headings. Freely available as a common system font; substitutes: Georgia, Libre Baskerville, PT Serif.
- Headline MD — GT Alpina, 48px/1.5, 400, -0.041em: Used for italicized emphasis within headlines and standfirsts. Proprietary/self-hosted; substitutes with similar warmth: Cormorant Garamond, Lora, Spectral.
- Headline SM — Times New Roman, 33px/1.21, 400: Secondary headings and lead-ins.
- Headline XS — Basetica Bold, 23px/1.22, +0.043em: Eyebrow labels (e.g., "OUR MISSION"), navigation sections, and small caps-style markers. Proprietary/self-hosted; substitutes: Inter Semi Bold, IBM Plex Sans SemiBold, Source Sans 3 SemiBold.
- Body MD — Basetica Regular, 16px/1.5, +0.018em: All paragraph copy, menus, and metadata. Proprietary/self-hosted; substitutes: Inter, IBM Plex Sans, Source Sans 3.
Use true italics for GT Alpina callouts and keep body copy roman. Apply modest tracking from tokens to preserve the editorial texture.

## Layout

Spacing follows a short, readable scale: xs 6px for micro-gaps, sm 16px for paragraph spacing and button padding, md 26px for intra-section grouping, lg 46px for major content gaps, and xl 96px for section breaks. Build sections as single-column editorial blocks with a comfortable reading width; center content and keep lines around a medium measure. Use lg (46px) above and below headlines, md (26px) between subhead and body, and sm (16px) between paragraphs and list items. Grids for link lists and footers can snap to equal columns with sm–md gutters to maintain the calm density.

## Elevation & Depth

No shadows are used (all tokens: none). Hierarchy is created by type scale, contrast (black on cream), and subtle borders (#E5E7EB). Use borders to separate navigation, footers, and cards; otherwise let whitespace carry structure. Avoid overlays and glow effects; prefer tonal changes and weight shifts.

## Shapes

Corners are understated: sm=4px for buttons and inputs, md=8px for cards and larger surfaces. Links are unrounded. Rounded shapes signal interactivity; square edges imply static content and copy blocks.

## Components

Buttons and Card
- Primary Button — 40px height, 8x16px padding, 4px radius, black background, cream text. Use for key CTAs only.
- Secondary Button — 40px height, 8x16px padding, 4px radius, black text on neutral background; add a #E5E7EB border when emphasis is needed.
- Link Button — Text-only action in #63625C; no radius. Pair with inline chevrons.
- Card — Neutral background, black text, 8px radius, 16px padding; rely on border or spacing, not shadow.

### Eyebrow Label
- Typeface: Basetica Bold 23px, +0.043em.
- Case: Uppercase or small-caps styling.
- Color: #000000 on #FAF7E9.
- Spacing: md (26px) below before a headline.

### Mission Hero Block
- H1: Times New Roman 70px/1.2, 700.
- Emphasis line: GT Alpina 48px/1.5, italic allowed, -0.041em.
- Body: Basetica Regular 16px/1.5.
- Section padding: xl (96px) top and bottom.

### Trust Statement Block
- H2: Times New Roman 33px/1.21.
- Emphasis word(s): GT Alpina 48px within the heading for contrast.
- Supporting subheads ("Understanding our Standards", etc.): Basetica Bold 23px.
- Paragraphs: 16px body with sm (16px) spacing.

### Search Bar (Header)
- Container: neutral background with #E5E7EB border.
- Input height: 40px; radius sm (4px) or md (8px); placeholder text in Basetica Regular 16px.
- Icon color: #241C24.

### Reviews Menu Drawer
- Label: Basetica Bold 23px.
- Item list: Basetica Regular 16px with sm (16px) vertical gaps; border top #E5E7EB.

### Social Links Row
- Icons/labels in #63625C; hover to #000000.
- Spacing: sm (16px) between items.

### Footer Columns
- Column headers: Basetica Bold 23px.
- Links: Basetica Regular 16px; sm (16px) line spacing; use #E5E7EB dividers on mobile.

### Newsletter Signup
- Headline: Times New Roman 33px.
- Input: 40px height, 4px radius, #E5E7EB border.
- Submit: Primary button spec.

## Do's and Don'ts

- Do keep backgrounds on #FAF7E9 and text on #000000 for maximum readability.
- Do use GT Alpina within headlines for italicized emphasis; keep body copy in Basetica.
- Do separate sections with xl (96px) padding instead of shadows.
- Don't introduce bright accent colors; links and tertiary text should stay near #241C24 or #63625C.
- Don't exceed md (8px) corner radius on cards; roundness is intentionally restrained.
- Don't mix multiple headline scales in one block; pair 70px + 48px or 33px + 23px as defined.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #000000
- Background: #FAF7E9
- Border: #E5E7EB
- Accent (subtle): #241C24; Link text: #63625C

1) Build the mission hero
- Page background #FAF7E9. Center a block with 96px top/bottom padding.
- Add an eyebrow label in "Basetica Bold", 23px/1.22, letter-spacing 0.043em, color #000000, margin-bottom 26px.
- Add H1 in "Times New Roman", 70px, weight 700, line-height 1.2, color #000000, margin-bottom 16px.
- Add an emphasized line in "GT Alpina" (or Cormorant Garamond if unavailable), 48px/1.5, letter-spacing -0.041em, italic.
- Body paragraph in "Basetica Regular" (or Inter), 16px/1.5, color #000000.

2) Create a trust statement section
- Section padding: 96px top, 96px bottom; background #FAF7E9.
- Heading: "Times New Roman" 33px/1.21, color #000000.
- Emphasis word inside heading: "GT Alpina" 48px italic.
- Subhead ("UNDERSTANDING OUR STANDARDS"): "Basetica Bold" 23px, +0.043em tracking, margin-top 46px.
- Paragraphs: Basetica Regular 16px/1.5 with 16px spacing.

3) Header with search
- Horizontal bar on #FAF7E9 with a 1px #E5E7EB bottom border.
- Left: wordmark; right: search input 40px height, 8px radius, 8px 16px padding, border #E5E7EB, text in Basetica Regular 16px #241C24; placeholder "Start small. Start here."

4) Card list of featured brands
- Each card: background #FAF7E9, 8px radius, 16px padding, 1px #E5E7EB border.
- Title: Times New Roman 33px; meta and links: Basetica Regular 16px #63625C.
- Grid: responsive single column → two columns, 26px gutters.

5) Footer columns
- Container background #FAF7E9; 1px #E5E7EB top border; 96px vertical padding.
- Column headers: Basetica Bold 23px; links: Basetica Regular 16px, spacing 16px.
- Social row: icons in #63625C with hover to #000000, 16px gaps.

## Similar Brands

- Kinfolk — similar print-calm cream backgrounds and serif-first hierarchy; Kinfolk leans even airier with more photographic emphasis.
- Aesop — restrained palette and typographic discipline; Aesop uses warmer browns and tighter grids for commerce.
- The Gentlewoman — strong serif headlines with quiet sans body; more high-contrast photography than The Unwash.
- Monocle — editorial structure and small sans eyebrows; Monocle uses denser layouts and richer accent colors than this pared-back scheme.

:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #241c24;
  --color-neutral: #faf7e9;
  --color-border: #e5e7eb;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 70px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.2;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.5;
  --text-headline-md-tracking: -0.041em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-headline-xs-tracking: 0.043em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.018em;
  --font-times-new-roman: "Times New Roman";
  --font-gt-alpina: "GT Alpina";
  --font-basetica-bold: "Basetica Bold";
  --font-basetica-regular: "Basetica Regular";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 26px;
  --spacing-lg: 46px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: #63625c;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "The antidote to greenwashing—radical transparency you can trust.",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.141,
          0.11,
          0.141
        ],
        "hex": "#241c24"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.969,
          0.914
        ],
        "hex": "#faf7e9"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.898,
          0.906,
          0.922
        ],
        "hex": "#e5e7eb"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.98,
          0.969,
          0.914
        ],
        "hex": "#faf7e9"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0,
          0
        ],
        "hex": "#000000"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 46,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 96,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 8,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Times New Roman",
        "fontSize": {
          "value": 70,
          "unit": "px"
        },
        "fontWeight": 700
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "GT Alpina",
        "fontSize": {
          "value": 48,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.041,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Times New Roman",
        "fontSize": {
          "value": 33,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Basetica Bold",
        "fontSize": {
          "value": 23,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.043,
          "unit": "em"
        }
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Basetica Regular",
        "fontSize": {
          "value": 16,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": 0.018,
          "unit": "em"
        }
      }
    }
  }
}

@theme {
  --color-primary: #000000;
  --color-secondary: #241c24;
  --color-neutral: #faf7e9;
  --color-border: #e5e7eb;
  --color-surface: #faf7e9;
  --color-on-surface: #000000;
  --font-headline-lg: "Times New Roman";
  --font-headline-md: "GT Alpina";
  --font-headline-sm: "Times New Roman";
  --font-headline-xs: "Basetica Bold";
  --font-body-md: "Basetica Regular";
  --text-headline-lg: 70px;
  --text-headline-md: 48px;
  --text-headline-sm: 33px;
  --text-headline-xs: 23px;
  --text-body-md: 16px;
  --tracking-headline-md: -0.041em;
  --tracking-headline-xs: 0.043em;
  --tracking-body-md: 0.018em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 26px;
  --spacing-lg: 46px;
  --spacing-xl: 96px;
}