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

# Orderful · Design System

> Calm enterprise layouts, energized by signal red.

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

Orderful pairs spacious, editorial typography with modular sections that make a complex B2B EDI platform feel approachable. A vivid red-orange gradient and product-interface imagery supply energy without overwhelming the restrained white-and-gray canvas.

## North star

Keep the page calm and highly legible, using vivid red-orange only to direct attention to action or product proof.

## Overview

The page builds its identity from a mostly white canvas, pale-gray feature bands, and a single deep charcoal network section. Black headlines are large, light, and tightly tracked, while muted gray supporting copy keeps the dense B2B message readable. The primary red-orange CTA is compact and unmistakable; a red-to-orange gradient is reserved for the closing conversion banner and selected product artwork. A wide, centered content frame supports varied layouts: split hero, horizontal logo row, product cards, dark metrics panel, integrations, and testimonial content. Generous gaps between these blocks create a measured rhythm, while card borders and subtle separators define structure without heavy shadows. Imagery is primarily interface-led: partner grids, dashboard-like product panels, company marks, and customer proof. The result feels technical and confident, but remains approachable through simple geometry, restrained color, and clear CTA hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, cards, logo strip, and most content sections; also used for text on dark surfaces. |
| Ink | `#000000` | `--color-ink` | neutral | Primary headlines, navigation, body emphasis, and dark secondary buttons. |
| Soft Mist | `#f5f5f5` | `--color-soft-mist` | surface | Hero backdrop, alternate section bands, and pale footer legal area. |
| Action Vermilion | `#e42b0c` | `--color-action-vermilion` | brand | Primary demo and submit buttons, with white button text. |
| Slate Copy | `#4a5565` | `--color-slate-copy` | neutral | Supporting copy, secondary navigation, and subdued footer links. |
| Signal Red | `#ff0201` | `--color-signal-red` | accent | Red stop in the vivid brand gradient, used in closing CTA and interface artwork. |
| Cool Divider | `#d1d5dc` | `--color-cool-divider` | neutral | Input outlines and fine component borders. |
| Bright Tangerine | `#ff7802` | `--color-bright-tangerine` | accent | Orange stop in the red-orange gradient, most visible on the closing CTA and product illustrations. |
| Graphite | `#1f1f1f` | `--color-graphite` | surface | Full-width network section and dark metric cards, contrasted with white text. |
| Dusty Slate | `#6a7282` | `--color-dusty-slate` | neutral | Occasional secondary text; a minor measured text color, not a defining brand surface. |
| Quiet Gray | `#8a8a8a` | `--color-quiet-gray` | neutral | Minor subdued text in content; use sparingly for low-emphasis details. |
| Pale Rule | `#e5e7eb` | `--color-pale-rule` | neutral | Occasional fine separators; subordinate to the more frequently measured cool divider. |
| Deep Navy Ink | `#101828` | `--color-deep-navy-ink` | neutral | Minor heading color occurrence; the page's dominant heading treatment is black. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Mist) · `--color-surface-2` → `#1f1f1f` (Graphite) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#4a5565` (Slate Copy) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d1d5dc` (Cool Divider) · `--color-accent` → `#ff0201` (Signal Red) · `--color-accent-2` → `#e42b0c` (Action Vermilion) · `--color-accent-3` → `#ff7802` (Bright Tangerine) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#000000` | `#1f1f1f` | 1.27:1 | fail |
| `#4a5565` | `#ffffff` | 7.56:1 | AAA |
| `#4a5565` | `#f5f5f5` | 6.93:1 | AA |
| `#4a5565` | `#1f1f1f` | 2.18:1 | fail |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#1f1f1f` | 16.48:1 | AAA |
| `#ff0201` | `#ffffff` | 3.99:1 | AA-large |
| `#ff0201` | `#f5f5f5` | 3.66:1 | AA-large |

### Gradients

- `linear-gradient(94deg, rgb(255, 2, 1) -33.85%, rgb(255, 120, 2) -1.54%, rgb(255, 2, 1) 73.55%)`
- `linear-gradient(to right in oklab, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to left in oklab, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) 8px, rgb(245, 245, 245) 8px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| telegraf | `--font-body` | webfont | 400, 300, 100, 500, 600, 700 | Main display and interface type across headings, body copy, navigation, and buttons. | DM Sans |
| modernGothic | `--font-moderngothic` | webfont | 300 | Occasional uppercase AI-native EDI link or label. | Space Mono |

- **telegraf:** Use light weights for large headlines, regular body copy, and compact uppercase CTA labels; display headings use tight negative tracking.
- **modernGothic:** A minor, light-weight label treatment; keep it distinct from the main Telegraf system.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 300 | 1 | -0.03em | — | telegraf | Large, light display headlines for prominent page statements. |
| h1 | 60px | 100 | 1 | -0.025em | — | telegraf | Main hero headline and primary page-level heading. |
| h2 | 48px | 100 | 1 | -0.025em | — | telegraf | Major section titles such as product, network, and customer headings. |
| h3 | 30px | 300 | 1.38 | 0 | — | telegraf | Subsection headings and product or business-category titles. |
| h4 | 24px | 400 | 1.33 | -0.03em | — | telegraf | Compact card titles and supporting feature headings. |
| body | 14px | 400 | 1.63 | 0 | — | telegraf | Descriptions, explanatory paragraphs, and testimonial copy. |
| caption | 12px | 400 | 1.33 | 0 | — | telegraf | Small supporting labels, footnotes, and secondary metadata. |
| button | 14px | 400 | 1.43 | 0 | — | telegraf | CTA labels and other button text, commonly uppercase. |
| nav | 14px | 400 | 1.43 | 0 | — | Telegraf | Top navigation labels and links. |

OpenType features in use: `"case"`, `"ss02"`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 64 px.
- Section rhythm 48px · element gap 16px · card padding 24px · max content width 1280px.

Use a centered, wide content frame with a measured maximum width of 1280px. Build sections from simple columns: a split hero, horizontal logo row, product-card grid, dark metrics band, integration panel, and customer proof. Alternate white and pale-gray bands sparingly, with one charcoal feature section and a vivid closing CTA. Align headings to the left in editorial and proof sections, center the product introduction, and keep cards and interface details neatly grouped. The measured spacing system is comfortable, with consistent gaps and section breathing room rather than dense stacking.

## Shape & elevation

- Radius: button `6px` · input `4px` · card `8px` · media `8px` · xs `4px` · sm `6px` · md `8px`
- Shadow `sm` (card, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2`
- Shadow `inset` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(243, 43, 9, 0.4) 0px 0px 20px 0px inset`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: white and pale-gray bands, thin borders, and clear changes in surface color do most of the structural work. Cards have restrained rounding, with little or no visible shadow. Layer interface imagery and logos within their containers rather than adding ornamental depth; the dark network block and gradient CTA provide the strongest visual separation.

## Imagery

Prioritize crisp product-interface visuals: partner selection grids, compliance panels, product cards, and ecosystem logos. Pair these with customer marks and restrained portrait or case-study imagery where relevant. Product illustrations use vivid red-orange accents, but those hues inside illustrations should not become extra page-wide color fields. Keep images neatly framed within the modular layout, with minimal decorative effects.

## Components

### Primary demo button

Compact red-orange button with white uppercase Telegraf text, a fine matching border, and lightly rounded corners.

### Dark secondary button

Black button with white uppercase text, matching the primary CTA's compact, rounded shape.

### Top navigation

A horizontal row of compact links and separated light panels, with a vivid gradient treatment for the prominent get-started action.

### Product cards

White cards group a small icon, heading, short explanation, link, and warm product-interface artwork.

### Network metrics panel

Charcoal section with introductory copy and a horizontal row of bordered metric cells, followed by contrasting actions.

### Newsletter form

Simple email input with a fine cool-gray outline and a red-orange submit button.

### Closing CTA banner

Full-width red-to-orange gradient block with centered light headline, brief subline, and a compact dark button.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #e42b0c · text #ffffff · border 1px solid #e42b0c · radius 6px · padding 12px 24px · 500 14px telegraf · uppercase
- **Secondary button** (“VIEW SUCCESS STORIES”): background #000000 · text #ffffff · border 1px solid #000000 · radius 6px · padding 12px 24px · 500 14px telegraf · uppercase
- **Link** (“🪄 AI-NATIVE EDI”): transparent background · text #000000 · radius 0px · padding 12px · 300 14px modernGothic · uppercase
- **Input**: transparent background · text #000000 · border 1px solid #d1d5dc · radius 4px · padding 16px · 400 12px telegraf · uppercase
- **Card** (“70% Reduction in EDI Costs”): background #ffffff · text #000000 · radius 8px · padding 24px · 400 16px telegraf
- **Navigation item** (“Platform”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Telegraf

## Do

- Keep the main canvas white and the alternate bands pale gray.
- Use black for prominent headings and muted slate for explanatory copy.
- Reserve red-orange for primary actions and selective product emphasis.
- Give large headings a light weight and tight tracking.
- Use modular cards and clear column groupings for product details.
- Make the network metrics section distinctly charcoal.
- Leave generous visual breathing room between major blocks.

## Don't

- Do not add unmeasured colors to the brand palette.
- Do not fill every section with gradients or saturated color.
- Do not use heavy shadows to define cards.
- Do not crowd supporting copy against large headlines.
- Do not turn customer logos or interface artwork into background decoration.
- Do not use bold, dense display typography in place of the measured light headline style.

## Agent prompt

Build a new B2B SaaS page in Orderful's restrained, modular visual style. Use Gallery White (#ffffff) as the main canvas, Soft Mist (#f5f5f5) for occasional section bands, and Ink (#000000) for large, light-weight headlines. Set supporting copy in Slate Copy (#4a5565). Use Action Vermilion (#e42b0c) for the primary CTA; reserve Signal Red (#ff0201) and Bright Tangerine (#ff7802) together for a selective gradient moment, not broad page fills. Structure content in a wide centered frame with clear columns, generous breathing room, thin Cool Divider (#d1d5dc) rules, and mostly flat cards. Add one Graphite (#1f1f1f) proof or metrics section. Use product-interface imagery and customer marks as contained proof. Maintain clear hierarchy, compact uppercase buttons, and simple, readable interactions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero with left-aligned message and CTA beside a large product-interface visual. | Primary demo CTA, Value proposition | Pale-gray band, Large light headline, Product interface art |
| 2 | logo-cloud | Single horizontal logo row beneath a short left-aligned heading. | Customer trust proof | White surface, Monochrome brand marks, Open spacing |
| 3 | reviews | Copy and CTA on the left, award badges arranged in a row on the right. | Success-story link, Third-party proof | Small eyebrow, Award badge row, Black CTA |
| 4 | feature-grid | Centered section introduction above three product cards in a grid. | Product discovery, Learn-more links | White cards, Icon and text hierarchy, Warm product artwork |
| 5 | stats | Dark full-width band with introduction and horizontally aligned metric cards. | Network credibility, Metrics proof, Follow-up actions | Charcoal surface, Fine card outlines, Light text |
| 6 | integrations | Text and CTA on the left, integration categories and partner marks on the right. | Integration discovery, Talk-to-expert CTA | White surface, Grouped platform logos, Dark category labels |
| 7 | testimonials | Editorial testimonial and customer details paired with a large customer-themed image. | Rotating case studies, Read-case-study link, Outcome metrics | Large section heading, Image-led proof, Compact metric row |
| 8 | category-nav | Business-type selector with a prominent content panel and adjacent vertical category tabs. | Category selection, Demo CTA | Tabbed labels, Industry-specific image, Outlined secondary link |
| 9 | cta | Full-bleed gradient band with centered message and compact button. | Closing conversion CTA | Red-orange gradient, Centered light text, Dark button |
| 10 | footer | Multi-column footer with brand mark and grouped link lists. | Grouped navigation, Resource discovery | White surface, Small headings, Compact link columns |
| 11 | newsletter | Newsletter message and email form alongside social links and small brand graphics. | Email signup, Social links | Outlined input, Red-orange submit button, Open white layout |
| 12 | footer | Low-emphasis legal links and copyright in a full-width pale-gray band. | Policy navigation, Copyright notice | Pale-gray surface, Small muted text, Minimal row |

## Source CSS custom properties (selected)

```css
--color-brand-orange: #f32b09;
--color-brand-green: #00e15e;
--color-brand-orange-700: color-mix(in srgb, #f32b09 85%, white);
--color-brand-orange-500: color-mix(in srgb, #f32b09 65%, white);
--color-brand-orange-300: color-mix(in srgb, #f32b09 45%, white);
--color-brand-orange-100: color-mix(in srgb, #f32b09 25%, white);
--color-black: #000;
--color-white: #fff;
--color-dark-gray: #1f1f1f;
--color-light-gray: #f5f5f5;
--color-grey-900: #1f1f1f;
--color-grey-700: #525252;
--color-grey-600: #676767;
--color-grey-400: #8a8a8a;
--color-grey-200: #e6e6e6;
--color-grey-100: #f7f7f7;
--color-text: #000;
--color-text-secondary: #676767;
--color-text-tertiary: #ababab;
--color-stroke-light: #ebebeb;
--color-stroke-dark: #3b3b3b;
--color-stroke-medium: #4a4a4a;
--color-primary: #e42b0c;
--color-primary-hover: #c5280d;
--color-primary-foreground: #fff;
--color-background: #fff;
--color-background-alt: #f5f5f5;
--color-compliance-red: #e42b0c;
--color-compliance-red-dark: #c5280d;
--color-success-green-light: #1ca313;
--color-success-green-dark: #48f33b;
--color-transparent-white-8: #ffffff14;
--color-transparent-white-24: #ffffff3d;
--color-transparent-black-8: #00000014;
--color-transparent-black-24: #0000003d;
--font-size-h1: 92px;
--font-size-h2: 72px;
--font-size-h3: 56px;
--font-size-h4: 48px;
--font-size-h5: 32px;
```

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