🎨 RTT Facilities — Style Guide
Visual Clarity for Infrastructure Governance
This style guide defines the visual language of the RTT Facilities design system.
Its purpose is not to impress —
it is to clarify meaning, support decisions, and preserve trust.
Visual style is treated as infrastructure, not expression.
1. Style Philosophy#
RTT Facilities visual design is:
- Calm — avoids urgency inflation
- Neutral — avoids emotional manipulation
- Legible — prioritizes comprehension
- Durable — survives redesigns and tools
- Governance‑aligned — reinforces decision clarity
If a visual choice draws attention to itself, it is suspect.
2. Color System#
Core Principles#
- Color communicates state, not decoration
- Color is never the sole carrier of meaning
- Palettes are limited and stable
Color Roles#
- Neutral Base — backgrounds, containers
- System Identifiers — Electrical, Water, etc.
- Status Indicators — normal, stressed, degraded
- Governance Signals — audit, capital, intervention
Avoid gradients unless explicitly defined as infrastructure tokens.
3. Typography#
Typography Principles#
- Readability over personality
- Consistent hierarchy
- Minimal variation
Usage#
- Headings — structural orientation
- Body text — explanation and context
- Labels — concise, unambiguous
Typography must never imply urgency or emotion.
4. Spacing & Layout#
Layout Principles#
- Structure communicates meaning
- White space is functional, not aesthetic
- Alignment reinforces hierarchy
Guidelines#
- Use consistent spacing tokens
- Avoid dense clustering
- Group by governance concept
Layout should make relationships obvious without explanation.
5. Iconography#
Icon Rules#
- Icons support recognition, not decoration
- Use only canonical icon sets
- Icons must be explainable in plain language
Avoid metaphor‑heavy or illustrative icons.
6. Motion & Interaction#
Motion Principles#
- Motion is optional, never required
- Motion must not convey meaning alone
- Motion must not distract
Allowed Uses#
- State transitions
- Focus indication
- Orientation cues
Avoid animation for emphasis or delight.
7. Status & State Representation#
State Design Rules#
- States are explicit and labeled
- Color is reinforced with text or iconography
- Unknown or missing data is clearly indicated
Never hide uncertainty.
8. Accessibility Standards#
Accessibility is non‑negotiable.
All visuals must:
- Meet contrast standards
- Avoid color‑only signaling
- Support assistive technologies
- Minimize cognitive load
Accessibility failures are governance failures.
9. Dashboard‑Specific Guidance#
Dashboards must:
- Emphasize trends over snapshots
- Surface governance state clearly
- Avoid alert fatigue
- Explain themselves without training
Dashboards are decision surfaces, not monitoring toys.
10. City‑Facing Materials#
City‑facing visuals must:
- Use plain language
- Avoid technical jargon
- Emphasize preparedness and stewardship
- Reinforce trust and competence
Public materials should feel calm and predictable.
11. What This Style Guide Avoids#
This system explicitly avoids:
- Trend‑driven UI patterns
- Decorative gradients
- Emotional color palettes
- Visual novelty for its own sake
Style exists to disappear behind meaning.
12. Relationship to Governance#
This style guide:
- Supports the Design Governance Charter
- Reinforces the Component Naming Convention
- Aligns with the Figma Library Structure
- Preserves semantic clarity
Visual drift is treated as a governance risk.
13. Canonical Status#
This style guide is canonical.
All RTT Facilities design work must align with it.