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

# Tomorro · Design System

> Deep green, bold type, and a bright signal of AI.

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

Tomorro pairs a forest-dark opening with a long, varied homepage of product stories, proof points, and customer content. Oversized condensed headlines and electric-lime accents make its AI contract platform feel energetic and direct.

## North star

Use deep green and oversized condensed headlines as the frame, then reserve electric lime for the single most important action or emphasis.

## Overview

The visual strategy opens on a deep green (#122314) canvas, with a centered, uppercase display headline and a concentrated lime (#68ef3f) highlight that draws attention to AI and the primary demo action. The rest of the page alternates between white editorial sections and dark, atmospheric product storytelling, with black video moments creating deliberate contrast. Ozik gives display headings their compact, poster-like impact; Aeonik carries navigation, body copy, and interface labels with a clean, practical tone. Instrument Serif appears sparingly for more editorial subheads. Wide section bands and generous open areas frame product screenshots, while cards and pill-shaped controls soften the otherwise bold typography. Imagery mixes abstract green 3D forms, UI captures, team photography, and a cinematic announcement video. Lime is a functional signal for CTAs and select emphasis, not a general fill colour; muted green-gray text and pale surfaces keep supporting content legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas for the product, company, security, and customer-story sections; also the primary contrast text on dark bands. |
| Signal Lime | `#68ef3f` | `--color-signal-lime` | accent | Primary demo buttons, play controls, and selective AI or link emphasis against dark green and black. |
| Cinema Black | `#000000` | `--color-cinema-black` | surface | Announcement video section and dark gradient endpoints; creates a dramatic break in the long page. |
| Canopy Green | `#273f2b` | `--color-canopy-green` | brand | Dark card surfaces and text on lime controls; supports the brand's forest-green identity. |
| Sage Mist | `#b7bda5` | `--color-sage-mist` | semantic | Muted supporting text on dark surfaces, especially secondary labels and descriptions. |
| Forest Canvas | `#122314` | `--color-forest-canvas` | brand | Opening hero background and deep green section surface; establishes the page's strongest brand field. |
| Olive Text | `#7e8371` | `--color-olive-text` | semantic | Muted text tone on light surfaces for secondary copy and lower-emphasis information. |
| Soft Sage Line | `#d9deca` | `--color-soft-sage-line` | neutral | Subtle borders and hairlines, including outlines around light controls. |
| Linen Green | `#f2f5eb` | `--color-linen-green` | surface | Pale card and button surface that separates product UI from darker surrounding sections. |
| Charcoal Olive | `#30322a` | `--color-charcoal-olive` | semantic | Dark heading and navigation text on white sections; appears as a practical near-black rather than a brand surface. |
| Cool UI Gray | `#dcdfe3` | `--color-cool-ui-gray` | semantic | Minor heading color in measured content; treat as incidental interface or content styling, not a defining brand color. |
| Image Gray | `#d6d6d6` | `--color-image-gray` | semantic | Low-frequency neutral within measured image or gradient content; not a primary page surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#122314` (Forest Canvas) · `--color-surface-2` → `#000000` (Cinema Black) · `--color-surface-3` → `#f2f5eb` (Linen Green) · `--color-surface-4` → `#273f2b` (Canopy Green) · `--color-text` → `#7e8371` (Olive Text) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#b7bda5` (Sage Mist) · `--color-border` → `#d9deca` (Soft Sage Line) · `--color-accent` → `#68ef3f` (Signal Lime) · `--color-on-accent` → `#273f2b` (Canopy Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#7e8371` | `#ffffff` | 3.91:1 | AA-large |
| `#7e8371` | `#122314` | 4.21:1 | AA-large |
| `#7e8371` | `#000000` | 5.37:1 | AA |
| `#7e8371` | `#f2f5eb` | 3.54:1 | AA-large |
| `#ffffff` | `#122314` | 16.45:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#f2f5eb` | 1.1:1 | fail |
| `#b7bda5` | `#ffffff` | 1.94:1 | fail |
| `#b7bda5` | `#122314` | 8.49:1 | AAA |
| `#b7bda5` | `#000000` | 10.84:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgb(39, 63, 43))`
- `linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)), url("https://cdn.prod.website-files.com/678ed5a51cf3c992fa25b232/67e3d7b1751dfd9b1a293d6f_Texture-Home-sectionOro.avif")`
- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))`
- `linear-gradient(45deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.08))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Aeonik | `--font-body` | webfont | 500, 400, 700 | Navigation, body copy, buttons, links, and product-interface labels. | Inter |
| Ozik | `--font-display` | webfont | 700 | Large display and hero headlines, including uppercase campaign-style section titles. | Anton |
| Instrument Serif | `--font-instrument-serif` | webfont | 400 | Occasional editorial subhead or narrative title. | Instrument Serif |

- **Aeonik:** Use clean sans-serif forms with medium navigation and CTA weights; keep sentence case for utility copy.
- **Ozik:** Bold, tightly tracked, condensed uppercase display treatment; preserve the poster-like block silhouette.
- **Instrument Serif:** Use sparingly at regular weight to contrast with the dominant geometric sans and condensed display face.

### Type scale — Augmented Fourth (ratio ≈ 1.38, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 0.9 | -0.01em | uppercase | Ozik | Oversized uppercase campaign headings and high-impact statements. |
| h1 | 56px | 700 | 0.86 | -0.014em | uppercase | Ozik | Hero title and major uppercase section headings. |
| h2 | 40px | 500 | 1.1 | -0.012em | — | Aeonik | Primary section headings and feature-story titles. |
| h3 | 32px | 400 | 1.5 | 0 | — | Instrument Serif | Editorial or narrative subheads, used sparingly. |
| h4 | 24px | 500 | 1.33 | -0.012em | — | Aeonik | Feature-card and content-block headings. |
| body | 16px | 400 | 1.5 | 0 | — | Aeonik | Paragraphs, descriptions, and explanatory product copy. |
| caption | 12px | 400 | 1.67 | 0 | — | Aeonik | Small labels, footnotes, and supporting metadata. |
| nav | 16px | 500 | 1.5 | 0 | — | Aeonik | Header navigation and menu labels. |
| link | 16px | 500 | 1.5 | -0.001em | — | Aeonik | Text links and secondary actions. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 7, 8, 12, 16, 20, 24, 32, 40, 64, 80, 128 px.
- Section rhythm 40px · element gap 8px · card padding 40px · max content width 1360px.

A broad, centered page uses a measured maximum width of 1360px and a compact density within individual modules, while keeping major section bands spacious. The hero is centered and media-led, followed by alternating full-width light and dark zones. Feature narratives often align to the start and use two-column arrangements; proof points use three columns, and customer or security content shifts to asymmetric grids. The measured section gap is 40px, with an 8px base unit and 40px card padding. Preserve large breathing spaces around display titles.

## Shape & elevation

- Radius: button `9999px` · card `9999px` · nav `9999px` · link `9999px` · xs `4px` · sm `12px` · md `16px` · lg `20px` · xl `24px` · pill `9999px`
- Shadow `lg` (section): `rgba(104, 239, 63, 0.4) 0px 4px 40px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The design relies more on contrasting section backgrounds and layered media than on conventional drop shadows. Product cards sit on differentiated dark or pale surfaces, with rounded corners and occasional thin sage borders. A measured lime-tinted large glow appears around a section; reserve it for cinematic emphasis rather than routine card elevation.

## Imagery

The page combines abstract, grainy green 3D forms with tilted contract-interface captures, product UI screenshots, customer photography, and an embedded announcement video. Abstract hero imagery is oversized and partially cropped to create depth, while UI is presented as legible product evidence. Customer photographs remain rectangular and candid. Keep image treatments context-specific: atmospheric gradients and dark overlays for brand storytelling, restrained framing for interfaces.

## Components

### Primary demo CTA

Bright lime pill button with dark green text, medium-weight Aeonik, and compact horizontal padding; use as the clearest action.

### Secondary video CTA

Dark green rounded pill with white text and a play symbol, placed beside the primary demo action.

### Header navigation

Light text or dark text according to the section surface, set in Aeonik; product links are grouped between the logo and account/demo actions.

### Feature card

Rounded dark or pale card that combines a concise title, supporting copy, product capture, and a low-emphasis learn-more action.

### Product showcase

Large contract-management UI capture, sometimes tilted or layered over the hero background to make the software tangible.

### Security tiles

Paired green cards for GDPR and ISO information, using small certification marks, concise headings, and supporting copy.

### Customer story panel

Wide photography-led testimonial with a dark translucent text panel and a lime action control.

### Measured component styles

- **Primary button** (“Schedule a demo”): background #68ef3f · text #273f2b · radius 28px · padding 12px 20px · 500 16px Aeonik
- **Secondary button** (“Watch a video demo”): background #243426 · text #ffffff · radius 28px · padding 12px 20px · 500 16px Aeonik
- **Link** (“Legal team Set up the basic functions of”): transparent background · text #ffffff · radius 24px · padding 256px 8px 8px 8px · 400 16px Aeonik
- **Card** (“GDPR Tomorro complies with all applicabl”): background #273f2b · text #30322a · radius 16px · padding 40px · 400 16px Aeonik
- **Navigation item** (“Oro for Word Product Solutions Pricing R”): transparent background · text #30322a · radius 0px · padding 0px · 400 16px Aeonik

## Do

- Start the hero with a deep forest-green canvas.
- Set display headlines in bold uppercase condensed type.
- Keep lime for primary actions and selective AI emphasis.
- Alternate white editorial areas with dark product-story bands.
- Use real-looking product UI as evidence of the software.
- Keep navigation and body copy clean and readable.
- Give large headlines clear breathing room.

## Don't

- Do not turn every surface lime.
- Do not use generic gradients as a substitute for the dark-green palette.
- Do not apply condensed display type to paragraphs.
- Do not flatten the page into one continuous background color.
- Do not make product cards look like floating dashboard widgets without context.
- Do not crowd section headlines with nearby controls.
- Do not treat image-only gray tones as core brand colors.

## Agent prompt

Build a new SaaS page in Tomorro's visual language. Use Forest Canvas (#122314) for the opening hero and selected dark story bands, with Gallery White (#ffffff) for editorial content. Set high-impact headlines in a bold condensed uppercase display face, and use a clean sans-serif for navigation, body copy, and controls. Make Signal Lime (#68ef3f) the reserved action color, paired with Canopy Green (#273f2b) text; keep secondary copy muted with Sage Mist (#b7bda5) on dark backgrounds. Alternate wide section bands, generous title breathing room, and compact feature modules. Show product UI clearly, mixing it with atmospheric abstract imagery only where appropriate. Use rounded pill actions and cards, subtle sage hairlines, and avoid decorative shadows except for restrained cinematic glow.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered dark-green hero with navigation, headline, paired CTAs, customer logos, and large product imagery. | Primary demo CTA, Video demo link, Customer trust proof | Dark forest canvas, Condensed uppercase headline, Lime action button, Layered product UI |
| 2 | feature-split | Light section with a two-column product feature presentation. | Try feature action, Learn more link | White surface, Product capture, Concise feature copy |
| 3 | feature-grid | Single-column section heading and short overview copy. | Feature discovery | Light canvas, Left-aligned heading |
| 4 | stats | Three-column performance metrics beneath the feature overview. | Quantified product proof | Large numeric callouts, Small explanatory captions |
| 5 | how-it-works | Centered uppercase title followed by four workflow entry points. | Workflow navigation, Lifecycle exploration | Dark visual band, Four-part process labels |
| 6 | feature-grid | Long two-column feature sequence with product captures and supporting text. | Learn more links, Feature-by-feature scanning | Alternating feature panels, Rounded product cards, Dark green surroundings |
| 7 | feature-split | Two-column open-letter panel with narrative copy and atmospheric imagery. | Discover beliefs link | Dark editorial card, Split text and image |
| 8 | video | Full-width black section with centered title and large video player. | Video playback controls | Black canvas, Lime glow, Embedded video |
| 9 | team | Centered section title above three team cards. | Role-based discovery, Card navigation | Customer photography, Rounded image cards, Dark text overlays |
| 10 | feature-split | Left-aligned security copy beside two certification tiles. | Learn more link | Light canvas, Paired green cards, Certification marks |
| 11 | testimonials | Wide photo-led customer story with an overlaid text panel and action. | Watch testimonial | Full-width photography, Dark translucent overlay, Lime CTA |
| 12 | testimonials | Light customer-proof section with a bold display heading and testimonial content. | Customer quote browsing | White canvas, Oversized typographic title, Brand-green accents |

## Source CSS custom properties (selected)

```css
--_fonts---font-family--paragraph: Aeonik,Arial,sans-serif;
--_fonts---font-color--font-grey-dark: #30322a;
--_fonts---font-size--text-size-regular: 1rem;
--_fonts---line-height--text-height-regular: 1.5rem;
--_fonts---font-weight--weight-regular: 400;
--_fonts---font-family--h1: Ozik,Arial,sans-serif;
--_fonts---font-color--font-green-dark: #273f2b;
--_fonts---font-size--h1: 5rem;
--_fonts---line-height--h1: 4.5rem;
--_fonts---font-weight--weight-bold: 700;
--_fonts---font-family--h2: Ozik,Arial,sans-serif;
--_fonts---font-size--h2: 3.5rem;
--_fonts---line-height--h2: 3rem;
--_fonts---font-family--h3: Aeonik,Arial,sans-serif;
--_fonts---font-size--h3: 2.5rem;
--_fonts---line-height--h3: 2.75rem;
--_fonts---font-weight--weight-medium: 500;
--_fonts---font-family--h4: Aeonik,Arial,sans-serif;
--_fonts---font-size--h4: 1.5rem;
--_fonts---line-height--h4: 2rem;
--_fonts---font-family--h5: Aeonik,Arial,sans-serif;
--_fonts---font-size--h5: 1.25rem;
--_fonts---line-height--h5: 1.5rem;
--_fonts---font-family--h6: Aeonik,Arial,sans-serif;
--_fonts---font-size--h6: .75rem;
--_fonts---line-height--h6: 1rem;
--_fonts---font-color--font-green-darklight: #26a200;
--_fonts---font-color--font-white: white;
--brand--grey-900: #30322a;
--brand--green-700: #26a200;
--brand--white: white;
--_fonts---font-size--text-size-tiny: .75rem;
--_fonts---line-height--text-height-tiny: 1.25rem;
--_fonts---font-weight--weight-small: 300;
--_fonts---font-size--text-size-small: .875rem;
--_fonts---line-height--text-height-small: 1.25rem;
--brand--black: #000;
--_fonts---font-size--text-size-large: 1.5rem;
--_fonts---line-height--text-height-large: 2rem;
--_fonts---font-color--font-black: #000;
```

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