Lyssna. A quiet white page where one deep teal button glows beneath serif headlines and mint accent panels breathe like greenhouse glass.
- Productivity
- Light theme
- 12 colors
- 2 typefaces
Lyssna reads as a botanical research journal brought to life on screen: a near-white editorial canvas, a deeply saturated dark teal that anchors every action, and a single bright mint surface (#b9ffe8) that recurs as accent wash, pill background, and decorative envelope around product imagery. Typography carries the personality — a humanist serif (grenette) reserved exclusively for headlines at 46–60px, weight 400, giving the page a magazine-editorial authority, while the custom sans (mint) handles everything from 12px caption to 22px subheading with quiet consistency. The visual rhythm is open and breathable: centered hero, generous vertical gaps, then alternating white and tinted-mint sections with three-column feature steps. Decorative elements — participant name tags, conic rating rings, soft-pink and cream product cards — add warmth without ever competing with the dark teal action color. Nothing is loud; the teal button is the only thing on screen that pulses.
Lyssna design system
Brand2
Primary filled action buttons (Sign up, primary CTAs), active nav state, brand mark — the single chromatic command on every page
Mid-tone teal for hover states, link fills, and accent strokes — sits between the deep brand teal and the mint surface
Accent4
Teal action color for filled buttons, selected navigation states, and focused conversion moments.
Decorative accent for illustration, icon fills, and tinted card washes — provides a warm counterpoint to the cool teal system
Soft pink surface wash on product cards and decorative blocks — the third color in the tri-tone accent system (mint / cream / pink)
Orange decorative accent for icons, marks, and small graphic details
Neutrals6
Primary heading and body text — the dominant non-neutral color, carries 17:1 contrast on white, near-black with a cool cast
Alternate heading ink and dark surface text — sits beside Ink for inverse text on light tinted surfaces
Muted body text, outlined/secondary action borders, supporting links — the soft spoken gray-teal for secondary chrome
Hairline borders, card outlines, image strokes, divider lines — the universal neutral separator at ~7,700 uses
Warm-tinted card surface and section wash — a barely-there yellow that softens white without competing with mint
Page canvas, button text on teal, card surfaces, nav background — the dominant light surface
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper on Deep Teal
6.02 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
