minimal · modern · premium · grid · saas

Null Grid.

An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design.

01 · Preview

The kitchen sink.

Null.app

ProductPricingDocsAbout

Sign inGet started

minimal · modern · premium

Build with Null Grid.

A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#0A0A0A

secondary

#737373

tertiary

#0A0A0A

neutral

#F0F0F0

surface

#FFFFFF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

0px

md

0px

lg

0px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

1---
2name: "Null Grid"
3description: "An ultra-minimal restraint exercise. Pure white surfaces, every layout snapped to a strict 12-column grid with a 4px baseline, Inter at three sizes for the entire system, sharp 0px corners, and one vermilion accent reserved for exactly one moment per page. Built for product pages, design portfolios, and brand surfaces where the discipline of the grid IS the design."
4tags: [minimal, modern, premium, grid, saas]
5colors:
6  primary:   "#0a0a0a"
7  secondary: "#737373"
8  tertiary:  "#0a0a0a"
9  neutral:   "#f0f0f0"
10  surface:   "#ffffff"
11typography:
12  display: Inter
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 1 / 500 / -0.035em"
17    h1:   "3rem / 1.1 / 500 / -0.025em"
18    h2:   "1.5rem / 1.25 / 500 / -0.012em"
19    body: "0.9375rem / 1.6 / 400 / 0"
20radius:
21  sm: 0px
22  md: 0px
23  lg: 0px
24  pill: 9999px
25shadows:
26  card:   none
27  button: none
28borders:
29  card:    "1px solid rgba(10,10,10,0.10)"
30  divider: rgba(10,10,10,0.10)
31buttons:
32  primary:
33    background: #0a0a0a
34    color: #ffffff
35    border: none
36    shape: sharp
37    padding: 10px 20px
38    font: 500 / 0.8125rem
39  secondary:
40    background: transparent
41    color: #0a0a0a
42    border: 1px solid #0a0a0a
43    shape: sharp
44    padding: 10px 20px
45    font: 500 / 0.8125rem
46  outline:
47    background: transparent
48    color: #0a0a0a
49    border: 1px solid rgba(10,10,10,0.16)
50    shape: sharp
51    padding: 10px 20px
52    font: 500 / 0.8125rem
53  ghost:
54    background: transparent
55    color: #737373
56    border: none
57    shape: sharp
58    padding: 10px 14px
59    font: 500 / 0.8125rem
60charts:
61  variant: "thin-bars"
62  stroke_width: 1
63  fill_opacity: 0
64  gridlines: false
65  bar_gap: 4px
66  highlight: single
67  dot_marker: false
68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
69dependencies: ["lucide-react"]
70---
71 
72# Null Grid
73 
74## AI Build Instructions
75 
76> **Read this section before writing any code.** The rules below
77> are non-negotiable. Every value used in the UI must come from this
78> file's frontmatter — never substitute, approximate, or invent new
79> colors, fonts, radii, or shadows. If a value is missing, ask the
80> user before adding one.
81 
82### 1 · Your role
83 
84You are building UI for a project that has adopted **Null Grid** as its
85design system. Treat `DESIGN.md` as the single source of truth.
86Your job is to translate the user's product requirements into
87components and pages that look like they were designed by the same
88person who authored this file.
89 
90### 2 · Token compliance
91 
92- Pull every color, font family, radius, shadow, and spacing value
93  from the frontmatter at the top of this file.
94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
95  hard-code hex values that bypass the system.
96- When a token can be expressed as a CSS variable, declare it once
97  in your global stylesheet and reference it everywhere downstream.
98- The Google Fonts `<link>` is provided in the Typography section.
99  Add it to `<head>` before any component renders.
100 
101### 3 · Component recipes
102 
103Use these recipes verbatim when building the corresponding component.
104 
105#### Buttons
106 
107Four variants are defined. Pick one — never blend variants or invent a fifth.
108 
109- **Primary** — sharp shape, bg `#0a0a0a`, text `#ffffff`, padding `10px 20px`, weight `500`.
110- **Secondary** — sharp shape, text `#0a0a0a`, border `1px solid #0a0a0a`, padding `10px 20px`, weight `500`.
111- **Outline** — sharp shape, text `#0a0a0a`, border `1px solid rgba(10,10,10,0.16)`, padding `10px 20px`, weight `500`.
112- **Ghost** — sharp shape, text `#737373`, padding `10px 14px`, weight `500`.
113 
114Reach for **primary** as the single dominant CTA per screen.
115**Secondary** for the supporting action. **Outline** for tertiary
116actions in toolbars. **Ghost** for inline links and table actions.
117 
118#### Cards
119 
120- Background: `#ffffff`
121- Border: `1px solid rgba(10,10,10,0.10)`
122- Shadow: `none`
123- Radius: `radius.lg` (`0px`)
124- Internal padding: `20px` for compact cards, `24–28px` for content cards.
125 
126#### Tabs
127 
128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.
129 
130#### Charts
131 
132- Bar/line variant: `thin-bars`
133- No gridlines — let the bars/lines carry the data.
134- Highlight strategy: `single` — emphasize a single bar/point per chart.
135 
136#### Typography pairings
137 
138- **Display (`Inter`)** — h1, h2, hero headlines, brand wordmarks.
139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
141 
142### 4 · Hard constraints
143 
144Never do any of the following without explicit instruction from the user:
145 
146- Introduce a new color, font, radius, or shadow that isn't declared above.
147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
151 
152### 5 · Before you finish — verify
153 
154Run through this checklist for every screen you produce:
155 
156- [ ] Every color used appears in the Colors table above.
157- [ ] Headlines use the display font; body copy uses the body font.
158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
160- [ ] Cards and dividers use the declared border + shadow tokens.
161- [ ] No values were invented; if you needed something missing, you stopped and asked.
162 
163---
164 
165## 1. Atmosphere
166 
167Null Grid is an ultra-minimal restraint exercise. The page surface is pure white `#ffffff` — never off-white, never warm. Every layout is snapped to a strict 12-column grid with a 4px baseline. Inter handles everything: hero at 88px, body at 15px, UI labels at 13px — three sizes, two weights (400/500), one font. Sharp 0px corners on every surface and every button — there are no radii in this system except the badge pill. The single accent is vermilion `#e8482c` that appears exactly once per page — usually as the active step number in a process, the live indicator dot, or the primary CTA.
168 
169The discipline is absolute: the page must justify every element on the grid. If a piece of UI does not snap to a column boundary, it does not belong. The vermilion is not for decoration — it is for the single moment the page wants the user's eye.
170 
171**Signature moves**
172- Strict 12-column grid with 4px baseline — every element snaps to a column boundary
173- Pure white surface `#ffffff` — never off-white, never warm
174- Inter only — three sizes (88/24/15), two weights (400/500)
175- Vermilion `#e8482c` exactly once per page — the single moment the eye should land
176- Sharp 0px corners on every surface and button — Swiss-restraint precision
177- 1px hairlines at 10% ink as the only divider treatment
178 
179## 2. Palette (the entire system)
180 
181- **Page** `#ffffff` — pure white
182- **Page Lift** `#f0f0f0` — secondary tonal step (rare, used only for code blocks)
183- **Ink** `#0a0a0a` — text, headings, primary CTA fill (true near-black)
184- **Ink 50** `#737373` — secondary text
185- **Hairline** `rgba(10,10,10,0.10)` — every divider, every border
186- **Vermilion** `#e8482c` — exactly one moment per page
187 
188Six values, total. That is the entire system.
189 
190## 3. Typography
191 
192| Role | Font | Size | Weight | Leading | Tracking |
193|------|------|------|--------|---------|----------|
194| Hero | Inter | 88px | 500 | 1.0 | -0.035em |
195| H1 | Inter | 48px | 500 | 1.1 | -0.025em |
196| H2 | Inter | 24px | 500 | 1.25 | -0.012em |
197| Body | Inter | 15px | 400 | 1.6 | 0 |
198| UI / Button | Inter | 13px | 500 | 1.4 | 0 |
199| Caption | JetBrains Mono | 11px | 500 | 1.0 | 0.06em uppercase |
200| Number | JetBrains Mono | 13px | 500 | 1.0 | 0 tabular-nums |
201 
202Three Inter sizes (88/24/15), two weights (400/500). Mono only for captions and figures. There is no italic, no underline, no decoration — emphasis is achieved through column placement and white space.
203 
204## 4. Buttons
205 
206### Primary (Ink Sharp)
207```css
208background: #0a0a0a;
209color: #ffffff;
210padding: 10px 20px;
211border-radius: 0px;
212font-weight: 500;
213```
214 
215Sharp 0px corners. The button is a 4×8-grid-aligned ink rectangle.
216 
217### Secondary (Ink Outline)
218- Transparent, 1px solid ink, ink text — same sharp 0px corners
219 
220### Outline & Ghost
221- Outline: transparent, 1px hairline at 16% ink
222- Ghost: no border, ink-50, hover lifts to ink
223 
224## 5. Cards (rare)
225 
226The system prefers grid-divided sections over cards. When a card is needed, it is sharp 0px corners with a 1px hairline at 10% ink — never lifted, never shadowed.
227 
228## 6. Charts
229 
230Thin precise bars (3px wide, 4px gap). One bar in vermilion (only if vermilion has not yet been used on the page), others in 22% ink. NO gridlines. Y-axis labels in JetBrains Mono uppercase 11px.
231 
232## 7. Tabs
233 
234Underline 1.5px in ink for the active state. Inactive tabs are ink-50 in Inter 500. Tabs sit on a 1px hairline baseline.
235 
236## 8. Spacing
237 
238- Base 4px (every dimension is a multiple of 4)
239- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128`
240- 12-column grid with 24px gutters (desktop), 16px gutters (mobile)
241- Section padding: 96px desktop, 48px mobile
242 
243## 9. Do's & don'ts
244 
245✅ **Do**
246- Snap every element to the 12-column grid — if it doesn't fit, redesign the layout
247- Use Inter only — three sizes, two weights, one font, no exceptions
248- Reserve vermilion for exactly one moment per page — the eye lands there once
249- Use 4px multiples for every dimension — padding, margin, gap, height
250- Hold pure white — off-white belongs to a different system
251 
252❌ **Don't**
253- Use vermilion more than once per page — the discipline IS the design
254- Use any radius beyond 0px (or the badge pill) — sharp Swiss precision throughout
255- Add a second accent or status color — six total values, that is all
256- Use any font besides Inter (and Mono for figures) — restraint is the whole premise
257 
258---
259 
260## Tokens
261 
262> Generated from the same source the live preview renders from.
263> Treat the values below as the contract — never substitute approximations.
264 
265### Colors
266 
267| Role      | Value |
268|-----------|-------|
269| primary   | `#0a0a0a` |
270| secondary | `#737373` |
271| tertiary  | `#0a0a0a` |
272| neutral   | `#f0f0f0` |
273| surface   | `#ffffff` |
274 
275### Typography
276 
277- **Display:** Inter
278- **Body:** Inter
279- **Mono:** JetBrains Mono
280 
281| Role | size / leading / weight / tracking |
282|------|------------------------------------|
283| Hero | 5.5rem / 1 / 500 / -0.035em |
284| H1   | 3rem / 1.1 / 500 / -0.025em |
285| H2   | 1.5rem / 1.25 / 500 / -0.012em |
286| Body | 0.9375rem / 1.6 / 400 / 0 |
287 
288### Radius
289 
290- sm: `0px`
291- md: `0px`
292- lg: `0px`
293- pill: `9999px`
294 
295### Shadows
296 
297- **card:** `none`
298- **button:** `none`
299 
300### Borders
301 
302- **card:** `1px solid rgba(10,10,10,0.10)`
303- **divider:** `rgba(10,10,10,0.10)`
304 
305### Buttons
306 
307Four variants, each fully tokenized. The preview renders from these exact values.
308 
309#### Primary
310 
311| Property | Value |
312|----------|-------|
313| shape | `sharp` |
314| background | `#0a0a0a` |
315| color | `#ffffff` |
316| border | `none` |
317| padding | `10px 20px` |
318| fontWeight | `500` |
319| fontSize | `0.8125rem` |
320 
321#### Secondary
322 
323| Property | Value |
324|----------|-------|
325| shape | `sharp` |
326| background | `transparent` |
327| color | `#0a0a0a` |
328| border | `1px solid #0a0a0a` |
329| padding | `10px 20px` |
330| fontWeight | `500` |
331| fontSize | `0.8125rem` |
332 
333#### Outline
334 
335| Property | Value |
336|----------|-------|
337| shape | `sharp` |
338| background | `transparent` |
339| color | `#0a0a0a` |
340| border | `1px solid rgba(10,10,10,0.16)` |
341| padding | `10px 20px` |
342| fontWeight | `500` |
343| fontSize | `0.8125rem` |
344 
345#### Ghost
346 
347| Property | Value |
348|----------|-------|
349| shape | `sharp` |
350| background | `transparent` |
351| color | `#737373` |
352| border | `none` |
353| padding | `10px 14px` |
354| fontWeight | `500` |
355| fontSize | `0.8125rem` |
356 
357### Charts
358 
359| Property | Value |
360|----------|-------|
361| variant | `thin-bars` |
362| strokeWidth | `1` |
363| fillOpacity | `0` |
364| gridlines | `false` |
365| barGap | `4px` |
366| highlight | `single` |
367| dotMarker | `false` |
368

03 · How to use it

Wire it into your agent.

markdown

# CLAUDE.md
 
Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Inter"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0a0a0a',
        secondary: '#737373',
        accent:    '#0a0a0a',
        neutral:   '#f0f0f0',
        surface:   '#ffffff',
      },
      borderRadius: {
        sm: '0px',
        md: '0px',
        lg: '0px',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Linnea Serif

Ultra-minimal modern serif. Pure off-white canvas, Fraunces variable serif tuned for warmth and optical size, one slate-blue accent. No shadows, no gradients — the serif itself is the system.

minimalserifpremiummoderneditorial

Linnea.app

ProductPricingDocsAbout

Sign inGet started

minimal · serif · premium

Build with Linnea Serif.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

Slate Material

tonal-surface with a slate-blue seed — cool tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. The trustworthy B2B tonal-surface dialect.

saasmaterialminimalmoderntrustworthylightb2b

Slate.app

ProductPricingDocsAbout

Sign inGet started

saas · material · minimal

Build with Slate Material.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational