Tune
The third style axis. Theme sets color; tune sets shape, spacing, typography, and size — 11 presets on one data-tune attribute, orthogonal to everything else.
Three orthogonal axes
pinion-ui splits a UI's look into three independent layers. You mix them freely — any theme with any tune with any component variant.
- Theme — color. The palette (39 × light/dark), set with data-theme on <html>.
- Tune — shape, spacing, typography, size. The overall feel, set with data-tune on <html>.
- Component — per-element variant / size / color, set with Blade props (color, size, appearance).
Setting a tune
One attribute on <html> (or any ancestor) cascades to every pinion-ui component underneath via CSS custom properties — no per-component config, no rebuild.
<html data-theme="pinion" data-tune="editorial">
The Theme / Tune switcher in the top-right navbar changes data-tune live — every specimen on this page reacts to it too. You can also set data-tune on any inner element to override just that subtree.
The 11 presets
Each preset is a coherent, mutually-exclusive point in shape × spacing × typography space. The same card markup is rendered under each below — only the ancestor data-tune differs.
default
Balanced neutral baseline
Aa — Heading
The quick brown fox jumps over the lazy dog.
minimal
Tight spacing, restrained and quiet
Aa — Heading
The quick brown fox jumps over the lazy dog.
sharp
Zero-radius, crisp squared edges
Aa — Heading
The quick brown fox jumps over the lazy dog.
corporate
Conservative and roomy
Aa — Heading
The quick brown fox jumps over the lazy dog.
tech
Monospace headings, dense and technical
Aa — Heading
The quick brown fox jumps over the lazy dog.
brutal
Hard edges, heavy borders, loud
Aa — Heading
The quick brown fox jumps over the lazy dog.
editorial
Serif headings, generous reading rhythm
Aa — Heading
The quick brown fox jumps over the lazy dog.
luxury
Airy, refined, high-contrast type
Aa — Heading
The quick brown fox jumps over the lazy dog.
soft
Rounded, gentle, friendly
Aa — Heading
The quick brown fox jumps over the lazy dog.
pixel
Pixel font, retro-game blocks
Aa — Heading
The quick brown fox jumps over the lazy dog.
draft
Hand-drawn, wobbly, sketch-like
Aa — Heading
The quick brown fox jumps over the lazy dog.
Strength — dial the intensity
data-tune-strength scales how far a tune departs from the baseline: xs / sm / md (default) / lg / xl. Below is the same soft tune at all five intensities.
xs
Aa — Heading
The quick brown fox jumps over the lazy dog.
sm
Aa — Heading
The quick brown fox jumps over the lazy dog.
md
default Aa — Heading
The quick brown fox jumps over the lazy dog.
lg
Aa — Heading
The quick brown fox jumps over the lazy dog.
xl
Aa — Heading
The quick brown fox jumps over the lazy dog.
<html data-theme="pinion" data-tune="soft" data-tune-strength="xl">
How it works underneath
Every token is base + per-tune delta × strength. Components only ever read var(--token) — they never know which tune is active. Four token families move together:
- Shape — corner radius (--radius-box / --radius-field) and border width.
- Spacing — a t-shirt scale (--spacing-3xs … --spacing-7xl) driving p-md / gap-lg / py-4xl.
- Typography — heading & body font family, letter-tracking, line-height, and type-scale ratio.
- Size & depth — control heights and the multi-layer box / field shadows.
Because it is all CSS custom properties, a tune change needs zero rebuild and cascades instantly — including the nested overrides shown in the specimens above.
Theme × tune mix freely
The two axes never collapse into each other: 39 themes × 11 tunes is 429 distinct looks from the exact same components. Leaving pinion-ui later? php artisan ui:eject freezes your chosen theme × tune into vanilla Tailwind — no lock-in. Installation →