teaching/viewer/DESIGN.md

The Browser Company — Style Reference

Vintage literary journal

Theme: light

The Browser Company's design system evokes a classic, literary feel through its sparse composition and refined typography. A warm, off-white canvas provides a tranquil backdrop for minimal, precisely placed text elements. The visual identity relies heavily on the nuanced interplay of diverse typefaces, with a primary blue accent reserved for subtle interactive cues.

Tokens — Colors

Name Value Token Role
Parchment #eeeee7 --color-parchment Page backgrounds, large canvas areas — a warm, inviting neutral that feels aged
Midnight Ink #000000 --color-midnight-ink Primary text, borders, iconography, and subtle surface fills — providing sharp contrast against Parchment
Internet Blue #0c50ff --color-internet-blue Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color

Tokens — Typography

EB Garamond — Headlines and emphasis text — a classic serif that establishes a refined, traditional tone. · --font-eb-garamond

IvarText — Body text and less prominent content — a custom serif that contributes to the literary journal aesthetic with its elegant letterforms. · --font-ivartext

ABCDiatypeMono — Monospaced text, navigation links, and functional labels — a custom monospace typeface for a technical, precise counterpoint to the serifs. · --font-abcdiatypemono

Type Scale

Role Size Line Height Letter Spacing Token
body 14px 1.2 1.5px --text-body
heading 28px 1.2 — --text-heading

Tokens — Spacing & Shapes

Base unit: 4px

Density: comfortable

Spacing Scale

Name Value Token
10 10px --spacing-10
12 12px --spacing-12
20 20px --spacing-20
40 40px --spacing-40
50 50px --spacing-50
75 75px --spacing-75

Border Radius

Element Value
buttons 0px
default 0px

Layout

Components

Ghost Button

Role: Interactive element (e.g., navigation links, secondary actions)

Text in Midnight Ink (#000000) on a transparent background, with no border and no discernable padding. Typography uses ABCDiatypeMono at 14px, 0.15em letter-spacing. Interaction is indicated by text color or underline, not a filled background.

Header Branding

Role: Primary brand identity display

Centered 'The Browser Company' logo in Midnight Ink (#000000), using custom icon and typography. It's often flanked by a main headline.

Do's and Don'ts

Do

Don't

Imagery

The site favors an 'icons-only' approach for symbolic elements like browser logos, rendered with a clean, outlined style in Midnight Ink. No photography or complex illustrations are present; the visual focus is entirely on typography and minimal graphic elements. Imagery is sparse, serving primarily as identifiers rather than decorative or explanatory content.

Layout

The page implements a max-width contained layout with centered content. The hero area features a centered branding logo and headline. Sections below maintain consistent vertical spacing, often showcasing a centered stack of textual content and navigation. The overall density is spacious, providing significant breathing room between blocks of information. Navigation is minimal, presented as inline links or a simple ghost button structure.

Agent Prompt Guide

Quick Color Reference

text: #000000 background: #eeeee7 border: #000000 accent: #0c50ff primary action: no distinct CTA color

3-5 Example Component Prompts

  1. Create a page hero section: background Parchment (#eeeee7). Centered logo, followed by a heading 'We're building better ways to use the internet with Dia and Arc.' using EB Garamond 28px #000000 and two ghost buttons 'Dia Browser' and 'Arc Browser' below, using ABCDiatypeMono 14px #000000 with 0.15em letter-spacing.
  2. Create a navigation bar: links 'Company Values', 'Jobs', 'Newsletter', '@browsercompany' using ABCDiatypeMono 14px #000000 with 0.15em letter-spacing, separated by 12px elementGap. Background Parchment (#eeeee7).
  3. Create a footer section: background Parchment (#eeeee7). Text 'COPYRIGHT 2025' in IvarText 9px #000000 on the right, global icon in Midnight Ink (#000000) on the left.

Similar Brands

Quick Start

CSS Custom Properties

:root {
  /* Colors */
  --color-parchment: #eeeee7;
  --color-midnight-ink: #000000;
  --color-internet-blue: #0c50ff;

  /* Typography — Font Families */
  --font-eb-garamond: 'EB Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ivartext: 'IvarText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abcdiatypemono: 'ABCDiatypeMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-body: 14px;
  --leading-body: 1.2;
  --tracking-body: 1.5px;
  --text-heading: 28px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-75: 75px;

  /* Layout */
  --section-gap: 40px;
  --card-padding: 10px;
  --element-gap: 12px;

  /* Named Radii */
  --radius-buttons: 0px;
  --radius-default: 0px;
}

Tailwind v4

@theme {
  /* Colors */
  --color-parchment: #eeeee7;
  --color-midnight-ink: #000000;
  --color-internet-blue: #0c50ff;

  /* Typography */
  --font-eb-garamond: 'EB Garamond', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ivartext: 'IvarText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-abcdiatypemono: 'ABCDiatypeMono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — Scale */
  --text-body: 14px;
  --leading-body: 1.2;
  --tracking-body: 1.5px;
  --text-heading: 28px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-75: 75px;
}