Curious Endeavor
Design Styleguide

Brand identity system and component library. Editorial, premium, human.

Primary Logo

Red wordmark on white or light backgrounds. Use the text-only version — no icon, no lockup variations.

curious endeavor.
curious endeavor.

On dark backgrounds

curious endeavor.

On light backgrounds

Logo uses Larken typeface in brand red (#CC0000). Minimum height: 16px. Clear space: height of the period on all sides.

Positioning

Premium creative consultancy at the intersection of human expertise and AI capability. Market veterans, not tech bros. Substance over hype.

We Are

  • Editorial, not promotional
  • Confident, not loud
  • Premium, not exclusive
  • Technical depth with human warmth
  • Show, don't tell

We Are Not

  • Startup-y or hype-driven
  • Clinical or cold
  • Trendy or disposable
  • Dense or overwhelming
  • Self-congratulatory

Type System

Three fonts working together: a warm serif for headlines, a clean sans for body, and a monospace for technical accents.

Larken
Headlines & Display — Adobe Fonts
Curious Endeavor
Market veterans building the future
Warm, editorial serif. Use for all headlines and display text. Light weight (400). Negative letter-spacing (-0.02em).
Inter
Body & UI — Google Fonts
AI can do extraordinary things. But it needs a driver who's seen it all. Someone who knows what good looks like.
Clean, highly legible sans-serif. Weights: 300 (body), 400 (default), 500 (labels). Generous line-height (1.6–1.7).
JetBrains Mono
Technical & Accents — Google Fonts
Kitt — Gerri — Ogilvy — Tatiana — Anton
Used for agent names, technical labels, code references. Weight 400-500. Signals precision without feeling cold.

Colors

Minimal, editorial palette. Red accent for section labels and emphasis. Black and greys for everything else.

#CC0000
Red — Accent
#1A1A1A
Black — Primary
#666666
Grey — Body Text
#999999
Light — Tertiary
#FFFFFF
White — Background
#FAFAFA
Off-white — Sections
#EEEEEE
Border
#D4A574
Gold — Optional

Spacing System

Generous whitespace. Let content breathe. Sections are clearly separated. Nothing feels cramped.

8px — Tight
16px — Default
24px — Comfortable
48px — Section Gap
80px — Large Section
120px — Section Padding

UI Components

Clean, functional components. Subtle borders. Minimal decoration. State changes are understated.

Section Labels

01 — The Operators

11px, uppercase, 0.1em letter-spacing, red (#cc0000), weight 500. Used to introduce every major section.

Buttons

12px uppercase, 0.08em letter-spacing, 14px vertical / 28px horizontal padding. Primary: black bg, white text. Secondary: transparent with black border.

Cards

Kitt

Strategy & Direction

Gerri

Operations

Ogilvy

Copy

Anton

Quality Control

1px border (#eee), 28px vertical / 20px horizontal padding. Agent names in JetBrains Mono. Hover: border darkens to #999.

Navigation — Primary

Logo: ce-logo-red.png at 24px height. Links: Inter 13px, grey (#666), 28px gap. Sticky with blur backdrop (rgba white 0.96). 20px vertical padding.

Navigation — Burger Menu

For long strategy docs. Collapses to burger with dropdown: Summary, Strategy, Visual, Documentation. Border: 1px #eee, hover: border darkens. 6px radius.

Navigation — Section Grid

For multi-section docs. JetBrains Mono 11px. Grid of 8. Full-cell hover (no rounded corners). Sticky when scrolled to. States: done (black), active (red), pending (grey bg). Border between cells.

Best Practices

Do

  • Use generous whitespace between sections
  • Keep headlines short and punchy
  • Use red sparingly — section labels only
  • Let content breathe with light font weights
  • Use borders subtly (#eee, 1px)
  • Keep navigation minimal
  • Show work, don't describe it

Don't

  • Overuse the red accent color
  • Add unnecessary decoration or gradients
  • Use heavy font weights for body text
  • Crowd elements together
  • Add shadows or 3D effects
  • Use stock photography
  • Write marketing copy — be editorial