Foundations

The Lumino mark.

A parametric 12-petal sunflower. Solid below 28px for favicon legibility, stroked above with an inner highlight for expressive display. One component, one source of truth — every surface in the system speaks through it.

Anatomy

petalCount12Always 12. Do not parameterize.
petalLen78Tip distance from center (of 200 viewBox)
petalBase28Distance from center to petal base
petalWidth16Horizontal curve span
coreR22Center disc radius
stroke1.4Stroked mode line weight

Size ladder

One component, two renderings. Below 28px the mark switches to solid petals and an opaque core for clarity at favicon + inline-text scales. Above 28px petals become stroked with an inner highlight, and the core becomes a concentric ring — the full expressive form.

Color variants

13 preset pairs: foreground + background. Click any tile to download its SVG.

Monochrome

Studio (warm earthy — primary brand)

Pro

Playful

Usage rules

Do — Terracotta on warm dark
Do — Ink on cream
Don't — Low-contrast terracotta on peach
Don't — Mark over loud gradient backgrounds

Clearspace

Always leave at least coreR × 0.5 of empty space on every side. At 28px and up that's ~11px. At 22px it's ~8px. Never crowd the mark.

Using the mark

Wordmark

The mark pairs with the Lumino wordmark in Fraunces. Use 1.4× the mark height for wordmark height; align the baseline through the mark's horizontal center.

Downloads

All 13 variants · SVG bundle
ZIP of every preset as optimized SVG.
Download bundle →
logo.jsx · React component
The parametric source of truth — drop into any React project.
Download JSX →