Ember Rust
#cc6437Accent strokes, icon linework, small text highlights — the only chromatic color in an otherwise monochrome system, appearing as a hairline pulse rather than a fill
Ciridae
ciridae.comWebsite preview
The design language
Ciridae operates in a void: #0b0b0b canvas, ghost-outlined pill controls, and typography locked in uppercase Pragmatica Cond at weight 400 — no bold, no mixed case, no decoration. The only chromatic note is #cc6437, a warm ember rust used as hairline strokes and small accent punctuation, never as a fill. Cards float on #272a2a with 10px radius and zero shadow; the system refuses elevation, defining surfaces through tonal contrast and 1px hairline borders. Photography arrives heavily blurred and atmospheric — liquid marble, smoke, fire — set behind type at full-bleed scale, so the visuals feel ambient rather than illustrative.
Color palette
brand
neutral
Void Black
#0b0b0bPrimary page canvas and section backgrounds; the foundation of the entire system
Charcoal Surface
#272a2aCard and panel backgrounds on dark sections — one step lighter than the canvas to create surface separation without shadow
Bone
#edebe7Light section backgrounds and off-white surfaces where the system flips from dark to bright
Bone Darker
#dfddd9Subtle variant of Bone for layered light surfaces and warm-tinted off-white elements
Pure White
#ffffffAll body and heading text, ghost button borders, nav elements — the dominant foreground color at 19.7:1 contrast on Void Black
Abyss
#050505Elevated bar backgrounds (top news strip) — one shade darker than the main canvas to push the bar forward
Steel
#484848Mid-tone border for secondary solid buttons where Pure White would be too stark
Ash
#cececeHairline borders for pill badges and numbered markers — lighter than Steel to read as fine detail against the dark canvas
Typography
Type scale
Minor Second (1.067) · 16px baseheading-lg
32px · 400 · 1.05 · -0.64px trackingThe quick brown fox jumps
heading
24px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
heading-sm
20px · 400 · 1 · -0.4px trackingThe quick brown fox jumps
text-16
16px · 400 · 1.1The quick brown fox jumps
text-15
15px · 400 · 1.2The quick brown fox jumps
body-sm
14px · 400 · 1.43 · -0.28px trackingThe quick brown fox jumps
caption
11px · 400 · 1.1 · -0.22px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Pragmatica Cond
- Weights
- 400
- Sizes
- 14px, 20px, 32px
- Line height
- 1.00, 1.05, 1.43
- Letter spacing
- -0.02em on all sizes
- Fallback
- Oswald, Barlow Condensed
Primary display and UI typeface — narrow condensed uppercase at 14px for body, 20px for section labels, 32px for hero wordmark. The extreme narrowness and all-caps setting at 14px body size is the system's most signature choice: body text reads as a whisper of architectural type, not conventional prose. Substitute with Oswald or Barlow Condensed if Pragmatica Cond is unavailable.
Additional typeface
Pragmatica
- Weights
- 400
- Sizes
- 14px, 15px, 16px, 24px
- Line height
- 0.90, 1.00, 1.10, 1.20, 1.25, 1.40
- Letter spacing
- -0.02em at 24px, -0.01em at 15px
- Fallback
- Inter, Söhne
Secondary body typeface used for longer-form prose passages (e.g. the 'AI Operating System' card description at 24px, paragraph text at 15px). Slightly wider than Pragmatica Cond for reading comfort in extended blocks, but still 400 weight — no bold ever. Substitute with Inter or Söhne.
Additional typeface
Roboto Mono
- Weights
- 400
- Sizes
- 11px, 14px
- Line height
- 0.90, 1.00, 1.10, 1.20
- Letter spacing
- -0.02em
- Fallback
- Roboto Mono (free, use as-is)
Monospace micro-type for the top news bar ticker ('NEWS • JUN 15, 2026 • CRUCIBLE EARLY ACCESS IS NOW OPEN'). The only place monospace appears, creating a clear functional distinction: this is system data, not brand voice.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1400px
- Section gap
- 80px
- Card padding
- 32px
- Element gap
- 16-20px
Border radius
nav
1440pxcards
10pxbadges
1440pxbuttons
1440pxnews-bar-button
0pxSpacing scale
4px5px6px7px8px10px11px16px18px20px24px26px27px30px32px40px48px50px65px80px100px122px170pxGuidelines
Do
- Use 1440px border-radius for all buttons, badges, nav items, and pill-shaped interactive elements
- Use 10px border-radius exclusively for card and content containers — pill = interactive, rounded-rect = content
- Set all text in uppercase using Pragmatica Cond at weight 400 — never use bold, never use mixed case
- Apply -0.02em letter-spacing to all type sizes above 14px; -0.01em is acceptable for 15px body passages
- Define surfaces through background tonal shifts (#0b0b0b → #272a2a → #edebe7) and 1px hairline borders, never through box-shadow
- Reserve #cc6437 Ember Rust for hairline accent strokes and small text highlights only — never use it as a fill
- Use Roboto Mono 11px exclusively for system data (news ticker, metadata, technical labels) to create a clear typographic register
Don’t
- Do not introduce bold or semi-bold weights — the entire system operates at weight 400 only
- Do not add drop shadows, glow effects, or any box-shadow values — the system is intentionally flat
- Do not use color fills on buttons — all interactive controls are ghost/outlined with 1px borders
- Do not use mixed-case text or sentence case in any UI label, heading, or body string
- Do not introduce additional accent colors — Ember Rust is the only chromatic note permitted
- Do not use non-pill radii (e.g. 4px, 8px) on buttons, badges, or nav items — the 1440px pill is the system's signature shape
- Do not use gradients — the system is built on flat color fields and blurred photography, not color transitions
Components
Ghost Pill Button
Primary interactive control across the siteTransparent background, 1px Pure White border, 1440px border-radius (full pill), 10px vertical / 18-20px horizontal padding, Pragmatica Cond 14px uppercase Pure White text, letter-spacing -0.02em. Used for 'Start Now', 'Menu', and all primary navigation triggers. The 1440px radius (effectively a stadium shape) is extreme — it pushes these controls into a signature capsule form that appears nowhere else in common UI kits.
News Bar Solid Button
Top-page system announcement triggerAbyss (#050505) background, 1px Pure White border, 0px border-radius (sharp corners, contrast with pill buttons), 10px vertical / 20px horizontal padding, Pragmatica Cond 14px uppercase text. The sharp-cornered, dark-filled variant is reserved exclusively for the top news strip — the different shape signals a different functional zone (system status, not brand navigation).
Pill Badge
Status markers, numbered tags, micro-labelsTransparent background, 1px Ash (#cecece) border, 1440px border-radius, 5px vertical / 11px horizontal padding, Pragmatica Cond 14px uppercase Pure White text. Used for numbered card markers ('01', '02', etc.) and small inline labels. The lighter Ash border (vs Pure White on buttons) reads as subordinate detail.
System Card
Content panels in the product systems sectionCharcoal Surface (#272a2a) background, 10px border-radius, no box-shadow, 32px vertical / 0px horizontal padding (content aligns to card edges). Full-bleed atmospheric photography sits behind or within each card. The 10px radius is the only non-pill radius in the system, creating a deliberate geometric contrast: pill = interactive, rounded rectangle = content container.
Top News Bar
Site-wide announcement strip fixed at the top of every pageAbyss (#050505) background, spans full viewport width, contains centered Roboto Mono 11px uppercase text with bullet separators ('NEWS • JUN 15, 2026 • CRUCIBLE EARLY ACCESS IS NOW OPEN'). The monospace typeface and dotted separators create a terminal/log aesthetic that contrasts with the brand's condensed type.
Constellation Logo Mark
Brand identity anchor in the hero and load contextsGeometric mark composed of a central diamond with four extending point-shapes arranged in a cross/star pattern, rendered as thin Pure White strokes. Below it, the wordmark 'CIRIDAE' in Pragmatica Cond 32px uppercase Pure White, letter-spacing -0.02em. The mark's four-pointed geometry echoes the system's orthogonal precision.
Hero Section
Full-viewport opening compositionVoid Black (#0b0b0b) canvas with full-bleed heavily-blurred atmospheric photography (warm skin tones, bokeh) at 50px backdrop-blur. Centered constellation logo and wordmark. Flanking micro-labels in Pragmatica Cond 14px uppercase Pure White at far left ('AUTOMATE THE MUNDANE') and far right ('ACCELERATE THE REMARKABLE'). The flanking labels span the full width while the logo sits dead center — a triadic composition that fills the viewport without crowding.
Backers Logo Strip
Social proof section with inverted light themeBone (#edebe7) background — the only light section, creating a stark visual break. Centered 'OUR WORK IS BACKED BY' label in Pragmatica Cond 14px uppercase, followed by a horizontal row of partner logos (General Catalyst, Accel, Andreessen Horowitz) rendered in Pure White or dark tone. The light-to-dark inversion is the system's most dramatic tonal shift, used once to punctuate the page.
Section Heading Block
Centered typographic header for major dark sectionsEyebrow label in Pragmatica Cond 14px uppercase (e.g. 'AI TRANSFORMATION', 'SYSTEMS, NOT TOOLS'), followed by a large headline in Pragmatica Cond 32px uppercase Pure White, letter-spacing -0.64px, centered on Void Black. Generous vertical breathing room above and below (40-60px). The eyebrow-to-headline pairing is the standard section-opening pattern.
Footer
Site termination with minimal legal/nav contentVoid Black (#0b0b0b) background, Pragmatica Cond 14px uppercase Pure White text. Minimal links and legal text arranged in simple rows. No visual embellishment — the footer respects the void.
Surfaces & elevation
Level 1
Void Canvas
#0b0b0bPrimary page background for all dark sections including hero, transformation narrative, systems grid, and footer
Level 2
Abyss Bar
#050505Top news bar — one shade darker than the canvas to push the strip forward without using shadow
Level 3
Charcoal Card
#272a2aCard and panel surfaces on dark sections — the only elevated surface, defined by tonal shift not shadow
Level 4
Bone Inversion
#edebe7Light section background for the backers strip — the single dramatic tonal break in the page
The system deliberately refuses drop shadows. All elevation is communicated through background tonal contrast (#0b0b0b canvas → #272a2a cards → #050505 abyss bar) and 1px hairline borders. The flat treatment is a signature choice: surfaces feel pressed onto the page rather than floating above it, reinforcing the void-chamber aesthetic. Cards in the systems grid deliberately carry box-shadow: none.
Layout & imagery
Layout
Full-bleed page model with content centered within a ~1400px max width. Hero is a full-viewport dark composition with centered constellation logo, flanked by micro-labels at far left and right. Sections alternate: dark hero → light backers strip (Bone) → dark transformation narrative → dark systems card grid → dark footer. The single light section creates one dramatic tonal break. Card grid uses 4 columns where the first card is approximately 2× wider than the remaining three, creating an asymmetric featured layout. Vertical breathing room between sections is generous (80px+). Navigation is minimal: top news bar + a single left-aligned ghost pill ('Start Now') and right-aligned ghost pill ('Menu') in the header bar. No sidebar, no mega-menu.
Imagery
Atmospheric, full-bleed photography dominates the hero and card backgrounds. Images are heavily blurred (50px and 40px backdrop-blur values detected) and high-contrast, depicting liquid marble with blue/red swirling patterns, smoke, dark landscape silhouettes, and fire/ember textures. The photography is moody and dark, not high-key — it sits in the same tonal register as the void canvas rather than popping against it. No product photography, no people, no UI screenshots. Imagery is ambient atmosphere, not illustrative content. The card grid pairs each system with a different atmospheric scene, making the photographs function as abstract visual identifiers rather than literal representations of the product.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff - background: #0b0b0b - card surface: #272a2a - border: #cecece (badges) / #ffffff (buttons) - accent: #cc6437 - primary action: no distinct CTA color **Example Component Prompts** 1. Create a ghost pill button: transparent background, 1px #ffffff border, 1440px border-radius, 10px 20px padding, Pragmatica Cond 14px uppercase #ffffff text, letter-spacing -0.02em. 2. Create a system card: #272a2a background, 10px border-radius, no box-shadow, 32px vertical padding, Pragmatica Cond 14px uppercase #ffffff body text, with a full-bleed atmospheric photo behind the content. 3. Create a hero section: #0b0b0b canvas, full-bleed blurred warm-toned photography at 50px backdrop-blur, centered constellation diamond mark (4-point star, thin #ffffff strokes), 'CIRIDAE' wordmark below in Pragmatica Cond 32px uppercase #ffffff, flanking labels in Pragmatica Cond 14px uppercase at far left and far right. 4. Create a top news bar: #050505 background, full-width strip, centered Roboto Mono 11px uppercase #ffffff text with '•' bullet separators, containing a news announcement string. 5. Create a numbered pill badge: transparent background, 1px #cecece border, 1440px border-radius, 5px 11px padding, Pragmatica Cond 14px uppercase #ffffff text (e.g. '01', '02', '03').
Typographic Register System
Ciridae uses a three-register typographic system to signal information hierarchy without weight variation: - **Brand voice** — Pragmatica Cond 14-32px, uppercase, 400 weight. All UI labels, headings, navigation, and short brand statements live here. This is what the system sounds like. - **Body voice** — Pragmatica 15-24px, mixed case allowed but rare, 400 weight. Reserved for longer-form prose passages (card descriptions, explanatory text). The shift to mixed case and a slightly wider letterform signals 'read this as a sentence, not a label.' - **System voice** — Roboto Mono 11px, uppercase, 400 weight. The news ticker and any technical metadata. Monospace + dot separators create a terminal/log register that says 'this is machine data, not brand communication.' Never cross registers. A navigation label in Roboto Mono would feel broken. A news announcement in Pragmatica Cond would feel like a headline.
Similar brands
Nothing (nothing.tech)
Same near-black canvas with white text, all-caps narrow type, and refusal of color except for a single warm accent — both systems treat the void as the brand
Linear
Dark monochromatic UI with hairline borders, pill-shaped controls, and zero reliance on shadow for elevation — though Linear uses more color in its feature sets
Vercel
Full-bleed dark sections with centered typographic compositions, generous vertical breathing room, and minimal navigation chrome
Framework
Extremely restrained typographic system using condensed uppercase type at small sizes, with color appearing only as a single accent punctuation
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
