Design System
Core rules for colour, type, spacing, and components. A focused reference for the visual language of the site.
Black, white, cyan, blue, silver.
Editorial spacing, quiet borders, clear hierarchy.
Reusable cards, labels, CTAs, and effects.
Palette & Hierarchy
The core palette is intentionally narrow: black, white, cyan, blue, and silver. Cyan leads, blue is secondary and used sparingly, and silver adds a restrained metallic note.
Core Brand Colours
Colour Roles
Page black and foreground white carry the system. Most of the interface lives here.
Cyan is the main brand signal. Use it for emphasis, links, accents, and key interactive moments.
Blue and silver are supporting accents. Blue appears sparingly. Silver can introduce metallic depth without taking over.
Surfaces
Surfaces are intentionally minimal. The page black defines the field, so cards need only a slight lift from the background. The surface stays premium while remaining distinct in both web layouts and social compositions. Separation comes primarily from borders, type contrast, and selective accent, not from stacking multiple dark fills.
Text Hierarchy
Accent Scale
Borders
Type System
Three font families with distinct roles. Weight stays light. Hierarchy comes from size, opacity, and spacing — not boldness.
Font Families
DM Serif Display
Editorial headings. Sets the tone.
Geist Sans
Body text, descriptions, UI elements.
Geist Mono
Labels, numbers, CTAs. Always uppercase as labels.
Heading Scale
Software built around how you operate.
From brief to production.
Platform Engineering
Body Text
We design and build engineering software for teams that need their tools to match the complexity of what they actually do.
We started Infinitus Interactive in 2020 as the kind of studio we wanted to see more of. Close to the details, careful with decisions.
Labels & Micro-copy
Start a conversation →
Service Disciplines
Rhythm & Grid
Generous whitespace in consistent increments. A flexible 12-column grid with asymmetric splits creates editorial tension.
Containers
max-w-[1400px]Primary sections, gridsmax-w-[1200px]Tighter sectionsmax-w-3xlSection headersmax-w-xlBody paragraphsSection Padding
py-20 → lg:py-28Compactpy-24 → lg:py-32Standardpy-32 → lg:py-40MajorGrid Splits
UI Primitives
Cards support true modules, previews, and interactive units. One shared card language defines the pattern: a lifted near-black surface, a restrained top accent edge, and structure carried by spacing and type rather than a heavy box outline.
Cards
Service Card
The interactive variant. Quiet by default, with a restrained top accent bar to signal priority without turning the whole card into decoration.
Editorial Module
For content-led moments. Minimal chrome, stronger typography, and no decorative framing beyond the edge.
Value
Typographic CardCTAs
Filter Pills
Micro-patterns
Short cyan line paired with body text.
Atmosphere & Motion
Radial gradients add depth without distraction. Motion is purposeful and slow. Images desaturate at rest and lift on hover.
Background Radials
Image Treatment
brightness(0.78) · saturate(0.82)
brightness(0.9) · saturate(0.95) · scale(1.02)
Transitions
300msColour, opacity, text500msCard hovers, reveals700msImage zoom, scale