Skip to content
Sentrox

Design system

Paper, Ink and Intelligence. The Sentrox brand system.

Editorial clarity meets a precise technology palette. Every page is built from the tokens, type scale and layout rules below.

01 Colour

Paper

var(--background)

Page canvas

Paper 2

var(--surface)

Alternating bands

Paper 3

var(--surface-2)

Chips, hovers

Hairline

var(--border)

Rules and dividers

Graphite

var(--muted-foreground)

Secondary text

Ink

var(--foreground)

Type, buttons, CTA blocks

Deep Ink

var(--brand-ink)

Technology hero surfaces

Electric Blue

var(--brand-blue)

Primary technology accent

Cyan Signal

var(--brand-cyan)

Controlled status accent

Colour is deliberately controlled: warm paper, deep ink, metallic silver and precise blue/cyan signals. Accent communicates technology and action, never decoration. Never hardcode hex values in components, use the semantic tokens.

02 Typography

Display and headings set in Sora. Body copy set in Manrope. No third typeface, ever.

Display

Intelligent technology.

Sora 600 · 0 tracking · 1.02 leading
H1

Intelligent technology.

Sora 600 · page titles
H2

Intelligent technology.

Sora 600 · section titles
H3

Intelligent technology.

Sora 600 · card and item titles
Body L

Intelligent technology.

Manrope 400 · intro paragraphs
Body

Intelligent technology.

Manrope 400 · default copy
Small

Intelligent technology.

Manrope 400 · captions, meta

Eyebrow 11px / 600 / 0.22em uppercase

03 Spacing & layout

Sectionpy-24 lg:py-32Vertical rhythm between page sections
Containercontainer-x (max 84rem, 1.5rem gutter)Global horizontal frame
Grid gapgap-10 → gap-16Editorial two-column layouts
Stackmt-5 / mt-6 / mt-8Eyebrow → heading → copy → action

04 Buttons & links

Editorial link Inline text link

One primary action per view. Radii stay at 0.4rem or square. No gradients, no glow, no drop shadows beyond the single soft elevation token.

05 Image treatment

Engineers reviewing code together, shot in natural light
  • Hyper-real, never stocky. Real people, real workspaces, natural light, candid moments.
  • Warm neutral grade. Photography is colour-graded toward the paper canvas, no cold blue casts.
  • Full-bleed or square-edged. Images run edge-to-edge or sit in un-rounded frames; hover lifts scale by 3% only.
  • No overlays of decorative colour. Text over image uses an ink scrim, never a brand tint.

06 Motion

Motion is editorial: 500-800ms, cubic-bezier(0.22, 1, 0.36, 1), entrance only. Content rises 22px and fades in once on scroll. Hover states change colour or nudge 1-6px. Everything is disabled under prefers-reduced-motion.