Arcadia. Deep evergreen authority on warm cream paper, one mint LED accent and pale violet data orbs suspended in soft morning light.
- SaaS
- Light theme
- 13 colors
- 2 typefaces
Arcadia is a clean-energy observatory rendered in warm light: an off-white cream canvas with deep forest-green authority, one electric-mint accent that switches actions on like an LED, and violet used sparingly for decorative data-orb highlights. The system feels measured and considered — DM Sans at restrained weights, generous 24-40px breathing room, and a 16px radius that rounds corners enough to feel modern but not playful. Hero sections dissolve into ultra-soft sage-to-cream gradients, and product surfaces are flat white with thin sage borders rather than shadowed cards. Decorative moments — floating orb networks, isometric energy illustrations, bar charts — carry the visual interest, while the interface itself stays quiet, editorial, and high-trust.
Arcadia design system
Brand1
Primary brand — announcement bar, nav strip, primary CTA fill, section borders. The deep evergreen reads as institutional and environmental at once: it is the only saturated color the interface wears as a uniform, giving every page an authoritative dark-green header band
Accent3
Accent / secondary action — vivid electric-mint button fill, eyebrow label text, decorative highlights. Against the forest-green chrome, mint reads as a switched-on LED; use it only where the UI needs to feel powered or selected
Decorative data accent — floating sphere fills, chart highlights, illustrated node markers. Violet is the only non-green chromatic and appears only on ornamental 3D orbs and chart accents, never on controls
Mid-stop of hero gradient — pale lavender bridging sage to cream
Neutrals9
Maximum-contrast heading color — used for the largest display headlines where pure black is needed for presence
Body text and high-contrast headings — a near-black with the faintest green cast that ties the text to the brand forest
Dark UI text, footer copy, dense secondary lines
Secondary body text, muted labels, card sub-copy. Cool gray-green that sits one step down from Bark
Tertiary text, helper copy, disabled link states
Hairline borders and dividers — card outlines, rule lines, table separators. The desaturated sage reads as an extension of the brand greens without competing with them
Lighter border for inputs and subtle separators
Canvas / soft surface — primary page background on hero and section bands. Slightly warm so the page never reads as sterile white
Card and elevated surface — product cards, dashboard mockups, nav bar. Stacked on Cream Paper to create a one-step surface lift without shadows
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Sheet White on Canopy
11.18 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7
