/CERAMIC

Ceramic Design System

Clay while we shape it, ceramic when it ships. Every token renders from app/token-source.css, then hardens into reliable components across the site.

00 · TokensSource

Ceramic keeps the system practical and expressive: flexible enough to mold into different product surfaces, strict enough to ship as a dependable interface. This section renders directly from lib/design-tokens.ts, while CSS values are globally sourced from app/token-source.css.

Brick Red

Brand accent scale anchored at --primary-500.

--primary-50#FDF2EE

--primary-100#FAE4DC

--primary-200#F4C5B3

--primary-300#EDA087

--primary-400#E07B5D

--primary-500#CC5536

--primary-600#B8472C

--primary-700#9E3D25

--primary-800#7D3020

--primary-900#5C2318

--primary-950#3D170F

Special Black

Warm black scale anchored at --deep-900.

--deep-50#F5F4F4

--deep-100#E8E6E7

--deep-200#D1CECE

--deep-300#B5B0B2

--deep-400#928B8E

--deep-500#706769

--deep-600#544D50

--deep-700#443A3D

--deep-800#3F3538

--deep-900#3C3235

--deep-950#1E191B

Warm Gray

Neutral scale tinted with the Special Black undertone.

--gray-0#FFFFFF

--gray-50#F7F5F5

--gray-100#EEEEEE

--gray-200#E3E1E2

--gray-300#D4D0D1

--gray-400#BDB7B9

--gray-500#A09899

--gray-600#8F898B

--gray-700#756E70

--gray-800#635B5E

--gray-900#3C3235

--gray-950#241E20

Keyboard focus

One visible outline, no stacked shadows. Shared by cards, links, buttons, and fields.

--focus-ring-colorcurrentColor

--focus-ring-widthvar(--border-width-focus)

--focus-ring-offsetvar(--space-1)

Background

Surface roles used by shared layout and card primitives.

--color-bg-defaultvar(--gray-0)

--color-bg-subtlevar(--gray-50)

--color-bg-uivar(--gray-100)

--color-bg-inversevar(--deep-900)

--color-bg-brandvar(--primary-600)

Text

Text roles that shift correctly inside theme classes.

--color-text-primaryvar(--deep-900)

--color-text-secondaryvar(--gray-800)

--color-text-mutedvar(--gray-700)

--color-text-brandvar(--primary-600)

--color-text-on-brandvar(--gray-0)

--color-text-on-inversevar(--gray-0)

Borders

Low-contrast rules for page grids and repeated cards.

--color-border-mutedvar(--gray-200)

--color-border-defaultvar(--gray-400)

--color-border-strongvar(--gray-900)

--color-border-brandvar(--primary-500)

Interaction

Button and active-state roles.

--color-interactive-primaryvar(--primary-600)

--color-interactive-primary-hovervar(--primary-700)

--color-interactive-primary-activevar(--primary-700)

--color-interactive-primary-textvar(--gray-0)

Typography

Type scale, weight, and tracking tokens.

--font-sans'TWK Lausanne', 'Helvetica Neue', 'Arial', sans-serif

--font-display'TWK Lausanne', 'Helvetica Neue', 'Arial', sans-serif

--font-mono'JetBrains Mono', 'Menlo', 'Consolas', monospace

--fw-light350

--fw-medium500

--fw-bold700

--type-display-xlclamp(4rem, 8vw, 7rem)

--type-displayclamp(3rem, 6vw, 5rem)

--type-h1clamp(2.25rem, 4.5vw, 4rem)

--type-h2clamp(1.75rem, 3.5vw, 3rem)

--type-h3clamp(1.375rem, 2.5vw, 2rem)

--type-body-lg1.125rem

--type-body1rem

--type-body-sm0.875rem

--type-eyebrow0.75rem

Spacing

Shared spacing scale used by layouts and controls.

--space-14px

--space-28px

--space-312px

--space-416px

--space-520px

--space-624px

--space-832px

--space-1040px

--space-1248px

--space-1664px

--space-2080px

--space-2496px

--space-32128px

01 · Colour — Primitive Tokens

Brick Red scale

Special Black scale

Neutral gray scale

02 · Colour — Semantic Tokens

Background

--color-bg-defaultvar(--gray-0)

--color-bg-subtlevar(--gray-50)

--color-bg-inversevar(--deep-900)

--color-bg-brandvar(--primary-600)

Text

--color-text-primaryvar(--deep-900)

--color-text-secondaryvar(--gray-800)

--color-text-mutedvar(--gray-700)

--color-text-on-inversevar(--gray-0)

03 · Typography

TWK Lausanne — three weights used: 350 (body/display), 500 (medium), 700 (bold)

--fw-light

--fw-medium

--fw-bold

.text-display-xl--type-display-xl

WHO KNOW.

.text-display--type-display

WE CO-BUILD

.text-h1--type-h1

Built in Doha.

.text-h2--type-h2

Co-building globally.

.text-h3--type-h3

Domain Expert Fellows

.text-h4--type-h4

Venture Description

--type-eyebrow

// THE STUDIO · DOHA · GLOBAL CO-BUILDING

--type-body-lg

Fellows bring deep industry knowledge. The Studio brings the rest.

--type-body

Real-time risk intelligence for data centre development in arid regions.

--type-body-sm

Custom tailoring the most experienced AI-workforce.

04 · Spacing Scale

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

--space-24

96px

Homepage baseline · Geometry and motion

TWK Lausanne. Sentence-case headings: hero 36–64px, section 28–48px, card 20–32px. Warm dark surfaces, white text and brick accents follow semantic colour roles. Cards enter individually and repeat when scrolling back. The homepage film uses an opaque rising layer followed by a zoom; this is a media-specific interaction.

Geometry

Shared homepage geometry. Rounded rectangles, not pills. Grouped logo grids round only their outer container.

--radius-cardvar(--radius-card-base)

--radius-mediavar(--radius-md)

--radius-controlvar(--radius-md)

--card-gapvar(--space-6)

Motion

Repeat on viewport re-entry. Cards reveal in reading order; navigation follows scroll direction. Reduced motion keeps content visible.

--motion-reveal-duration840ms

--motion-stagger180ms

--motion-reveal-distancevar(--space-6)

--motion-reveal-easecubic-bezier(.22, 1, .36, 1)

--motion-nav-durationvar(--dur-slow)

05 · Motion Tokens

--dur-fast

120ms

hover / micro interactions

--dur-med

220ms

colour transitions, fades

--dur-slow

420ms

layout shifts, panels

--ease-standard

cubic-bezier(0.2, 0.0, 0.0, 1.0)

General enter — fast start, ease out

Framer Motion ease (page reveals)

SITE_MOTION.ease

Repeatable entrance — 840ms, 180ms between cards

REVEAL ANIMATION PREVIEW

WE CO-BUILDAI COMPANIESWITH THE EXPERTSWHO KNOW.

06 · Shared Components

CardBase

Reusable card surface

A shared primitive for repeated editorial, directory, and CTA cards.

View page →

CardGrid

Responsive grid

Column count is token-aware and collapses cleanly on tablet and mobile.

Open example →

LogoGrid with preserved empty slots

The Utopia Studio

DirectoryLayout

Filterable component

Shared list pages use the same filter, search, empty, and card grid behaviour.

Search directory

Components

Directory filter

Filter buttons, search input, and result grid stay aligned.

States

Empty state

Zero-result views use the same surface, type, and border tokens.

07 · Interaction States

Keyboard focus uses one 2px outline with a 4px offset, in the control’s text color. No glow or stacked rings. Tab through the controls to try the shared focus-visible behavior.

DefaultLink state →

HoverLink state →

ActiveLink state →

FocusLink state →

08 · Surfaces in Context

SURFACE: --deep-900 (default)

UTOPIA

John Doe

Real-time risk intelligence for data centre development.

SURFACE: --primary-500 (CTA)

FELLOWSHIP PROGRAMME

BRING THE BOTTLENECK ONLY YOU CAN SEE.

09 · Borders & Radius

none (0px)

architectural default

sm (2px)

micro elements

md (4px)

tags only

pill (9999px)

avoid — rarely used

--color-border-muted

Section dividers

--color-border-default

Default borders

--color-border-strong

Strong borders