# Thebrowser Company · Design system migration spec

> Source: https://thebrowser.company  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of rejecting modern SaaS tropes in favor of a refined, literary, and artisanal design language.

## 1. Identity DNA

The system begins with the quiet confidence of a literary gazette, where every element is placed with the deliberation of a typographer setting lead type. It is an artisanal approach to developer tools, trading the usual SaaS clamor for a refined, editorial sensibility that treats the interface as a page to be read, not merely a screen to be used.

**One-liner:** A refined, editorially-driven presentation for developer tools built with literary sensibility.
**Keywords:** editorial · artisanal · literary · premium · restrained
**Analogy:** A vintage literary gazette meets modern software craftsmanship

## 2. Color

The palette is a strict two-tone composition, built on the high contrast between a warm off-white ground and deep black text. This is not a color system for decoration, but a tool for editorial clarity, where form and function are defined by luminance alone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EDEEE7` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.85)` | secondary text |
| `--muted` | `#A0A0A0` | placeholder |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** Strict two-tone palette relying on warm off-white and deep black for maximum editorial contrast

The principle is absolute: let the content's inherent contrast provide all the necessary hierarchy, discarding hue as a primary communicative device.

## 3. Typography

Typographic voice is split between a transitional serif for all narrative elements and a geometric mono for functional labels. This pairing establishes a clear hierarchy, distinguishing the literary voice of the headlines and body from the precise, utilitarian voice of the interface.

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** geometric-mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.1 | 400 | -0.5px | hero headline |
| caption | 14px | 1.2 | 400 | 2.1px | navigation and labels |
| micro | 10px | 1.5 | 400 | 0px | body text |

**Type rules:**
- Use transitional serif for all main copy and headlines
- Use geometric mono for all UI labels, navigation, and micro-copy
- Apply uppercase and generous tracking to mono labels

## 4. Spacing

Vertical rhythm is established through centered alignment and generous whitespace, creating a deliberate, editorial pace that guides the eye downward with measured breathing room between sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 75 / 96 px
- **Rhythm:** Centered vertical rhythm with generous whitespace to emphasize editorial breathing room

## 5. Surfaces

Surfaces are defined by absence: there are no drop shadows, no 3D effects, and no heavy graphical overlays. Depth is implied solely through subtle, 1-pixel borders and the strategic use of the warm background color.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid rgba(0,0,0,0.15)

## 6. Layout

The layout skeleton is a single, centered column of content, with extreme vertical padding that frames each section as a distinct typographic composition. All elements are symmetrical and centered, creating a focused, page-like presentation that rejects the multi-panel chaos of typical dashboards.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 1 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single centered column layout with extreme vertical padding and centered elements

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and smoothness, using a standard cubic-bezier curve to handle state changes. Interactive feedback is a gentle shift in color or fill, never a jarring animation, treating transitions as a functional polish rather than a spectacle.

- **Durations:** micro 200ms · small 250ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and fill transitions on interactive elements

- **Hover:** Subtle color shifts or fill changes on interactive elements
- **Click:** Immediate state change
- **Transition:** all 0.25s cubic-bezier(0.4, 0, 0.2, 1)
- **Keyboard:** Standard focus states implied by the clean typography and spacing

## 8. Voice & Don'ts

The editorial voice is artisanal, quiet, and confident—favoring poetic, gently italicized serifs for headlines and understated, monospaced labels for calls to action. This restrained tone is maintained by deliberately avoiding the louder conventions of digital product design.

- **Tone:** Artisanal, quiet, and confident
- **Headline style:** Poetic, serif, and gently italicized for emphasis
- **CTA style:** Understated, monospaced, uppercase labels
- **Avoid:** loud colors / aggressive capitalization in headlines / dense information blocks / heavy graphical overlays / cluttered navigation

### Don'ts
- ❌ don't use bright, saturated background colors — screenshot shows a warm, muted off-white (#EDEEE7)
- ❌ don't use heavy drop shadows or 3D effects — screenshot shows completely flat, borderless surfaces
- ❌ don't use sans-serif fonts for headlines — screenshot shows an italicized transitional-serif headline
- ❌ don't center-align all body copy — screenshot shows a centered layout but implies left-aligned flow for long-form content
- ❌ don't use rounded corners on primary containers — screenshot shows sharp, geometric edges throughout
- ❌ don't use aggressive call-to-action buttons — screenshot shows understated, monospaced text links

The system explicitly rejects bright, saturated colors; heavy shadows; sans-serif headlines; cluttered navigation; and aggressive call-to-action buttons in favor of this pure, typographic expression.

## System Prompt (paste into AI tool)

```
This design serves as a premium, artisanal presentation for developer tools, prioritizing a refined editorial aesthetic over typical SaaS conventions. The palette is strictly two-tone, relying on a warm off-white background (#EDEEE7) and deep black text (rgba(0,0,0,0.85)) to create high contrast with minimal noise. Typography uses a transitional-serif for display and body text, paired with a geometric-mono for UI labels and navigation. The layout is highly symmetrical and centered, utilizing generous whitespace and micro-copy. Critical constraints include: never use saturated or primary colors like blue, do not apply drop shadows or heavy rounded corners, and avoid sans-serif type for any headlines. Maintain a quiet, literary voice throughout all copy and interactions.
```