Plain+ Design Specification v1.0

Plain+

A design system for interfaces that don't look AI-generated. Premium through restraint, not decoration. The HTML is the design.

Contents

1. Philosophy
2. Decision Tree
3. Design Tokens
4. Typography
5. Color
6. Spacing & Rhythm
7. Components
8. Layout Archetypes
9. The Rules
10. React / JSX Usage
11. Pre-Ship Checklist

1. Philosophy

LLM-generated UIs have developed a recognizable aesthetic: rounded corners, soft gradients, purple-to-blue color ramps, geometric sans-serif fonts, centered card layouts, decorative shadows. These are individually fine choices. Collectively, they're a fingerprint.

Plain+ is a deliberate counter-aesthetic. It starts from the premise that unformatted HTML — a browser's default rendering of semantic markup — already communicates structure clearly. The job of the stylesheet is not to add decoration but to refine what's already there: tune the type, control the measure, establish rhythm, and get out of the way.

The "plus" is the gap between a raw index.html and one that feels like it was set by someone who knows typography. That gap is crossed with:

• A considered type scale (minor third, fluid)
• A serif/sans pairing that creates contrast without decoration
• Warm neutral tones instead of cool digital grays
• Exactly one accent color, used with discipline
• Spatial hierarchy through whitespace and thin rules

Nothing else. No motion. No texture. No visual effects. The premium is in what you don't see.

2. Decision Tree

Use this to decide whether an artifact should use Plain+, the default bold aesthetic, or something custom.

3. Design Tokens

Every value in Plain+ is defined as a CSS custom property. These are the atomic units — nothing else is used.

3.1 Type Scale

Minor third ratio (1.2), fluid between viewport sizes using clamp().

3.2 Color

3.3 Color Swatches

Alternate accents

The accent can be swapped per-artifact. Always muted, always singular.

3.4 Spacing

3.5 Measure

3.6 Font Stacks

4. Typography

4.1 The serif/sans pairing

This is the single most important design decision in Plain+. Body text is set in a serif (Charter by preference) and headings in the system sans-serif. The contrast between the two creates visual hierarchy without any decoration — no size tricks, no color changes, no weight extremes. Just two different voices.

Why this matters as an anti-tell: virtually every LLM-generated UI uses a geometric or grotesque sans for body text (Inter, Roboto, system-ui). Choosing a serif immediately places the output in a different visual category. It reads as editorial, considered, human.

4.2 Heading hierarchy

Note: only h2 gets a bottom rule. This is deliberate — it marks major section boundaries without cluttering sub-sections.

4.3 Special text roles

Lede — the first paragraph after h1. Larger, lighter color. Sets the tone.

This is a lede paragraph. It introduces the page at a larger size and in a softer ink, creating a gentle ramp from the title into the body text.

Caption / label — small, uppercase, tracked. Uses the heading font.

This is a caption or label

Inline emphasis — italic for aside, bold for stress, code for values.

5. Color

5.1 The warmth principle

Plain+ uses warm neutrals throughout. The ink is not pure black (#000) but a very dark warm gray (#1a1a1a). The surface is not pure white (#fff) but a barely perceptible warm off-white (#fdfdfc). The rules are not cool gray but a warm stone tone (#d4d0cb).

This warmth is subtle — most people won't consciously notice it — but it's the difference between "screen" and "paper." It contributes to the sense that a human set this type.

5.2 Accent discipline

The accent color appears in exactly three places maximum:

1. The flourish — the thin colored bar at the top of the page (body::before)
2. Interactive hover states — link underlines, button borders on hover
3. One inline emphasis — optional, for a single word or status that needs to pop

If you find the accent in a fourth place, remove it from somewhere.

5.3 Forbidden colors

6. Spacing & Rhythm

All vertical spacing is a multiple of --space (1.6rem). This creates a consistent visual rhythm down the page. The key spacings:

The asymmetry matters: more space above a heading than below it. This binds the heading to its content rather than floating equidistant between sections.

7. Components

7.1 Button

Square, bordered, uppercase small text. The anti-pill.

Variants

State matrix

7.2 Text Input

State matrix

7.3 Table

No zebra striping. No cell backgrounds. Structure comes from the header weight and thin row rules.

7.4 Notice / Callout

7.5 Tag / Badge

7.6 Link

Links are same-color as body text with a light underline that shifts to the accent on hover. This is intentional — colored links (especially blue ones) would introduce a second color into the palette and break the single-accent rule. The underline alone signals interactivity.

7.7 Code

Inline code has a border and tinted background. Code blocks have the same treatment at block scale:

function greet(name) {
  return `Hello, ${name}.`;
}

// Plain+ code blocks: no syntax highlighting by default.
// If highlighting is needed, use a muted, warm palette —
// not the typical saturated VS Code colors.

7.8 Blockquote

A blockquote is indented with a 2px left rule and set in italic at a lighter ink weight. It's for attributions, asides, and quoted material — not for callouts (use the notice component for those).

8. Layout Archetypes

These are pre-solved layout patterns. When building a Plain+ artifact, pick the closest archetype and adapt it. Don't invent new layout approaches — the system works because it's consistent.

8.1 Document

Single column, centered, --measure width. For articles, specs, documentation, READMEs. This page is an example.

8.2 Sidebar + Content

For settings panels, navigation + detail views, admin layouts. Fixed sidebar width, fluid content.

8.3 Two-Column

For comparisons, side-by-side data, split views. Equal columns.

8.4 Data Table with Controls

Full-width table with filter/search controls above it. Controls are left-aligned, inline.

8.5 Dashboard Grid

For metrics, KPIs, monitoring. Three columns of equal width. No card containers — use thin rules or whitespace to separate cells.

8.6 Form

Single column, narrow (24em max). Labels above inputs. Stacked vertically with --space between fields. Submit button left-aligned below.

9. The Rules

These are non-negotiable. If any of them are broken, the artifact is not Plain+.

10. React / JSX Usage

When building a React artifact with Plain+, inject the design tokens and font stacks via a <style> block inside the component. Then use Tailwind utilities that reference them.

Setup pattern

export default function App() {
  return (
    <>
      <style>{`
        :root {
          --ink: #1a1a1a;
          --ink-light: #555;
          --ink-faint: #999;
          --surface: #fdfdfc;
          --rule: #d4d0cb;
          --accent: #b44;
          --code-bg: #f4f3f1;
          --font-body: "Charter", "Bitstream Charter",
            "Iowan Old Style", "Palatino Linotype",
            "Georgia", serif;
          --font-heading: -apple-system,
            "Helvetica Neue", "Segoe UI", sans-serif;
        }
        @media (prefers-color-scheme: dark) {
          :root {
            --ink: #e8e6e3;
            --ink-light: #aaa;
            --ink-faint: #777;
            --surface: #1a1a19;
            --rule: #333;
            --accent: #d66;
            --code-bg: #242422;
          }
        }
      `}</style>
      <div style={{
        fontFamily: 'var(--font-body)',
        color: 'var(--ink)',
        background: 'var(--surface)',
      }}>
        {/* Content */}
      </div>
    </>
  );
}

Tailwind mapping

11. Pre-Ship Checklist

Before finalizing any Plain+ artifact, verify every item. This is a grep-able list — literally search the CSS/JSX for violations.

Plain+ Design Specification v1.0 — This document is self-demonstrating: every element uses the system it describes.
The source is the specification.