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

# Radiant — AI Infrastructure Platform · Design System

> Industrial infrastructure, illuminated by signal orange.

**Theme:** dark · **Industry:** ai · **Source:** https://radiant.co/ori · **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._

Radiant presents its AI infrastructure platform through a cinematic black canvas, vivid orange signals, and confident editorial typography. Alternating technical imagery and restrained information blocks make its capabilities feel substantial, while the FAQ and news feed give the long page practical depth.

## North star

Use a black editorial canvas, orange only for meaningful signals, and crisp off-white blocks to organize technical content.

## Overview

The visual strategy is built around a near-black canvas (#000000) that lets the facility imagery and orange accents read with force. The warm orange (#ff4f2b) is reserved for the hero’s emphasized words, primary actions, section interlude, and select links rather than used as general decoration. Pale off-white (#f5f5f5) creates a decisive contrast in the FAQ and feature title bands; muted gray supports secondary copy and hairlines. Large, light TWK Everett headings establish an editorial voice, while Switzer keeps paragraphs clear and Chivo Mono gives navigation, labels, and calls to action a technical, uppercase register. The page alternates a two-column hero and capability sections with full-width image treatments, then shifts into a light FAQ before returning to a dark news feed and footer. Spacious section breaks coexist with dense, carefully aligned content. Realistic infrastructure, chips, and interface imagery carry the story; the visual system itself stays flat and restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Black | `#000000` | `--color-foundry-black` | brand | Primary page canvas and dark feature, hero, news, and footer backgrounds. |
| Signal Chalk | `#f5f5f5` | `--color-signal-chalk` | surface | FAQ surface, feature title bands, and primary text on dark sections. |
| Quiet Alloy | `#bfbfbf` | `--color-quiet-alloy` | neutral | Secondary copy and subdued borders or dividers on dark surfaces. |
| Signal Orange | `#ff4f2b` | `--color-signal-orange` | accent | Hero emphasis, orange interlude, primary buttons, hover links, and select section details. |
| Graphite Line | `#3c3c3c` | `--color-graphite-line` | semantic | Measured dark border detail; use sparingly for subtle outlines and separators. |
| Burnt Signal | `#cc3f22` | `--color-burnt-signal` | semantic | Secondary orange-toned border detail; retain only for understated accent states. |
| Carbon Panel | `#1f1f1f` | `--color-carbon-panel` | surface | Dark secondary surface for form inputs and small controls against black. |
| Ash Label | `#737373` | `--color-ash-label` | neutral | Low-emphasis footer text and subtle secondary borders. |

### Semantic aliases

`--color-canvas` → `#000000` (Foundry Black) · `--color-surface` → `#f5f5f5` (Signal Chalk) · `--color-text` → `#f5f5f5` (Signal Chalk) · `--color-text-muted` → `#000000` (Foundry Black) · `--color-text-subtle` → `#bfbfbf` (Quiet Alloy) · `--color-border` → `#bfbfbf` (Quiet Alloy) · `--color-accent` → `#ff4f2b` (Signal Orange) · `--color-on-accent` → `#000000` (Foundry Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f5f5f5` | `#000000` | 19.26:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |
| `#bfbfbf` | `#000000` | 11.42:1 | AAA |
| `#bfbfbf` | `#f5f5f5` | 1.69:1 | fail |
| `#ff4f2b` | `#000000` | 6.41:1 | AA |
| `#ff4f2b` | `#f5f5f5` | 3.01:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 400 | Paragraphs, general interface text, and standard links. | Inter |
| TWK Everett | `--font-display` | webfont | 400, 300, 700 | Display headlines and section headings. | Inter |
| Chivo Mono | `--font-mono` | webfont | 400 | Navigation, labels, code-like details, and primary action text. | IBM Plex Mono |

- **Switzer:** Keep body copy regular and readable; avoid adding conspicuous tracking.
- **TWK Everett:** Use light display weights for the hero and restrained regular weights for section titles.
- **Chivo Mono:** Use uppercase for navigation and labels; preserve the technical monospaced contrast.

### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.95 | 0 | — | TWK Everett | Oversized hero or statement headline. |
| h1 | 72px | 300 | 1 | 0 | — | TWK Everett | Primary hero headline. |
| h2 | 60px | 400 | 1 | 0 | — | TWK Everett | Major section headings, including FAQ and news. |
| h3 | 48px | 400 | 1.1 | 0 | — | TWK Everett | Feature or subsection headings. |
| h4 | 36px | 400 | 1.2 | -0.011em | — | TWK Everett | Smaller feature and editorial headings. |
| body | 18px | 400 | 1.4 | 0 | — | Switzer | Main descriptive paragraphs and explanatory copy. |
| caption | 16px | 400 | 1.4 | 0 | — | Switzer | Compact supporting labels and secondary text. |
| nav | 16px | 400 | 1.4 | 0 | uppercase | Chivo Mono | Uppercase navigation items and utility links. |
| code | 16px | 400 | 1.4 | 0 | uppercase | Chivo Mono | Uppercase technical labels and mono interface details. |

## Spacing & layout

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

The desktop page uses a wide, centered content area with a measured maximum width of 1280px and a comfortable density. The hero is a two-column composition with text aligned left over dark facility imagery. Capability content alternates numbered off-white title bands with two-column image-and-copy sections. An orange full-width interlude breaks the dark sequence. The FAQ shifts to a light two-column layout; news uses three columns, and the footer organizes links and subscription content into columns. Section spacing is generous, with consistent alignment and thin rules.

## Shape & elevation

- Shadow `sm` (footer): `rgb(128, 128, 128) 0px 0px 5px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is mostly flat: rely on large color fields, image contrast, and hairline dividers rather than cards with visible depth. Borders are thin and subdued on black, and the FAQ uses rules to separate answers. The measured small footer shadow is incidental; avoid introducing prominent shadows or rounded card treatments.

## Imagery

Use cinematic, realistic infrastructure imagery: dark data-center interiors, server equipment, chips, and clean product-interface captures. Feature visuals occupy generous areas alongside explanatory copy, with warm amber reflections and deep shadows that sit naturally against the black canvas. News thumbnails add more varied textures and close-up subjects. Avoid decorative illustration as the main visual language; the measured orange-heavy palette and screenshot colors inside imagery should not be mistaken for additional brand colors.

## Components

### Announcement and navigation

A slim merger announcement sits above a dark horizontal navigation bar. Set the announcement in clear sans-serif text with an orange linked phrase; use uppercase mono labels for primary navigation.

### Hero

Pair an oversized, left-aligned statement with concise supporting paragraphs and two compact actions over a dark industrial image. Use orange to emphasize selected headline words and the primary action.

### Orange statement band

A full-width orange break carries a centered dark statement, framed with minimal rules and small plus/minus-style details.

### Numbered capability sections

Each capability pairs a pale title strip and right-aligned two-digit index with dark, two-column explanatory content and a large technical image.

### FAQ

A pale two-column section places a large heading opposite numbered questions and compact answers, separated by fine horizontal rules.

### News feed

A dark section presents a heading and orange mono view-all link above three image-led article columns with concise metadata and excerpts.

### Newsletter footer

A dark multi-column footer combines a prominent wordmark, grouped navigation links, social links, and a compact form with dark inputs and an orange submit button.

### Measured component styles

- **Primary button** (“Submit”): background #ff4f2b · text #000000 · radius 0px · padding 16px · 400 16px Chivo Mono · uppercase
- **Link** (“Agentic AI May Finally Be Here. It Is Ch”): transparent background · text #f5f5f5 · radius 0px · padding 0px · 400 16px Switzer
- **Input**: background #1f1f1f · text #f5f5f5 · radius 0px · padding 16px · 400 14px Chivo Mono · uppercase
- **Navigation item** (“Ori has merged with Brookfield-backed Ra”): transparent background · text #f5f5f5 · radius 0px · padding 0px · 400 16px Switzer

## Do

- Anchor the design on Foundry Black (#000000).
- Reserve Signal Orange (#ff4f2b) for meaningful emphasis and actions.
- Use Signal Chalk (#f5f5f5) for clear inverse section surfaces and text.
- Pair editorial display headlines with readable sans-serif body copy.
- Set navigation and technical labels in uppercase mono styling.
- Give infrastructure imagery generous space and deep, natural contrast.
- Use thin rules and broad section bands to structure long content.

## Don't

- Do not turn orange into a general-purpose background color across every section.
- Do not use rounded, elevated cards as the dominant layout treatment.
- Do not add gradients or decorative effects absent from the measured style.
- Do not let secondary gray copy compete with the headline or CTA.
- Do not replace realistic technical imagery with playful illustration.
- Do not make every heading uppercase or monospaced.
- Do not compress the page into tightly stacked, dense blocks.

## Agent prompt

Build a new Radiant-style page with a cinematic, technical editorial feel. Use Foundry Black (#000000) as the main canvas, Signal Chalk (#f5f5f5) for contrast sections and primary text, Quiet Alloy (#bfbfbf) for muted copy, and Signal Orange (#ff4f2b) only for selected emphasis, links, and primary actions. Create large light-weight TWK Everett-like headlines, readable Switzer-like paragraphs, and uppercase Chivo Mono-like navigation and labels. Organize content in a wide centered grid with a left-aligned hero, generous section breaks, alternating image-and-copy feature areas, and occasional pale or orange full-width bands. Favor realistic data-center, compute, and product imagery. Keep components flat, use delicate dividers, and avoid decorative shadows or excessive rounded cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark two-column hero with left-aligned headline and copy over facility imagery. | announcement link, primary and secondary actions | dark canvas, orange headline emphasis, mono CTA labels |
| 2 | other | Full-width orange band with centered statement and minimal framing. | brand proposition | orange surface, dark centered type, fine framing rules |
| 3 | feature-split | Pale numbered title strip followed by a dark two-column feature section. | capability explanation | large interface image, numbered heading, dark background |
| 4 | feature-split | Numbered light title band above dark copy-and-image feature layout. | capability explanation | hardware imagery, two-column content, section index |
| 5 | feature-split | Numbered pale heading band followed by dark text and facility imagery. | capacity information | facility photograph, two-column feature, numbered title |
| 6 | feature-split | Pale title strip above a dark two-column section with infrastructure imagery. | credibility context | server imagery, two-digit index, dark feature panel |
| 7 | faq | Light two-column block with heading at left and numbered questions at right. | scannable answers, expandable-question cues | off-white surface, fine separators, small orange controls |
| 8 | content-feed | Dark editorial feed with a heading, view-all link, and three article columns. | view all link, article discovery | image-led columns, orange mono links, dark background |
| 9 | footer | Dark multi-column footer with wordmark, grouped links, and newsletter form. | newsletter signup, site navigation | compact dark inputs, orange submit button, small mono labels |

## Source CSS custom properties (selected)

```css
--_color-themes---background-color--background-main: black;
--font-family--paragraphs: Switzer,Arial,sans-serif;
--_color-themes---text-color--text-primary: whitesmoke;
--_typography---text-size-regular--text-size: 1rem;
--_typography---text-size-regular--line-height: 1.4;
--font-family--headings: "TWK Everett",Arial,sans-serif;
--_typography---heading-size-h1--text-size: 6rem;
--_typography---heading-size-h2--text-size: 4.5rem;
--_typography---heading-size-h3--text-size: 3.75rem;
--_typography---heading-size-h4--text-size: 3rem;
--_typography---heading-size-h5--text-size: 2.25rem;
--_typography---heading-size-h6--text-size: 2rem;
--_color-themes---link-color--link-default: whitesmoke;
--_color-themes---link-color--link-hover: #ff4f2b;
--_typography---text-size-medium--text-size: 1.125rem;
--_typography---text-size-medium--line-height: 1.4;
--text-size-medium--tablet<deleted|variable-94be4a18-8e44-b6c7-8cb8-d1efc55a7654>: 1.25rem;
--text-size-medium--mobile<deleted|variable-8b213d4f-fca6-bae4-4ee6-8e3ce0f0331c>: 1.25rem;
--styleguide-colors--empty-box-background: #ff4f2b26;
--_color-themes---text-color--text-secondary: #bfbfbf;
--_color-themes---background-color--background-secondary: #1f1f1f;
--font-family--labels: "Chivo Mono",sans-serif;
--_typography---text-size-label--text-size: .875rem;
--_typography---text-size-large--text-size: 1.25rem;
--base--brand-orange: #ff4f2b;
--_color-themes---text-color--text-alternate: #737373;
--_typography---text-size-small--desktop: .875rem;
--_color-themes---border-color--border-secondary: #737373;
--styleguide-colors--empty-box-border: #ff4f2b73;
--_color-themes---form--label-color: #bfbfbf;
--_color-themes---form--input-border-default: #1f1f1f;
--_color-themes---form--input-default: #1f1f1f;
--_color-themes---form--font-color: whitesmoke;
--_color-themes---form--input-border-hover: #3c3c3c;
--_color-themes---form--input-hover: #1f1f1f;
--_color-themes---form--input-border-focus: #737373;
--_color-themes---form--input-focus: #1f1f1f;
--_color-themes---form--placeholder-color: #737373;
--_typography---text-size-xlarge--text-size: 1.5rem;
--_typography---text-size-xlarge--line-height: 1.3;
```

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