---
name: Thebrowser Company
description: "This site is an excellent example of rejecting modern SaaS tropes in favor of a refined, literary, and artisanal design language."
version: alpha

colors:
  background: "#EDEEE7"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.85)"
  neutral: "#A0A0A0"
  line: "rgba(0,0,0,0.15)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  caption:
    fontFamily: transitional-serif
    fontSize: 14px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "2.1px"
  micro:
    fontFamily: transitional-serif
    fontSize: 10px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A refined, editorially-driven presentation for developer tools built with literary sensibility.

*A vintage literary gazette meets modern software craftsmanship*

## Colors

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

- **Background (`#EDEEE7`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.85)`)** — uses `ink-soft` token
- **Muted (`#A0A0A0`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.15)`)** — uses `line` token

## Typography

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

- 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

## Layout

Single centered column layout with extreme vertical padding and centered elements

*Rhythm:* Centered vertical rhythm with generous whitespace to emphasize editorial breathing room

## Elevation & Depth

- Borders: 1px solid rgba(0,0,0,0.15)

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Simple text-based buttons with no background, relying on hover transitions
- **card:** Not visible
- **chip:** Not visible
- **input:** Not visible
- **hero:** Centered, symmetrical composition featuring a typographic logo mark and a two-line serif headline

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```