Design system
Paper & Ink — the Sentrox brand style guide.
One canvas, one ink, one voice. Every page of sentroxsystems.com 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
Colour is deliberately restricted: warm paper, ink and a graphite mid-tone. Accent comes from photography and from ink-on-paper contrast, never from decorative colour. 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.
Intelligent technology.
Sora 600 · -3% tracking · 1.02 leadingIntelligent technology.
Sora 600 · page titlesIntelligent technology.
Sora 600 · section titlesIntelligent technology.
Sora 600 · card and item titlesIntelligent technology.
Manrope 400 · intro paragraphsIntelligent technology.
Manrope 400 · default copyIntelligent technology.
Manrope 400 · captions, metaEyebrow — 11px / 600 / 0.22em uppercase
03 — Spacing & layout
py-24 lg:py-32Vertical rhythm between page sectionscontainer-x (max 84rem, 1.5rem gutter)Global horizontal framegap-10 → gap-16Editorial two-column layoutsmt-5 / mt-6 / mt-8Eyebrow → heading → copy → action04 — Buttons & links
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
- 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.