Ortto. Blueprint on midnight paper.
- SaaS
- Light theme
- 7 colors
- 7 typefaces
Ortto reads as a product brief on quality stock: near-black hero panels yield to warm-white editorial sections, held together by a single vivid blue that is the only chromatic voice in an otherwise monochrome system. Display headlines use a humanist serif (Ivar Text) at 64–72px with negative tracking, while body and UI sit in a precise neo-grotesque sans (Haas Grot Text) — the pairing gives marketing copy the gravity of print journalism and product surfaces the neutrality of a control panel. Buttons are pill-shaped and filled blue, product screenshots float on a six-layer diffuse shadow, and embedded app captures are treated as first-class content rather than decoration. The overall effect is a marketing site that feels like the product's own manual — confident, specific, almost entirely black-and-white with one electric blue accent.

Ortto design system
Brand1
Primary action buttons, active nav, accent borders, eyebrow labels, full-width announcement band — the single chromatic voice in the system
Neutrals6
Hairline borders, icon strokes, and high-emphasis outlines — the structural linework color
Dark hero panels, navigation bar, and logo strip backgrounds — creates high-contrast showcase zones before the light editorial sections
Primary body text, display headlines in light sections, and strong borders — the workhorse text and edge color above the fold
Secondary body text, muted helper copy, and subtle borders — quiet supporting type that recedes behind Charcoal
Warm-tinted surface for subtle differentiation from pure white — used on alternate section bands and soft card fills
Primary canvas, product screenshot backgrounds, card surfaces, and inverse text on dark panels
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Onyx on Electric Blue
4.78 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7











