Drop. Lavender editorial spread in bold serif.
- SaaS
- Light theme
- 9 colors
- 2 typefaces
Drop operates as an editorial-tech hybrid: crisp sans-serif body type (ABC Normal) meets a confident slab-serif display (Ivar Display) that dominates the page at near-poster scale, anchoring an otherwise restrained palette of black, white, and a soft lavender (#b8afda) that recurs as the chromatic signature. The page alternates between near-white surfaces and a black editorial band, with vivid orange and electric yellow reserved as hard punctuation for revenue figures, data callouts, and the new-world narrative. Components lean pill-shaped (1440px radius is ubiquitous for buttons, tags, and nav), card radii cluster between 16-24px, and the system avoids shadows almost entirely — contrast comes from hard color blocks, not elevation. The overall attitude is that of a confident magazine spread that also happens to be a product page.
Drop design system
Brand1
Dominant chromatic accent, large section backgrounds, circle diagram fills, decorative borders — carries the brand's pastel identity and appears more than any other chromatic color
Accent2
Orange wash for highlight backgrounds, decorative bands, and soft emphasis behind content.
Secondary accent for borders, highlights, and decorative geometric elements — neon-charged against black to create energy
Neutrals6
Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Dark card surfaces for product mockups and the dark editorial band, barely distinguishable from Obsidian to create depth without color
Muted helper text, secondary borders, inactive UI elements — handles every de-emphasized text or border role
Near-gray green surface wash, appears as a muted canvas tint on light sections and soft card backgrounds
Light pastel surface tint, used sparingly for soft card backgrounds that need warmth without chromatic commitment
Page canvas, card surfaces, text on dark fills — the default surface that 60%+ of the page lives on
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Obsidian on Lavender Mist
9.23 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
