Skip to content
Library

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.

Screenshot of Ortto
Captured from ortto.com on October 11, 2026

Ortto design system

Ortto

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

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictFails AAA 7

More DESIGN.md files. Same web, different personalities.