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

# Ciridae · Design System

> Warm editorial design for AI-powered operations

**Theme:** light · **Industry:** ai · **Source:** https://ciridae.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._

Ciridae presents its AI-enabled business systems through a restrained editorial layout, alternating warm light sections with cinematic dark media. Condensed headlines, monospaced labels, fine rules, and process diagrams make the service feel both human and operational.

## North star

Pair warm editorial restraint with precise operational diagrams, using typography and fine rules—not decorative effects—to organize the story.

## Overview

The page is built around a warm parchment canvas, #eae1ce, and clean near-white section bands, #fcfbf8, with deep charcoal media and footer sections creating strong visual pauses. Near-black #14110d carries most headings and body copy, while muted earth tones support secondary information and thin dividers. A small burnt-orange accent, #cc6437, marks the primary light-theme CTA rather than becoming a broad decorative color. Pragmatica Cond gives the large, compact headlines an editorial profile; Pragmatica handles readable body copy, and ABC Monument Grotesk Mono supplies uppercase navigation, labels, and actions. The composition moves between full-bleed hero video, spacious statement bands, a two-column operating-system diagram, a three-step process, customer marks, and testimonial cards. Most sections remain flat and square-edged, using hairlines instead of shadows. Repeated rules, compact metadata, and aligned grids lend structure without making the page feel dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Parchment Field | `#eae1ce` | `--color-parchment-field` | brand | Main warm canvas for the operating-system showcase, customer band, and selected cards. |
| Carbon Night | `#0b0b0b` | `--color-carbon-night` | surface | Deep footer and inverse surface; anchors the closing brand statement and navigation. |
| Soft Ink | `#14110d` | `--color-soft-ink` | semantic | Primary text and dark surfaces, including headings, links, navigation, and dark CTA treatment. |
| Earth Shadow | `#37332a` | `--color-earth-shadow` | semantic | Muted supporting text and secondary footer information against light backgrounds. |
| Burnt Signal | `#cc6437` | `--color-burnt-signal` | accent | Primary CTA fill and restrained emphasis; used sparingly against light sections. |
| Oat Milk | `#f7f2e7` | `--color-oat-milk` | surface | Light text on dark surfaces and a softly tinted closing CTA section. |
| Gallery White | `#fcfbf8` | `--color-gallery-white` | surface | Clean section bands behind the introduction, process, and partner testimonials. |
| Charcoal Mist | `#272a2a` | `--color-charcoal-mist` | neutral | Upper tone in the dark radial media treatment; not a primary interface surface. |
| Warm Divider | `#bab3a4` | `--color-warm-divider` | semantic | Fine borders and card or section separators on warm light surfaces. |
| Stone Type | `#d3cec4` | `--color-stone-type` | neutral | Subdued text detail, useful for low-emphasis annotations rather than primary copy. |
| Pale Rule | `#c9c8c5` | `--color-pale-rule` | neutral | Card outlines and subtle interface details; secondary to the warmer border tone. |
| Chalk Light | `#efede7` | `--color-chalk-light` | neutral | Light navigation and button text on dark backgrounds, plus small muted details. |
| Olive Taupe | `#5b5548` | `--color-olive-taupe` | neutral | Occasional subdued heading or body detail within the warm palette. |
| Graphite Line | `#3d3d3c` | `--color-graphite-line` | neutral | Low-emphasis text and border detail, chiefly in dark or footer contexts. |
| Quiet Ash | `#aaa69d` | `--color-quiet-ash` | neutral | Faint supporting text detail; reserve for secondary labels, not key information. |

### Semantic aliases

`--color-canvas` → `#eae1ce` (Parchment Field) · `--color-surface` → `#0b0b0b` (Carbon Night) · `--color-surface-2` → `#fcfbf8` (Gallery White) · `--color-surface-3` → `#14110d` (Soft Ink) · `--color-surface-4` → `#f7f2e7` (Oat Milk) · `--color-text` → `#14110d` (Soft Ink) · `--color-text-muted` → `#37332a` (Earth Shadow) · `--color-text-subtle` → `#f7f2e7` (Oat Milk) · `--color-border` → `#bab3a4` (Warm Divider) · `--color-accent` → `#cc6437` (Burnt Signal) · `--color-on-accent` → `#14110d` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#14110d` | `#eae1ce` | 14.48:1 | AAA |
| `#14110d` | `#0b0b0b` | 1.05:1 | fail |
| `#14110d` | `#fcfbf8` | 18.19:1 | AAA |
| `#37332a` | `#eae1ce` | 9.68:1 | AAA |
| `#37332a` | `#0b0b0b` | 1.56:1 | fail |
| `#37332a` | `#fcfbf8` | 12.16:1 | AAA |
| `#37332a` | `#14110d` | 1.5:1 | fail |
| `#f7f2e7` | `#eae1ce` | 1.16:1 | fail |
| `#f7f2e7` | `#0b0b0b` | 17.63:1 | AAA |
| `#f7f2e7` | `#fcfbf8` | 1.08:1 | fail |

### Gradients

- `radial-gradient(at 50% 0%, rgb(39, 42, 42) 0%, rgb(11, 11, 11) 78%)`
- `repeating-linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) calc(25% - 1px), color(srgb 0.0784314 0.0666667 0.0509804 / 0.22) calc(25% - 1px), color(srgb 0.0784314 0.0666667 0.0509804 / 0.22) 25%)`
- `repeating-linear-gradient(to right, color(srgb 0.0784314 0.0666667 0.0509804 / 0.1364) 0px, color(srgb 0.0784314 0.0666667 0.0509804 / 0.1364) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 12px), repeating-linear-gradient(`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Pragmatica | `--font-body` | webfont | 400 | Body copy, section headings, and readable testimonial content. | Inter |
| ABC Monument Grotesk Mono | `--font-mono` | webfont | 400 | Navigation, CTA labels, links, eyebrows, and compact technical metadata. | Space Mono |
| Pragmatica Cond | `--font-display` | webfont | 400 | Display headlines, hero copy, compact captions, and selected action labels. | Barlow Condensed |
| Roboto Mono | `--font-roboto-mono` | webfont | 400 | Minor mono fallback for small technical details. | Space Mono |

- **Pragmatica:** Regular weight throughout; use compact negative tracking for larger headings and comfortable leading for paragraphs.
- **ABC Monument Grotesk Mono:** Regular monospaced uppercase; use visibly tracked labels and concise, utility-like phrasing.
- **Pragmatica Cond:** Regular weight with tight leading; use uppercase for display and selected labels, with closely tracked large headings.
- **Roboto Mono:** Measured as a small share; retain the same restrained monospaced, tracked-label character.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 104px | 400 | 0.88 | -0.02em | uppercase | Pragmatica Cond | Oversized uppercase hero statement and prominent brand messaging. |
| h1 | 64px | 400 | 0.96 | -0.046em | — | Pragmatica Cond | Primary hero or major section headline. |
| h2 | 48px | 400 | 1 | -0.042em | — | Pragmatica | Main section headings, including the operating-system story. |
| h3 | 36px | 400 | 1.25 | -0.034em | — | Pragmatica | Process and supporting editorial headings. |
| h4 | 32px | 400 | 1.04 | -0.02em | uppercase | Pragmatica Cond | Compact uppercase subsection headings. |
| body | 16px | 400 | 1.55 | 0 | — | Pragmatica | Paragraphs describing the service, process, and outcomes. |
| caption | 14px | 400 | 1.43 | 0 | — | Pragmatica Cond | Small supporting copy and diagram annotations. |
| button | 11px | 400 | 1.1 | 0.06em | uppercase | ABC Monument Grotesk Mono | Uppercase CTA labels in monospaced styling. |
| nav | 12px | 400 | 1.5 | 0.04em | uppercase | ABC Monument Grotesk Mono | Compact uppercase primary navigation labels. |
| link | 13px | 400 | 1.3 | 0.06em | uppercase | ABC Monument Grotesk Mono | Tracked uppercase text links and inline actions. |
| eyebrow | 11px | 400 | 1.35 | 0.08em | uppercase | ABC Monument Grotesk Mono | Small uppercase section and process pre-labels. |
| code | 11px | 400 | 1.35 | 0.08em | uppercase | ABC Monument Grotesk Mono | Technical micro-labels and diagram-style metadata. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 5, 6, 8, 10, 12, 16, 18, 20, 24, 32, 40, 43, 48, 64 px.
- Section rhythm 128px · element gap 12px · card padding 32px · max content width 1258px.

Use a centered page frame with a measured maximum width of 1258px and a spacious section rhythm. Alternate full-width color bands with contained, aligned content. The operating-system feature pairs a large diagram area with explanatory steps; the process section uses three columns, while customer marks and testimonials form orderly grids. Headlines align left in editorial sections, with centered messaging reserved for the hero and select statements. Use generous breathing room, consistent hairline dividers, and compact mono labels to balance the expansive sections.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.14s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The interface is predominantly flat: section color changes, hairline borders, and carefully aligned rules define structure. Cards are square-cornered and outlined rather than lifted with shadows. Dark sections use tonal gradients or media texture for depth, while orange is a small functional accent, not a glow or decorative layer.

## Imagery

Lead with full-bleed, dark, softly blurred video imagery, treated as atmosphere behind the centered hero message rather than as a conventional product shot. Use fine-line isometric system diagrams to explain workflows, with restrained orange emphasis inside the illustration. Customer marks and partner identity graphics sit in tidy rows; testimonial cards remain typographic. Keep media understated and diagrammatic, with no glossy 3D treatment or heavy image frames.

## Components

### Primary CTA

A square-cornered burnt-orange button with near-black uppercase monospaced text; use for the prominent team-contact action on light surfaces.

### Inverse CTA

Dark-filled button with pale text and a fine dark border; keep its label uppercase and monospaced.

### Outlined inverse link

Pale outlined pill action on the dark footer, paired with a second compact action and no shadow.

### Operating-system diagram

Warm-canvas, two-column feature: isometric workflow illustration alongside a numbered list of operational steps, separated by fine rules.

### Process timeline

Three horizontally aligned milestones, from three days to three months, with small diagram illustrations and concise explanatory copy.

### Testimonial card

Square-cornered, lightly bordered card with a tracked sequence label, prominent quote, divider, and compact partner attribution.

### Section navigation

Uppercase monospaced links arranged in compact groups, with restrained color contrast and thin separators in the footer.

### Measured component styles

- **Primary button** (“TALK TO OUR TEAM”): background #cc6437 · text #14110d · border 1px solid #cc6437 · radius 0px · padding 16px 24px · 400 13px ABC Monument Grotesk Mono · uppercase
- **Secondary button** (“TALK TO US”): transparent background · text #efede7 · border 1px solid #efede7 · radius 1440px · padding 10px 18px · 400 14px Pragmatica Cond
- **Link** (“Knight Commercial”): transparent background · text #14110d · radius 0px · padding 0px · 400 14px Pragmatica Cond
- **Card** (“02 / 04 What sets Ciridae apart is how f”): background #eae1ce · text #14110d · border 1px solid #c9c8c5 · radius 0px · padding 32px · 400 14px Pragmatica Cond
- **Navigation item** (“CONSTRUCTION”): transparent background · text #efede7 · radius 0px · padding 0px · 400 12px ABC Monument Grotesk Mono · uppercase

## Do

- Alternate parchment, gallery-white, and dark bands to pace the story.
- Reserve burnt orange for the primary light-surface action and small diagram accents.
- Use condensed display type for impactful headlines and Pragmatica for reading copy.
- Set navigation, eyebrows, and CTA labels in tracked uppercase mono.
- Use fine borders and aligned rules to divide content instead of shadows.
- Explain product value with restrained diagrams and numbered process steps.

## Don't

- Do not turn the orange accent into a large background color.
- Do not add drop shadows or rounded cards to the flat editorial system.
- Do not crowd section transitions with dense copy or decorative elements.
- Do not style every heading in monospaced type.
- Do not treat illustration colors as additional core brand colors.
- Do not replace the quiet video hero with glossy product photography.

## Agent prompt

Build a new Ciridae-style page as a spacious editorial narrative for AI-enabled business operations. Use Parchment Field (#eae1ce) and Gallery White (#fcfbf8) for alternating light sections, then use Carbon Night (#0b0b0b) or Soft Ink (#14110d) for strong inverse moments. Apply Burnt Signal (#cc6437) sparingly to the primary CTA. Set major headlines in a condensed sans, body copy in a clean neutral sans, and navigation, eyebrows, and actions in tracked uppercase mono. Organize the content with aligned columns, generous section breathing room, numbered steps, diagram-led feature blocks, and fine warm-gray rules. Keep cards square and flat, with borders instead of shadows. If using media, make it atmospheric and dark; use restrained technical diagrams to explain the system. Preserve clear contrast and a calm, precise hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark video with centered logo, condensed uppercase headline, short copy, and orange CTA. | Primary contact action, Brand introduction | Atmospheric dark video, Centered condensed headline, Burnt-orange CTA |
| 2 | other | Single centered statement on a clean, spacious light band. | Positioning statement | Minimal copy, Generous negative space |
| 3 | product-showcase | Warm two-column section pairing an isometric system illustration with explanatory steps and links. | Explain product model, Browse system details | Isometric diagram, Numbered workflow, Fine dividers |
| 4 | how-it-works | Light editorial section with a three-column timeline and supporting value-growth diagram. | Show engagement stages, Explain compounding value | Three-step timeline, Small process illustrations, Growth graphic |
| 5 | logo-cloud | Parchment band with left-aligned heading and multiple compact rows of customer and backer marks. | Social proof, Explore customer references | Logo rows, Hairline separators, Small category labels |
| 6 | testimonials | White section with a prominent lead quote and smaller testimonial cards beneath or beside it. | Browse partner feedback, Review attributed quotes | Editorial quote cards, Sequence labels, Partner attribution |
| 7 | cta | Single-column closing invitation on a softly tinted light surface. | Contact the team, Learn about the build | Large condensed heading, Primary dark CTA, Underlined text action |
| 8 | footer | Dark footer with centered brand promise, outlined actions, and grouped navigation columns. | Contact, Explore site sections, Join the company | Inverse color palette, Grouped link lists, Thin horizontal rules |

## Source CSS custom properties (selected)

```css
--color--black: #0b0b0b;
--font--main: "Pragmatica Cond", Arial, sans-serif;
--color--white: #fff;
--font--body: Pragmatica, Arial, sans-serif;
--color--off-white-darker: #dfddd9;
--color--charcoal: #272a2a;
--color--orange: #cc6437;
--font--mono: "Roboto Mono", sans-serif;
--color--off-white: #edebe7;
--size-font: calc(clamp(992px, 100vw, 1920px) / (1600 / 16));
--ease: .8s cubic-bezier(.84, 0, .16, 1);
--accent-on-light: #8d4323;
--accent-on-dark: #e8b768;
```

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