# Design System: Curious Endeavor

## 1. Visual Theme & Atmosphere

Rigorous and editorial. CE's aesthetic is built on **negative space, typographic authority, and zero decoration**. No gradients, no shadows, no stock imagery. The feeling is closer to a well-designed annual report or architectural journal than a marketing website.

White is not a background — it's the material. Everything sits on it with full confidence. The single accent color (`#cc0000`) functions like a red editorial mark: precise, rare, intentional. When it appears, it means something.

The overall mood: **sharp, considered, professional — with a distinct point of view**.

---

## 2. Color Palette & Roles

| Descriptive Name | Hex | Role |
|---|---|---|
| Signal Red | `#cc0000` | Primary accent — section labels, CTAs, active states. Use sparingly. Never in backgrounds. |
| Near Black | `#1a1a1a` | All primary text. Softer than pure black; intentionally warm. |
| Editorial Grey | `#666666` | Secondary text, subheadings, captions |
| Whisper Grey | `#999999` | Tertiary text, metadata, dates, placeholders |
| Hairline | `#eeeeee` | All borders. One value only — no variations, no `#e5e5e5`. |
| Pure White | `#ffffff` | Background. Always. CE does not use dark mode or dark sections. |

**Rules:**
- No colors outside this set. No blues, no purples, no greens.
- No gradients of any kind.
- Backgrounds are always white.

---

## 3. Typography Rules

**Three fonts only. No substitutions.**

| Font | Role | Weights | Source |
|---|---|---|---|
| Larken | Display, all headings | 400 only | Adobe Typekit `ffj8sbd` |
| Inter | Body, labels, UI, navigation | 300, 400, 500 | Google Fonts |
| JetBrains Mono | Code, data, technical callouts | 400, 500 | Google Fonts |

**Type Scale (7 sizes only):**

| Role | Size | Font | Notes |
|---|---|---|---|
| Display | 48px | Larken 400 | Letter-spacing: -0.02em |
| H1 | 28px | Larken 400 | Letter-spacing: -0.02em |
| H2 | 20px | Larken 400 | Letter-spacing: -0.02em |
| Body | 14px | Inter 400 | Standard reading size |
| Small | 12px | Inter 400 | Captions, meta |
| Label | 10px | Inter 400 | Uppercase, 0.1em tracking — for section tags, categories |
| Data | 40px | Larken 400 | Large numerics, stats, pull quotes |

**Critical rules:**
- Font weight maximum is **500**. No bold (700) anywhere — not in headings, not in CTAs, not in labels.
- Heading letter-spacing: always `-0.02em` (negative, slightly compressed)
- Label letter-spacing: always `0.1em` (positive, slightly spaced)
- Maximum heading size is 48px (Display). Nothing larger.

---

## 4. Component Stylings

**Buttons / CTAs**
- No button-heavy UI. CE uses text-based CTAs or minimal underline links.
- When a button variant is needed: flat, no radius, `--red` accent or simple bordered style.
- No rounded corners beyond 4px max.

**Cards / Containers**
- Sharp-edged or very subtly rounded (max `border-radius: 4px`).
- White background always.
- Bordered with `1px solid #eeeeee` (hairline only — never thicker).
- No shadows. No `box-shadow` of any kind.
- No hover elevation effects.

**Inputs / Forms**
- Hairline border: `1px solid #eeeeee`
- White background.
- Inter 400 at body size (14px).
- No rounded input corners.

**Section Labels**
- Font: Inter 400 or 500
- Size: 10–11px
- Uppercase
- Letter-spacing: 0.1em
- Color: `#cc0000` (Signal Red)
- These act as the visual bookmark — the only consistent use of red in layout.

**Navigation**
- Simple, text-based. No heavy nav bars.
- Bordered sections preferred over floating/sticky.

---

## 5. Layout Principles

**Grid and spacing:**
- Container max-width: `1100px`
- Container padding: `0 40px`
- Section vertical spacing: `40px`
- Max text/content column width: `680px` (for readability)
- Grid classes: `grid-2`, `grid-3`, `grid-4` — use CE's defined grid system

**Whitespace philosophy:**
- Generous, deliberate negative space. CE breathes. Content is never packed.
- Whitespace is the primary tool for creating hierarchy — not size, not color.

**Structural rules:**
- No hero images. No stock photography. CE uses typography-led design.
- No decorative elements, blobs, or abstract shapes.
- No animations longer than 200ms. CE is fast and immediate.
- Transitions, if used: ≤ 200ms, ease or linear — no bounce, no spring.

**Border discipline:**
- `1px solid #eeeeee` only. Never 2px. Never colored borders. Never `#e5e5e5`.

---

## 6. What CE Is Not

Use this list to filter AI-generated output before delivery:

- ❌ Dark backgrounds or dark sections
- ❌ Gradients (any kind)
- ❌ Drop shadows or elevation effects
- ❌ Bold (700) font weight
- ❌ Rounded corners > 4px
- ❌ Colors outside the 6-token palette
- ❌ Stock photography or hero images
- ❌ Emojis as icons
- ❌ Animations > 200ms
- ❌ Border color `#e5e5e5` (must be `#eeeeee`)
- ❌ Borders thicker than 1px
- ❌ Fonts not in the three-font system

---

*Generated from CE brand standards. Source: `work/internal-ce/system-export/styleguide/ce-ui-quality/SKILL.md`*
*Format: Google Stitch DESIGN.md spec — compatible with Claude Code, Cursor, Gemini CLI via MCP.*