---
name: Drawhistory
description: "This site demonstrates a highly restrained, typography-focused editorial design with a professional and impactful tone."
version: alpha

colors:
  background: "#101010"
  primary: "#f2e9e1"
  secondary: "#f2e9e1"
  tertiary: "#ff6714"
  neutral: "#808080"
  bg-soft: "#3d3b31"
  bg-quiet: "#101010"
  muted-soft: "rgba(242, 233, 225, 0.5)"
  line: "rgba(242, 233, 225, 0.4)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 104px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  label:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 8px
  md: 16px
  lg: 16px
  pill: 9999px

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

---

## Overview

A dual-column editorial layout announcing a company merger with contrasting earthy and dark cards.

*A formal yet warm corporate announcement card*

## Colors

High contrast between dark backgrounds and light warm text, with a single vibrant orange accent.

- **Background (`#101010`)** — uses `bg` token
- **Primary text (`#f2e9e1`)** — uses `ink` token
- **Secondary text (`#f2e9e1`)** — uses `ink-soft` token
- **Accent (`#ff6714`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(242, 233, 225, 0.4)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- All caps for buttons and announcement banners
- Tight tracking on large display headings
- Monospace used for uppercase UI labels

## Layout

Two tall cards centered on a dark background, with a full-width top banner

*Rhythm:* Consistent 32px and 24px padding within cards

## Elevation & Depth

- Borders: Subtle light borders separating internal elements

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Text-based buttons with uppercase monospace font and thin borders
- **card:** Full-height dark cards with generous internal padding and rounded corners
- **chip:** Top announcement bar with small orange square indicator
- **input:** None visible in screenshot
- **hero:** Dense editorial announcement section combining text and imagery

## Do's and Don'ts

**Don't:**
- Don't use colorful gradients — screenshot shows flat, solid dark surfaces
- Don't use bold font weights — screenshot shows exclusively regular (400) weight
- Don't use centered text for paragraphs — screenshot shows centered text for all elements
- Don't use bright backgrounds — screenshot shows dark, muted earthy tones
- Don't use complex drop shadows — screenshot shows flat cards with no elevation
- Don't use decorative serif fonts — screenshot shows clean geometric and monospace types

---

## System Prompt (paste into AI agent)

```
This site is a design agency announcement page using a high-contrast, muted palette. The layout features two large, dark cards (dark olive #3d3b31 and charcoal #101010) centered on a dark background. Key colors are #f2e9e1 (text), #101010 (background), and #ff6714 (accent). Typography relies on geometric-sans for display and monospace for labels. Critical donts: never use bold weights (everything is regular), avoid bright or neon colors, and do not use drop shadows for elevation.
```