Skip to content
Library

Adanola. Editorial lookbook on white paper.

  • Commerce
  • Light theme
  • 15 colors
  • 5 typefaces

Adanola is a gallery-like fashion canvas where the product photography is the entire visual language and the UI almost disappears. The interface is near-monochrome — white surfaces, black text, and a single thin sans-serif typeface (Favorit) — letting the color of the garments themselves become the only chromatic accent on most pages. Components are deliberately lightweight: no shadows, no gradients, no decorative borders, just hairline rules, ghost outlines on primary actions, and 4px corner radii that read as crisp rather than soft. Spacing is compact and consistent (4px base), but the generous whitespace around imagery creates a calm, editorial rhythm that treats every product shot as a full-bleed editorial spread. The overall feel is closer to a high-end print lookbook than a typical e-commerce grid.

Screenshot of Adanola
Captured from adanola.com on October 11, 2026

Adanola design system

Adanola

Accent1

  • Cool pastel surface for editorial accent sections

Neutrals14

  • Primary text, filled action buttons, icon strokes, hairlines — the dominant ink across the entire interface

  • Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color

  • Cool muted surface for product photography contexts

  • Secondary text, input borders, subdued UI chrome

  • Cool charcoal for product photography backgrounds and muted editorial surfaces

  • Warm muted surface for product photography contexts

  • Warm muted surface for product photography contexts

  • Cool gray for product photography contexts

  • Placeholder backgrounds, image placeholder fills, neutral swatch defaults

  • Warm beige for product photography contexts

  • Subtle surface alternation, disabled states, skeleton backgrounds, light dividers

  • Warm cream surface for editorial highlight sections and seasonal accents

  • Off-white surface variant for subtle banding between product rows and editorial sections

  • Page canvas, card surfaces, text on dark fills, image backgrounds

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Carbon Ink on Pale Tide

14.45 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.