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

# Ordinal · Design System

> A dark canvas for clear, confident product storytelling

**Theme:** dark · **Industry:** saas · **Source:** https://www.tryordinal.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._

Ordinal pairs a near-black canvas with mint accents and spacious, editorial product storytelling. Bright software previews provide contrast while fine rules and restrained type keep the long page composed.

## North star

Keep the dark canvas dominant; use mint sparingly for actions and let bright product UI carry the visual contrast.

## Overview

The page uses a nearly uniform charcoal-black canvas, with white headings, muted grey supporting copy, and a pale mint green reserved for primary actions, small labels, and selective emphasis. A subtle deep-green gradient appears behind the trust and feature area, creating a change of mood without breaking the dark foundation. Inter carries the large, regular-weight headline and readable body copy; Inconsolata adds a compact, uppercase technical voice to navigation, labels, and buttons. The layout is centered and spacious at the top, then shifts into aligned feature columns, product demonstrations, a testimonial, and resource cards. Software screenshots are the main visual contrast: pale interfaces sit within dark surroundings, framed rather than heavily decorated. Hairline grey borders, restrained corner rounding, and occasional soft shadow define controls and media. The page favors generous section breathing room over dense decoration, using mint details and carefully placed interface imagery to guide scanning.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ordinal Charcoal | `#151316` | `--color-ordinal-charcoal` | brand | The dominant page canvas, maintaining a consistent dark backdrop from hero through footer. |
| Signal Mint | `#8ef5b5` | `--color-signal-mint` | accent | Primary trial and start buttons, small section markers, and selective emphasis. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main headings, navigation, bright link text, and footer content. |
| Soft Ash | `#8e8e8e` | `--color-soft-ash` | semantic | Muted supporting copy and secondary footer text against the dark canvas. |
| Graphite Rule | `#595657` | `--color-graphite-rule` | semantic | Thin section and control outlines that separate content without heavy boxes. |
| Deep Pine | `#20433d` | `--color-deep-pine` | brand | Deep green gradient tone behind the trust and feature area. |
| Slate Panel | `#444245` | `--color-slate-panel` | surface | Raised or contrasting dark surface areas, including media and interface panels. |
| Warm Paper | `#f4f2ee` | `--color-warm-paper` | neutral | Outlined demo button text and occasional light-toned text details. |
| Silver Mist | `#b9b9b9` | `--color-silver-mist` | semantic | Secondary body copy, including subdued supporting text and testimonial content. |
| Media Grey | `#8a898b` | `--color-media-grey` | surface | Grey visible in media and other measured elements; treat as preview imagery rather than a core brand surface. |
| Pine Ink | `#24574d` | `--color-pine-ink` | semantic | Text and links on mint controls, plus subtle green gradient details. |

### Semantic aliases

`--color-canvas` → `#151316` (Ordinal Charcoal) · `--color-surface` → `#444245` (Slate Panel) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#8e8e8e` (Soft Ash) · `--color-text-subtle` → `#b9b9b9` (Silver Mist) · `--color-border` → `#595657` (Graphite Rule) · `--color-accent` → `#8ef5b5` (Signal Mint) · `--color-on-accent` → `#24574d` (Pine Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#151316` | 18.48:1 | AAA |
| `#ffffff` | `#444245` | 9.95:1 | AAA |
| `#8e8e8e` | `#151316` | 5.64:1 | AA |
| `#8e8e8e` | `#444245` | 3.04:1 | AA-large |
| `#b9b9b9` | `#151316` | 9.42:1 | AAA |
| `#b9b9b9` | `#444245` | 5.07:1 | AA |
| `#8ef5b5` | `#151316` | 13.97:1 | AAA |
| `#8ef5b5` | `#444245` | 7.52:1 | AAA |

### Gradients

- `linear-gradient(355deg, rgba(255, 255, 255, 0), rgba(36, 87, 77, 0.7) 70%, rgba(255, 255, 255, 0) 90%)`
- `linear-gradient(355deg, rgba(251, 250, 248, 0), rgb(251, 250, 248) 70%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0))`
- `linear-gradient(170deg, rgb(36, 87, 77), rgb(58, 58, 58))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500 | Display and heading typography, navigation links, and body copy. | Inter |
| inconsolata | `--font-inconsolata` | webfont | 500, 400 | Compact uppercase navigation, buttons, and section captions. | Inconsolata |

- **inter:** Regular weights dominate; large headings use tight negative tracking, while body copy stays clean and readable.
- **inconsolata:** Use measured regular and medium weights; labels and controls commonly use uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.381, base 16.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1.2 | -0.03em | — | inter | Large display messaging in the hero and major page statements. |
| h1 | 53.5px | 400 | 1 | -0.01em | — | inter | Primary hero heading. |
| h2 | 40px | 400 | 1.2 | -0.03em | — | inter | Feature and section headline. |
| h3 | 26.5px | 400 | 1.5 | -0.03em | — | inter | Feature titles and subordinate content headings. |
| body | 16.5px | 400 | 1.5 | -0.01em | — | inter | Paragraphs, descriptions, testimonial text, and supporting copy. |
| caption | 13.5px | 500 | 1 | 0.01em | uppercase | inconsolata | Small uppercase category labels and section markers. |
| nav | 13.5px | 400 | 1 | 0 | uppercase | inconsolata | Compact uppercase navigation and utility labels. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 3, 5, 8, 10, 11, 12, 13, 15, 16, 17, 20, 25, 27, 33, 35, 50 px.
- Section rhythm 107px · element gap 8px · card padding — · max content width 1273px.

Use a centered content area capped at the measured 1273px maximum width. The hero is centered and open, followed by broad full-width product imagery and a logo band. Later sections alternate between two-column feature layouts, three-column cards, and centered testimonial content. Keep the measured spacious density and roughly 107px section rhythm; align feature headings to the start, and reserve borders for meaningful separations. The footer returns to a broad, multi-column arrangement.

## Shape & elevation

- Radius: button `4px` · media `5px` · link `10px` · xs `4px` · sm `5px` · md `10px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0.1) 0px 4px 45px 0px`
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is mostly flat: dark sections rely on contrast and spacing rather than stacked cards. Use thin graphite borders for button outlines and section separators, with subtle rounding on buttons and media. Reserve soft shadow for occasional floating or layered product imagery; avoid strong elevation that competes with the screenshots.

## Imagery

Product-interface captures are the primary imagery: large pale application screens are set against the dark page, with modest rounded corners and little surrounding ornament. Feature previews include channel logos and reporting panels; these belong to the product content rather than the core palette. Use occasional brand or customer marks and restrained abstract line art in the footer, keeping imagery crisp and well-framed.

## Components

### Primary CTA

Mint-filled button with Pine Ink uppercase Inconsolata text, a thin matching border, and compact corner rounding.

### Outlined demo CTA

Transparent dark-canvas button with Warm Paper text and a thin Warm Paper outline; pair beside the primary action.

### Top navigation

Compact uppercase links across the header, with the logo at left and utility actions plus a mint CTA at right.

### Product preview

Large pale software screenshot framed by a subtly rounded edge, strongly contrasted against the dark canvas.

### Feature cards

Aligned feature imagery and copy, using restrained borders and spacing rather than prominent card shadows.

### Section marker

Small uppercase Inconsolata label with a mint indicator above a larger Inter section heading.

### Testimonial

Centered customer quote and attribution, visually isolated by fine vertical rules and generous surrounding space.

### Measured component styles

- **Primary button** (“START FREE TRIAL”): background #8ef5b5 · text #24574d · border 1px solid #8ef5b5 · radius 4.13333px · padding 12.5px 11.2px · 400 13.3333px inconsolata · uppercase
- **Secondary button** (“BOOK A 15 MINUTE DEMO”): transparent background · text #f4f2ee · border 1px solid #f4f2ee · radius 4.13333px · padding 12.5px 11.2px · 400 13.3333px inconsolata · uppercase
- **Link** (“Product Changelog Check out the latest f”): transparent background · text #ffffff · radius 10.08px · padding 20px 26.7px · 400 13.3333px inconsolata
- **Navigation item** (“RESOURCES PRODUCT USE CASES PRICING LOG ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13.3333px inter

## Do

- Keep the near-black canvas continuous across sections.
- Reserve Signal Mint for primary actions and selective highlights.
- Use Inter for headlines and readable body copy.
- Use Inconsolata for compact uppercase labels and controls.
- Give product screenshots strong contrast against the dark page.
- Separate content with whitespace and fine graphite rules.

## Don't

- Do not introduce unmeasured palette colors.
- Do not fill every section with cards or borders.
- Do not use mint as a large background field.
- Do not let decorative imagery overpower product previews.
- Do not crowd the page with dense copy or tight section spacing.
- Do not apply heavy shadows or oversized rounded containers.

## Agent prompt

Build a new page in Ordinal’s visual style. Use Ordinal Charcoal (#151316) as the dominant canvas, Gallery White (#ffffff) for primary text, Soft Ash (#8e8e8e) or Silver Mist (#b9b9b9) for subdued copy, and Signal Mint (#8ef5b5) sparingly for primary actions. Use Pine Ink (#24574d) for text on mint buttons. Set headlines and body in Inter; use Inconsolata for compact uppercase labels, navigation, and buttons. Center content within the measured 1273px maximum width and preserve spacious section rhythm. Let bright product-interface previews create contrast; frame them simply, with restrained rounding and thin Graphite Rule (#595657) outlines where useful. Use Deep Pine (#20433d) only as a subtle gradient accent. Favor clear alignment, open space, fine rules, and flat surfaces over decorative cards or heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Single-row header on the dark canvas, with brand left and navigation and actions across the top. | Product navigation, Direct login access | Wordmark, Uppercase links, Mint CTA |
| 2 | hero | Centered headline and supporting copy above paired actions and a wide product preview. | Primary trial action, Secondary demo action | Large centered heading, Pale product screenshot, Mint pill label |
| 3 | logo-cloud | Trust statement above a two-row grid of company logos on a dark-to-green section band. | Social proof, Brand recognition | Logo grid, Fine separators, Subtle green gradient |
| 4 | feature-grid | Section heading followed by two larger feature previews and a three-column row of smaller features. | Feature discovery, Cross-channel scheduling | Product screenshots, Feature captions, Channel icons |
| 5 | testimonials | Centered quote and attribution in a broad, minimally decorated area framed by fine vertical rules. | Customer proof, Case study link | Centered quotation, Small customer attribution, Outlined link |
| 6 | feature-grid | Left-aligned heading above three horizontally aligned reporting preview cards. | Analytics discovery, Reporting overview | Three-column media row, Small captions, Dark canvas |
| 7 | content-feed | Section introduction followed by a three-column arrangement of resource links and visual previews. | Resource discovery, Related content navigation | Editorial content tiles, Link titles, Subtle dividers |
| 8 | cta | Two-column closing call to action, with copy and buttons beside a large typographic audience list. | Start free trial, Book a demo | Large audience labels, Mint primary button, Section rule |
| 9 | footer | Broad footer with brand contact block and multiple compact link columns above decorative line art. | Footer navigation, Contact access | Multi-column link groups, Fine rules, Abstract line art |

## Source CSS custom properties (selected)

```css
--_typography---font--primary-family: "inter", "inter Fallback", Arial, sans-serif;
--_typography---font--secondary-family: "inconsolata", "inconsolata Fallback", sans-serif;
```

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