---
version: alpha
name: Visual Journal
description: Reductive modernist editorial — near-black ink on warm off-white paper, a monospace voice for labels and metadata, generous gallery whitespace, hairline rules instead of boxes, and zero decoration. A curation blog that reads like a printed design annual.
colors:
  # Canvas + ink
  background: "#fafafa"
  surface: "#ffffff"
  surface-soft: "#f4f4f4"
  ink: "#111111"
  ink-pure: "#000000"
  ink-secondary: "#555555"
  ink-muted: "#8a8a8a"

  # Accent — restrained, link-only
  primary: "#1a1a1a"
  link: "#111111"
  link-hover: "#000000"

  # Hairlines + dividers
  border: "#e4e4e4"
  border-strong: "#111111"
  divider: "#ebebeb"

  # On-color
  on-primary: "#fafafa"
  on-ink: "#fafafa"

  # Tints
  tag-bg: "#f0f0f0"
  tag-text: "#444444"
  selection-bg: "#111111"
  selection-text: "#fafafa"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.2px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px
  mono-meta:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.6px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    borderColor: "{colors.border-strong}"
  tag:
    backgroundColor: "{colors.tag-bg}"
    textColor: "{colors.tag-text}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"
  card-meta:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.mono-meta}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 10px 12px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 20px 24px
    borderColor: "{colors.border}"
  divider:
    backgroundColor: "{colors.border-strong}"
    height: 1px
    width: 100%
---

# Visual Journal Design System

## Overview

Visual Journal is an independent, ad-free curation blog of reductive and modernist design work — and its own interface is the clearest argument it could make. The page is a warm off-white sheet (`{colors.background}`) carrying near-black ink (`{colors.ink}`), with almost no chrome between you and the work. It behaves less like a website and more like a printed design annual: entries stacked in a clean editorial column, separated by air and hairlines rather than cards, shadows, or color.

The typographic system is deliberately bilingual. A neutral grotesque (mapped here to Inter) carries titles and reading text with tight negative tracking at display sizes, while a monospace voice handles the supporting layer — dates, indices, tags, category labels, and metadata. That mono layer is the brand's signature move: it gives the otherwise silent, gallery-like layout a quiet technical rhythm, like captions printed in a catalog's margin.

Restraint is enforced, not suggested. There is effectively no accent color — links are simply ink, distinguished by weight or an underline on hover. Corners are square or barely rounded; depth comes from spacing and a single 1px rule, never from shadow stacks. Color, when it appears, belongs to the curated work itself, never to the frame around it. The interface gets out of the way so the submitted design work can hold every drop of saturation on the page.

**Key Characteristics:**
- Warm off-white canvas (`{colors.background}`) with near-black ink (`{colors.ink}`) — paper, not screen
- Monospace metadata layer (`{typography.mono-label}`, `{typography.mono-meta}`) for dates, tags, indices, categories
- No accent color — links are ink, depth is whitespace, separation is a hairline rule
- Square corners (`{rounded.none}`) as the default; rounding is the exception
- Hairline borders (`{colors.border}`) and a strong 1px rule (`{colors.border-strong}`) instead of boxes or shadows
- Gallery-grade vertical whitespace (`{spacing.2xl}`–`{spacing.4xl}`) between entries
- Editorial single-column reading rhythm — curation as a journal, not a grid showcase

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, titles, links, the strong divider rule. Near-black, not pure.
- **Paper** (`{colors.background}`): The warm off-white canvas — the dominant surface of the whole site.
- **Surface White** (`{colors.surface}`): Pure white for card/image plates that sit on the paper.
- **True Black** (`{colors.ink-pure}`): Reserved for maximum-contrast moments.

### Secondary Ink
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy de-emphasis, lead-in text.
- **Ink Muted** (`{colors.ink-muted}`): Metadata, captions, timestamps.

### Links
- **Link** (`{colors.link}`): Inline + title links — ink, no color shift.
- **Link Hover** (`{colors.link-hover}`): Deepens to true-adjacent black on hover, often with underline.
- **Primary** (`{colors.primary}`): Solid fill for the rare ink button.

### Hairlines & Dividers
- **Border** (`{colors.border}`): Soft hairline between entries and around plates.
- **Border Strong** (`{colors.border-strong}`): The 1px ink rule — section breaks, button outlines.
- **Divider** (`{colors.divider}`): Faint inner separators within an entry.

### Tints
- **Tag Bg** (`{colors.tag-bg}`): Soft gray chip behind mono tag text.
- **Tag Text** (`{colors.tag-text}`): Muted ink for tag labels.
- **Selection** (`{colors.selection-bg}` / `{colors.selection-text}`): Inverted ink-on-paper text selection.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a neutral grotesque for titles and reading text.
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace` — the metadata and label voice.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Page / masthead title — tight negative tracking |
| `section-heading` | Section titles, featured entry headlines |
| `card-title` | Entry / project titles in the feed |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, buttons, secondary copy |
| `mono-label` | Nav links, category labels, indices |
| `mono-meta` | Dates, tags, byline metadata |
| `caption` | Image captions, fine print |

### Principles
- **Two voices, strict roles**: grotesque sans for titles + reading; monospace for everything that labels, dates, or indexes the work.
- **Negative tracking at display, neutral at body**: titles compress (-1.2px at 44px); body stays at 0.
- **Mono earns its keep**: monospace is never decorative filler — it always carries real metadata (date, category, tag, index).
- **Weight over color for emphasis**: 400 reads, 500 titles, 600 announces. Emphasis comes from weight, never hue.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale opens generous fast — `{spacing.2xl}` (64px) to `{spacing.4xl}` (140px) govern the breathing room between entries.

### Grid & Container
- Narrow editorial column (~720–860px) for reading; wider plates for imagery
- Single-column feed of entries on the homepage — journal, not gallery wall
- Full-width 1px ink rules (`{colors.border-strong}`) mark major breaks
- Metadata sits flush-left in the margin rhythm, set in mono

### Whitespace Philosophy
- **Gallery emptiness**: vertical air (`{spacing.2xl}`–`{spacing.4xl}`) does the separating; cards and shadows are absent.
- **The frame disappears**: chrome is colorless so the curated work owns all the saturation.
- **Rule, don't box**: a single hairline replaces every container outline.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Paper canvas, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Entry separation, image plates |
| Rule (Level 1b) | `1px solid {colors.border-strong}` | Section breaks, button outline |

**Depth Philosophy**: There is no shadow system. Visual Journal builds hierarchy entirely from whitespace, weight, and a single-pixel rule. Depth is editorial, not skeuomorphic — the page reads like ink on paper, where the only "elevation" is the contrast between black type and off-white stock.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, plates, tags, inputs |
| `xs` | 2px | Subtle softening where needed |
| `sm` | 4px | Small interactive elements |
| `md` | 6px | Larger containers, the rare rounded plate |
| `pill` | 9999px | Reserved for tiny status dots only |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Solid ink fill, paper text, square corners. The rare strong CTA.
- **`button-secondary`** — Paper surface with a 1px ink outline (`{colors.border-strong}`), square corners.

### Tags & Metadata
- **`tag`** — Soft gray chip, muted ink, monospace 11px. Square.
- **`card-meta`** — Monospace date/category/index line in muted ink under each entry.

### Cards
- **`card`** — White image plate on paper, separated by a hairline (`{colors.border}`). No shadow, square corners, zero inner padding so the work goes edge-to-edge.

### Inputs
- **`input`** — White surface, 1px ink outline, square corners. Newsletter / submission fields.

### Navigation
- **`nav-bar`** — Paper header, monospace label links, a single hairline at the bottom edge.

### Dividers
- **`divider`** — The 1px ink rule. The primary structural device of the entire layout.

## Do's and Don'ts

### Do
- Keep the canvas warm off-white (`{colors.background}`) with near-black ink (`{colors.ink}`)
- Use monospace for every label, date, tag, and index — it's the brand voice
- Separate entries with whitespace and a single hairline, never with cards or shadows
- Default to square corners (`{rounded.none}`)
- Let the curated work carry all the color; keep the frame achromatic
- Use weight, not hue, for emphasis

### Don't
- Don't introduce an accent color into the chrome — links are ink
- Don't add shadow stacks or elevated cards — depth is whitespace and a rule
- Don't round corners by default — squareness is the identity
- Don't set metadata in the sans font — mono is mandatory for labels
- Don't crowd entries — the gallery air is the design
- Don't use pure black (`{colors.ink-pure}`) for body text — the near-black warmth matters

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced vertical air, full-bleed plates |
| Tablet | 600–1024px | Wider reading column, larger imagery |
| Desktop | 1024–1400px | Centered editorial column with generous margins |
| Large | >1400px | Fixed max width, paper margins expand |

### Touch Targets
- Links and buttons keep comfortable 10px vertical padding
- Mono labels sized up slightly on mobile for tap legibility

### Collapsing Strategy
- Feed stays single-column at every size — only the air compresses
- Hero/masthead title scales down, retaining negative tracking
- Nav: mono links → minimal menu on mobile
- Section spacing: `{spacing.4xl}` → `{spacing.xl}` on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading + body text: Ink `{colors.ink}`
- Metadata: Ink Muted `{colors.ink-muted}`, monospace
- Divider: 1px solid `{colors.border-strong}`
- Hairline: 1px solid `{colors.border}`
- Link: Ink `{colors.link}`, underline on hover

### Example Component Prompts
- "Create an editorial entry on warm off-white (`{colors.background}`). Title 20px Inter weight 500, -0.3px tracking, `{colors.ink}`. Below it a monospace meta line 11px JetBrains Mono `{colors.ink-muted}`: date · category · index. Separate from the next entry with 64px of space and a 1px `{colors.border}` rule. Square corners, no shadow."
- "Build a tag chip: `{colors.tag-bg}` background, `{colors.tag-text}` text, 11px JetBrains Mono, square corners, 3px 8px padding."
- "Design a submission input: white surface, 1px solid `{colors.border-strong}` outline, square corners, 16px Inter. Paired with an ink `button-primary` (solid `{colors.ink}`, paper text, square)."

### Iteration Guide
1. Off-white paper + near-black ink is the foundation — never pure white, never pure black for text
2. Monospace carries all metadata; sans carries titles and reading
3. Separate with whitespace and a single hairline — no cards, no shadows
4. Square corners by default
5. Color belongs to the curated work, not the interface
6. Emphasis is weight, not hue

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Visual Journal. Brand names and trademarks belong to their respective owners.