---
title: "Ortto design system"
variant: extended
source: https://ortto.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/ortto-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ortto · Design System

> Editorial typography meets a calm, product-led interface

**Theme:** light · **Industry:** saas · **Source:** https://ortto.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ortto pairs a dramatic dark hero with bright, spacious product-story sections. Editorial serif headlines and real interface imagery make the platform feel both polished and practical.

## North star

Let editorial serif headlines lead, while clean product imagery and restrained colour keep every section practical and readable.

## Overview

The homepage opens on a near-black canvas, with white navigation and a large editorial headline beside an oversized product dashboard. A restrained red radial glow warms the hero without becoming a dominant surface colour; vivid blue is reserved for small interface and navigation accents. The rest of the page returns to white, using generous breathing room to separate product stories, customer proof, security messaging and the footer. Typography does much of the brand work: Ivar Text gives display copy a literary, human tone, while Haas Grot provides a crisp, compact sans-serif for navigation, labels and supporting text. Product screenshots are the main imagery, framed as clean interface panels with subtle, layered shadows. Sections use asymmetrical media-and-copy compositions rather than dense card grids. Keep borders quiet, alignment deliberate and colour concentrated in the hero atmosphere and functional details.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the bright background for product-story sections. |
| Quiet Graphite | `#6d6b70` | `--color-quiet-graphite` | neutral | Muted supporting copy, especially footer and secondary text. |
| Ember Glow | `#bf432b` | `--color-ember-glow` | accent | Warm radial glow behind the dark hero; atmospheric rather than a routine CTA colour. |
| Midnight Ink | `#14171f` | `--color-midnight-ink` | brand | Dark navigation and hero canvas, creating contrast for white type and product media. |
| Soft Charcoal | `#252525` | `--color-soft-charcoal` | neutral | Secondary body copy and footer links on light backgrounds. |
| Warm Porcelain | `#f9f8f7` | `--color-warm-porcelain` | surface | Subtle card and link-area surface against the white page canvas. |
| Near Black | `#0d0d0d` | `--color-near-black` | semantic | Primary text on light sections. |
| Signal Blue | `#1070ff` | `--color-signal-blue` | accent | Small navigation, heading and interface accents, including the sign-in control. |
| UI Silver | `#adaeb1` | `--color-ui-silver` | neutral | Minor subdued text detail; not a defining page surface colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#14171f` (Midnight Ink) · `--color-surface-2` → `#f9f8f7` (Warm Porcelain) · `--color-text` → `#0d0d0d` (Near Black) · `--color-text-muted` → `#6d6b70` (Quiet Graphite) · `--color-text-subtle` → `#252525` (Soft Charcoal) · `--color-accent` → `#bf432b` (Ember Glow) · `--color-accent-2` → `#1070ff` (Signal Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#0d0d0d` | `#14171f` | 1.08:1 | fail |
| `#0d0d0d` | `#f9f8f7` | 18.32:1 | AAA |
| `#6d6b70` | `#ffffff` | 5.27:1 | AA |
| `#6d6b70` | `#14171f` | 3.4:1 | AA-large |
| `#6d6b70` | `#f9f8f7` | 4.97:1 | AA |
| `#252525` | `#ffffff` | 15.33:1 | AAA |
| `#252525` | `#14171f` | 1.17:1 | fail |
| `#252525` | `#f9f8f7` | 14.45:1 | AAA |
| `#bf432b` | `#ffffff` | 5.18:1 | AA |

### Gradients

- `radial-gradient(50% 50%, rgb(191, 67, 43) 0%, rgba(191, 69, 44, 0) 100%)`
- `linear-gradient(90deg, rgba(229, 225, 221, 0) 0%, rgb(229, 225, 221) 50%, rgba(229, 225, 221, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Haas Grot Text R Web 55 Roman | `--font-body` | webfont | 400 | Primary sans-serif for body copy, navigation and links. | Inter |
| Ivar Text Regular | `--font-display` | webfont | 400 | Display and large editorial headings. | Cormorant Garamond |
| Haas Grot Text R Web 65 Medium | `--font-haas-grot-text-r-web-65-medium` | webfont | 400 | Medium-emphasis sans-serif labels and interface text. | Inter |
| Haas Grot Disp R Web 75 Bold | `--font-haas-grot-disp-r-web-75-bold` | webfont | 400 | Bold section headlines and compact display emphasis. | Inter |
| Ivar Text Italic | `--font-ivar-text-italic` | webfont | 400 | Editorial italic emphasis in testimonial or supporting copy. | Cormorant Garamond |
| Haas Grot Text R Web 75 Bold | `--font-haas-grot-text-r-web-75-bold` | webfont | 400 | Strong sans-serif emphasis within interface or supporting headings. | Inter |

- **Haas Grot Text R Web 55 Roman:** Regular weight, compact and highly readable; measured copy uses slight positive tracking.
- **Ivar Text Regular:** Regular weight creates the softer, literary contrast; preserve sentence case.
- **Haas Grot Text R Web 65 Medium:** Use for restrained emphasis rather than heavy display styling.
- **Haas Grot Disp R Web 75 Bold:** Measured for h2; combine with the page's serif display voice rather than using everywhere.
- **Ivar Text Italic:** Use sparingly for quoted or emphasized phrases.
- **Haas Grot Text R Web 75 Bold:** Reserve bold weight for short emphasis; measured usage is limited.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | 0 | — | Ivar Text Regular | Oversized editorial display copy, led by the hero headline. |
| h1 | 64px | 400 | 1 | -0.004em | — | Ivar Text Regular | Primary hero heading and major page-level statement. |
| h2 | 48px | 400 | 1 | -0.01em | — | Haas Grot Disp R Web 75 Bold | Bold sans-serif section headings in product and proof sections. |
| h3 | 24px | 400 | 1.33 | 0.003em | — | Ivar Text Regular | Secondary editorial headings within content blocks. |
| h4 | 20px | 400 | 1.4 | 0 | — | Ivar Text Regular | Small subsection headings and supporting feature titles. |
| body | 14px | 400 | 1.43 | 0.011em | — | Haas Grot Text R Web 55 Roman | Paragraphs, product descriptions and customer-story details. |
| caption | 13px | 400 | 1.38 | 0.015em | — | Haas Grot Text R Web 55 Roman | Eyebrows, attribution text and compact interface labels. |
| nav | 14px | 400 | 1.43 | 0.011em | — | Haas Grot Text R Web 55 Roman | Header navigation and compact menu labels. |
| link | 16px | 400 | 1.38 | 0.009em | — | Haas Grot Text R Web 55 Roman | Inline actions and supporting navigation links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 28, 32, 40, 60, 64 px.
- Section rhythm 60px · element gap 10px · card padding 40px · max content width 1024px.

The hero is a full-width, dark composition with text on the left and an oversized dashboard image on the right. Below it, content sits in a narrower centered column, with product sections arranged as image-and-copy splits and generous blank space between stories. Measured content uses a 1024px maximum width, a comfortable density and a 60px section rhythm. Keep section headings left-aligned, let media occupy a broad column, and use smaller side columns for feature lists or proof. The footer shifts into a compact multi-column link layout.

## Shape & elevation

- Radius: media `16px` · nav `4px` · link `9999px` · xs `4px` · sm `16px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.04) 0px 2.25px 2.25px 0px, rgba(0, 0, 0, 0.05) 0px 6.75px 6.75px 0px, rgba(0, 0, 0, 0.06) 0px 13.5px 13.5px 0px, rgba(0, 0, 0, 0.07) 0px 28.125px 28.125px 0px, rgba(0, 0, 0, 0.08) 0px `
- Shadow `xl-2` (other, card): `rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 12px 0px, rgba(0, 0, 0, 0.06) 0px 24px 24px 0px, rgba(0, 0, 0, 0.07) 0px 50px 50px 0px, rgba(0, 0, 0, 0.08) 0px 136px 136px 0px, rgba(`
- Shadow `sm` (link): `rgba(0, 0, 0, 0) 0px 0.241451px 0.434611px 0px, rgba(0, 0, 0, 0) 0px 2px 3.6px 0px`

The page is mostly flat, with little emphasis on visible borders or decorative containers. Product screenshots and select cards use broad, soft, layered shadows to lift media from the white canvas. Keep surrounding sections open and avoid stacking cards or adding heavy outlines; the dark hero itself supplies the strongest depth and contrast.

## Imagery

Use product-interface screenshots as the primary visual material: dashboards, journey builders, contact data tables and support inboxes. Keep them crisp, bright and legible against the dark hero or white content canvas. The hero dashboard is oversized and partially cropped at the viewport edge; lower examples sit cleanly within the content grid. Customer proof includes restrained portrait/video imagery, while logos remain small supporting details.

## Components

### Dark hero

Full-width Midnight Ink canvas with white editorial headline, muted supporting copy, subtle Ember Glow atmosphere and a large product dashboard.

### Product story split

Left-aligned section heading above a broad product screenshot, paired with a compact feature list in an adjacent column.

### Customer quote

Editorial testimonial copy with a small customer attribution and restrained portrait detail.

### Proof cards

Light customer-result cards with prominent figures, brief quotes and compact attribution; keep the grid visually quiet.

### Security media panel

Wide dark security image with concise proof points and small certification marks.

### Multi-column footer

Compact groups of product, solution, feature and company links, followed by a restrained legal strip.

### Measured component styles

- **Link** (“B2B 375% Increase in first reviews via j”): transparent background · text #0000ee · radius 0px · padding 32px · 400 12px sans-serif
- **Card** (“Two-factor authentication (2FA) and enfo”): transparent background · text #000000 · radius 0px · padding 40px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.04) 0px 4px 4px 0px, rgba(0, 0, 0, 0.05) 0px 12px 12px 0px, rgba
- **Navigation item** (“Product Solutions Resources Templates Si”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Lead with a dark, full-width hero and clear product imagery.
- Pair Ivar-style editorial headlines with clean Haas-style sans-serif copy.
- Use white space to separate product stories and proof sections.
- Keep blue accents small and functional.
- Use soft shadows to lift screenshots from light backgrounds.
- Align section headings and product media consistently.

## Don't

- Do not turn every section into a dark panel.
- Do not use Ember Glow as a solid, repeated button colour.
- Do not crowd product screenshots with decorative framing.
- Do not replace editorial headlines with uniformly bold sans-serif type.
- Do not introduce strong borders where the reference stays open and flat.
- Do not use bright colours from interface charts as the overall brand palette.

## Agent prompt

Build a polished SaaS page in Ortto's visual language. Open with a full-width Midnight Ink (#14171f) hero, white editorial headline, muted supporting text and a large, crisp product screenshot; use Ember Glow (#bf432b) only as a subtle atmospheric background accent. On the content canvas, use Gallery White (#ffffff), generous section spacing and left-aligned editorial headings. Pair Ivar-like serif display type with an Inter-like sans-serif for navigation, labels and body copy. Use Warm Porcelain (#f9f8f7) sparingly for soft card surfaces, Near Black (#0d0d0d) for primary text and Signal Blue (#1070ff) for small functional accents. Compose product stories as image-and-copy splits, with broad screenshots, compact feature lists and restrained customer proof. Add gentle layered shadows to media, keep borders quiet, and finish with a clean multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-width hero; headline and supporting copy at left, oversized dashboard screenshot at right. | top navigation, primary sign-in action, product-led first impression | near-black canvas, white editorial headline, warm radial glow, cropped dashboard media |
| 2 | feature-split | Long white content area with sequential product-story splits, proof cards, testimonials and a security feature panel. | feature discovery, customer proof, security reassurance | left-aligned section headings, large interface screenshots, compact feature lists, soft media shadows |
| 3 | footer | White, centered footer with compact multi-column link groups and a separate legal strip. | category-based navigation, legal and policy links | small sans-serif text, muted link colour, subtle horizontal separation |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ortto-com