Design System Showcase
Less is more. No shadows, no gradients, no decoration. Pure color contrast and generous whitespace carry all meaning.
01 — Components
Binary hover states. Fill inverts to outline, outline inverts to fill. Instant, flat, no easing.
Primary
Fill inverts on hover
Secondary
Outline inverts on hover
Accent
Single accent pop
Ghost
Transparent fill
02 — Components
Strip every element to its minimum viable form. If it cannot justify its presence, remove it.
Pure black on pure white. The starkest contrast available. No shades, no compromises.
Swiss-influenced column grids create invisible order. Alignment is meaning.
03 — Components
Boxed Style
Underline Style
State Preview
04 — Palette
Black and white form the foundation. Accents appear one at a time — never combined — as a single deliberate pop.
Black
White
Coral
Teal
Yellow
Accent 1 — Coral
#ff3366
Primary accent. CTAs, errors, emphasis.
Accent 2 — Teal
#00d4aa
Success states, positive indicators.
Accent 3 — Yellow
#ffcc00
Warnings, highlights, attention draws.
05 — Projects
Filter by category. Each block is a solid color — no images, no textures, no decorations.
Art Direction
Product Design
Brand Identity
Photography
Editorial
Typography
06 — Philosophy
Core Principles
I
Every pixel must earn its place. Remove until the design breaks, then add back the minimum.
II
No depth illusions. No shadows, no gradients. The screen is a 2D surface — honor it.
III
Interaction = color flip. Black becomes white. White becomes black. Nothing else changes.
IV
One accent color. One typeface. One grid. Constraints produce creativity.
07 — Typography
Typography is the primary visual element. Bold, tight, black. The font does the heavy lifting — no ornament needed.
Editorial Pairing
Good design is as little design as possible. Design should serve the content, not overshadow it.
Dieter Rams
Inverted Pairing
The commitment to omit the non-essential. Purity, simplicity, careful reduction to the essential.
Dieter Rams
The type system uses a single font stack — system-ui or Inter — rendered in weights 400 (body) and 900 (display). Tracking tightens as size increases. Color is always pure black on white or pure white on black.