Applications · Section 09 · Digital applications
Website and product UI
Global brand structure, interactive Aqua, service navigation, product state and accessible UI.
Website
Apply the system by role. A workstream family is useful only when it helps the reader navigate this artifact.
Core
Global navigation and structure
Workstream
May identify service modules, case studies or page sections
Status
Product and delivery pages
Dashboard and product UI
Apply the system by role. A workstream family is useful only when it helps the reader navigate this artifact.
Core
Neutral surfaces and structure
Workstream
May categorise data or architecture
Status
Operational state, always with text or shape
Interaction and state
Aqua identifies action, focus and selection. Operational status always adds a glyph and readable label; colour is never the only signal.
Digital examples
Website structure remains Sapphire-led; product interfaces use neutral surfaces, Aqua interaction and explicit operational state.
Work · Practices · ThinkingAI and software that survive production
Aqua is reserved for the primary action. Workstream families identify service modules below the hero.
Website hero. Sapphire owns global recognition; Aqua identifies action.
Operational health
Product dashboard. Aqua interaction and Aqua status use different shapes, positions and labels.
Production layout system
Marketing and operating surfaces share the same proportions even when their energy differs.
| Grid | 12 columns · 24px desktop gap |
|---|---|
| Page width | min(100% - clamp(40px, 8vw, 112px), 1408px) |
| Reading measure | 65–75ch |
| Section rhythm | clamp(72px, 8vw, 120px) |
| Geometry | 8px panels · 4px controls |
Component contract
These patterns are the shared production vocabulary for websites and applications.
primary Action
Aqua 300 field with Sapphire 950 ink, 44px minimum height, explicit hover and focus-visible states.
secondary Action
Transparent field with a one-pixel contextual border. It never competes with the primary action.
navigation
Desktop navigation exposes the current page. Below 960px it becomes an explicit full-screen menu; the Contact action remains visible.
ledger
Use ruled rows for offers, requirements, status and comparisons. A row has one primary decision and no decorative icon tile.
panel
Parchment or committed workstream field, one-pixel boundary, 8px radius maximum. Use either a border or a shadow, not both.
status
Always glyph + plain-language label + colour. Ready uses Aqua, risk uses Amber, breach uses Rowan and neutral uses Nocturne/Parchment.
form
Visible label, 44px minimum control, instruction before entry, error adjacent to the field and a recovery action in the message.
State coverage
Do not approve a component from its resting state alone.
Marketing profile
The public website turns the brand strategy into a repeatable persuasive system.
- 01In your systems. With your people. Against your numbers.
- 02System and people tracks run together through Ground, Architect, Build, Adopt and Sustain.
- 03Use named work where approved, explicit current status, authored system views and operating detail. Never ship placeholders or fabricated outcomes.
- 04Sapphire owns the first field. The proposition, primary action and one branded operating mechanism must be understood before scrolling.
- 05Aqua identifies action. Imperial, Verdant and Orchid identify a named delivery area. Status colour is never decorative.
- 06One slow field-ledger or cube-assembly moment per page. Content is visible and complete without motion.