Stone & Ink

Pau's personal brand design system — warm-grey stone surfaces, warm ink typography, one loud yellow, and DM Mono annotations that carry the technical voice. The signature move: monospace kickers and parenthetical figure marks — ( fig.04 ).

PERSONAL SITE — PAU · ( v1.0 / 2026 )

---

Foundations

Flat stone fills, hairline borders instead of shadows, Inter light against DM Mono caps. One accent color, used sparingly.

Token	Value	Role
--stone-50 … --stone-950	#fafaf9 → #0c0a09	Warm surface scale (Tailwind stone)
--ink	#0a0a0a	Strong text, primary buttons
--ink-high-em	#2a2823	Body text
--ink-mid-em	#5b554a	Muted text, annotations
--accent	#ffcc00	The one loud yellow
--accent-muted	#ffb700	Hover/pressed accent, focus rings
--destructive	#e40014	Destructive/alert only
--font-sans	Inter	Everything readable — display 500, body 300
--font-mono	DM Mono	Kickers, badges, figure marks, stats
--radius / --radius-sm	8px / 4px	Cards & panels / buttons & chips

The full token set (spacing, type scale, motion, layout) lives in tokens/ and is documented in docs/DESIGN-GUIDELINES.md.

Components

Eleven React primitives, styled entirely with the tokens:

• Actions — Button (primary = ink, accent = yellow, ghost, danger), IconButton
• Display — Card, Badge, Tag, Avatar
• Forms — Input, Textarea, Switch, Checkbox
• Navigation — Tabs

Quick start

Just the CSS (tokens + base styles)

Link the single entry point — it imports the token files and base element styles, and pulls Inter + DM Mono from Google Fonts:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/poliolet/stone-ink-design-system@main/styles.css">

Then build with the custom properties:

.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  color: var(--text-body);
}

React components

Each file in components/ is a standalone module with no dependencies beyond React — copy what you need into your project:

import Button from './components/actions/Button.js';

<Button variant="accent">Get in touch</Button>

Or load the prebuilt browser bundle, which exposes everything on window.StoneInkDesignSystem_57032b:

<script src="dist/_ds_bundle.js"></script>

See it running

python3 -m http.server 8000
# then open:
#   http://localhost:8000/ui_kits/personal-site/index.html   — full homepage
#   http://localhost:8000/examples/components.html            — component showcase
#   http://localhost:8000/examples/foundations.html           — palette & type

No server handy? examples/personal-site-standalone.html is fully self-contained (fonts and React embedded) — download it and double-click.

Design principles

• Borders, not shadows. A 1px stone hairline does the separating; elevation is reserved for transient overlays.
• One accent. Yellow appears only where it earns it — the wordmark underscore, the accent button, focus rings, stats on dark.
• Light type, tight tracking. Display and headings at weight 500 / -0.035em; body at 300 / -0.02em.
• The figure motif. DM Mono uppercase annotations — ( fig.05 ), ( 01 / 03 ), 2026.06 — give any layout a documented, technical feel.
• One dark block per page. stone-950 with white hairlines, where the yellow does the talking.
• Quiet motion. 120–200 ms, no bounces, honors prefers-reduced-motion.
• No emoji, no photography. Typographic glyphs only: ↗ > · _.

Repository layout

styles.css            single entry point (imports only)
tokens/               fonts · colors · typography · spacing · base
components/           React primitives (actions / display / forms / navigation)
ui_kits/personal-site personal homepage composing the primitives
examples/             component showcase, foundations specimen, offline demo
dist/                 compiled browser bundle + manifest (generated — don't edit)
docs/                 full design guidelines (voice, foundations, iconography)
assets/               screenshots used in this README

A note on provenance: this system was designed with Claude Design and exported from it. The component .js files are extracted from the compiled bundle (readable, transpiled JSX — React.createElement calls); ui_kits/personal-site/sections.jsx is original JSX source. Tokens build on the open Tailwind stone neutral scale and open fonts (Inter + DM Mono, both under the SIL Open Font License).

License

MIT © 2026 Pau Vicedo. Use it, remix it, ship it — a mention is appreciated.