Typeface · Design system

Clarity
by design.

A compact visual language for technology advisory, enterprise transformation, and digital platforms that need to hold up in practice.

Explore the website

Colour system

A grounded technical palette

Blueprint blue provides the field, deep surfaces create hierarchy, and brass marks the decisions that matter.

Blueprint

#1e2f3cvar(--bg)

Primary page background

Deep surface

#131e25var(--nav-bg)

Navigation and footer surface

Brass

#ae895dvar(--brass)

Frame, actions and emphasis

Warm text

#b0885avar(--text)

Secondary copy and labels

Muted brass

#8c6f4bvar(--muted)

Quiet supporting detail

Cool white

rgba(255,255,255,.9)var(--text-on-dark)

Readable copy on dark surfaces

Typography

Institutional weight, readable rhythm.

Unica One gives headings and navigation their architectural character. PT Sans Narrow keeps long-form information compact and legible.

Display--font-display · Unica One

Clarity before delivery.

Hero body20px italic · PT Sans Narrow

Sound review, realistic scoping, and technical direction grounded in comparable work.

Body copy18px · PT Sans Narrow

Typeface brings structure to complex technology decisions and the organisations that depend on them.

NavigationUnica One · uppercase

ABOUT SERVICES CONTACT

Global foundations

A small, deliberate type scale.

These are the shared sizes used across page titles, section headings, body copy, labels, and supporting detail. Page-specific text sizes should be exceptions, not a second system.

RoleTokenSample
Page title--font-size-h1

Clarity

Section heading--font-size-h2

Structure

Subheading--font-size-h3

Transformation

Body copy--font-size-body · 18px

Clear, measured information with consistent paragraph rhythm.

Small detail--font-size-small

SUPPORTING INFORMATION · METADATA · LABELS

Reusable components

Cards with a clear job.

Cards share one global entrance treatment and a consistent border, radius, spacing, and hierarchy. Content determines the layout; the system determines the feel.

Advisory & assurance

Blueprint assurance

Independent review before architectural decisions are locked in.

  • • Design review
  • • Scoping alignment
View advisory model →
Digital platforms & products

Built to remain understandable

Content, data, integrations, and delivery held in one coherent system.

  • • Platform architecture
  • • Technical delivery
View platform model →
Service operations

Structure through change

Operational frameworks that keep important services stable.

  • • Service governance
  • • Operational readiness
View governance model →

Interface language

Quiet controls, clear decisions.

Rules and dividers

The soft divider separates sections. The one-pixel rule supports compact information groups.

Service row
Technical advisoryIndependent review before delivery.

Rows use the same spacing and border language as cards, with the layout changing to suit the content.

Form fields

Motion system

Movement should clarify, not distract.

Entrance

Cards rise gently from below as they enter the viewport, with a short reading-order stagger.

Parallax

Service hero imagery moves softly with the page to create depth without competing with the message.

Accessibility

All motion respects the visitor’s reduced-motion preference and never hides essential content.

Layout foundations

The page knows its edges.

Every page uses the same frame, page gutter, maximum reading width, and surface inset. Full-bleed sections deliberately step through the gutter; contained content does not invent another margin.

Decorative frame--frame-w · 20px desktop
10px tablet · 0px small screen
Page gutter--page-padding · 20px desktop
16px small screen
Content width--max-width · 1245px
centred by .container
Surface inset--surface-inset · 2rem desktop
0.75rem small screen

Row layout variations

One system, different structures.

These layouts come from the Digital Platforms page. They are reusable composition patterns, not separate visual systems.

Architecture layers
Application
+ contentRuntime
+ delivery

Two related columns with a measured connector between them.

Technology markers
ASTROTSCFAPI

Compact columns using a rule-top and brass marker.

Planning blocks
01Before build02Clear ownership

Numbered advisory blocks for ordered decisions.

Ownership split
Designed for
ownershipContent
Data
Integrations

Editorial copy balanced against a definition list.

Delivery band
Global delivery
& protection◌ ◇ ◌

A darker full-width row with a restrained technical motif.

Advisory split
Technical
advisoryIndependent review before delivery.

A heading column and a wider explanatory column joined by one rule.

Responsive guidance

One system, every screen.

01 · Small screen

320–599px

Single-column reading, compact hero typography, protected content margins, and comfortable touch targets.

02 · Tablet

600–899px

Content reflows before text shrinks, with controlled card widths and stable section rhythm.

03 · Desktop

900px+

Two-column advisory layouts and wider grids appear only when both sides remain easy to read.