Abel. An editorial lookbook that smells of perfume.
- Commerce
- Light theme
- 6 colors
- 2 typefaces
Abel operates as an editorial fragrance house: one warm cream note against a near-total monochrome canvas, with photography doing the chromatic work. The interface is deliberately quiet — near-black ink on white paper, whisper-light sans-serif headlines (weight 300), and a monospaced voice for all functional microcopy that gives every label, button, and link the cadence of a typeset colophon. Spacing is generous and sectional, letting full-bleed photographic plates alternate with white product cards; the result reads like a printed lookbook rather than a retail UI. The single non-neutral (#f6eada, a warm parchment cream) appears as a subtle surface tint and accent border — never as fill or decoration — so the visual system stays austere while the imagery carries all the color temperature.

Abel design system
Accent1
Warm accent surface, hairline borders, subtle highlight washes — the only chromatic note in the system; appears sparingly as tint, never as bold fill, to echo natural ingredient warmth without competing with photography
Neutrals5
Primary text, hairlines, ghost button borders, product card outlines, icon strokes — the dominant structural color; sets all copy and dividers against white and cream surfaces
Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color
Disabled/placeholder surfaces, secondary background panels behind product imagery
Soft secondary surface, muted card backgrounds for non-primary content blocks
Page canvas, product card backgrounds, inverse text on black buttons and dark imagery
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Ink Black on Parchment Cream
17.38 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











