🎴 RTT/Inside Design‑System Quick‑Reference Card

For Collaborators, Designers, Illustrators, and Visual Thinkers#

🔺 Core Principle — The RTT Triad#

Every visual must express:

• BEING → Identity
• KNOWING → Behavior
• MEANING → Purpose

Triad Colors:

• Being → Blue
• Knowing → Teal
• Meaning → Gold

Triad Geometry:

• Equilateral triangle
• 3–5% corner rounding
• Labels at vertices
• Orientation consistent (flat base)

🎨 Color Palette (Primary)#

Secondary Colors:

• Soft Green → Growth (Analysts)
• Soft Red → Risk (Risk Mgmt)
• Teal → Flow (Quants/Traders)
• Purple → Strategy (CIO/Synthesis)

🧩 Shape Language#

• Triangles → identity, structure
• Arrows → flow, behavior
• Circles → entities
• Hexagons → systems
• Waves → dynamics
• Layered planes → dimensionality

Rule: Shapes must reinforce the triad.

✏️ Illustration Style#

• Semi‑abstract
• Clean lines
• Soft gradients
• Minimal shading
• No photorealism
• No cartoon exaggeration
• Conceptual metaphors only

📐 Layout Rules#

• 12‑column grid
• Generous margins
• Triad in upper‑left or lower‑right
• Main metaphor centered
• Text left‑aligned
• Plenty of negative space

🖼️ Poster Layout (A2 Vertical)#

• Large icon at top
• Triad centered
• One‑sentence insight below
• Chapter title in footer
• Gold accent for Meaning

📦 Reusable Templates#

1. Triad Identity Card
2. Dimensional Flow Map
3. Triadic Scene Frame
4. Role Alignment Grid
5. Purpose Spotlight

⚠️ Do / Don’t#

Do:

• Keep visuals conceptual
• Use metaphors consistently
• Maintain triad orientation
• Use gold sparingly for Meaning

Don’t:

• Add literal financial charts
• Use real buildings, cities, or people
• Over‑detail machinery or landscapes
• Break the triad color rules

📦 Designer‑Ready Asset List#

Icons, Shapes, Swatches, Typography — Everything a Designer Needs#

1. Icon Set (Geometric, Minimal)#

Core Icons#

• RTT Triad (primary symbol)
• Asset icon (circle with bar)
• Flow icon (curved arrow)
• Strategy icon (compass)
• Risk icon (shield)
• Portfolio icon (garden plant)
• Model icon (gear cluster)
• Trade icon (simple car shape)
• Market icon (terrain wave)

Style Rules#

• 2–3px stroke
• Rounded corners
• No filled shapes except Meaning highlights
• Consistent line weight

2. Shape Library#

Triangles#

• Equilateral
• 3 sizes: small, medium, large
• Color‑coded per triad

Arrows#

• Straight
• Curved
• Gradient flow arrows

Circles#

• Entity nodes
• With optional glow

Hexagons#

• System blocks
• Used sparingly

Waves#

• Behavior fields
• Teal gradient

Layered Planes#

• Dimensional stacks
• Soft shadows

3. Color Swatches#

Primary Swatches#

• Deep Blue: #0A1F44
• Gold: #F2C94C
• Slate Gray: #4F4F4F
• White: #FFFFFF

Secondary Swatches#

• Soft Green: #6FCF97
• Soft Red: #EB5757
• Teal: #2D9CDB
• Purple: #9B51E0

Gradient Examples#

• Blue → Teal
• Teal → Gold
• Blue → Purple

4. Typography#

Primary Typeface#

• Geometric Sans‑Serif (e.g., Montserrat, Avenir, or similar)
• Clean, modern, high‑legibility

Hierarchy#

• H1: 48–72pt
• H2: 32–48pt
• Body: 18–24pt
• Triad labels: 16–20pt

Rules#

• No serif fonts
• No script fonts
• Use bold sparingly
• Maintain generous line spacing

5. Layout Templates#

Poster Template#

• A2 vertical
• Icon → Triad → Insight → Footer

Storyboard Frame Template#

• Metaphor illustration
• Triad watermark
• Caption below

Slide Template#

• Title
• Triad
• 3‑point structure
• Visual metaphor

6. Export Guidelines#

• Vector format preferred (SVG, AI)
• PNG for web previews
• 300 DPI for print
• Triad must remain editable

🎉 Final Note#

This quick‑reference card + asset list gives collaborators:

• the visual grammar
• the color and shape rules
• the iconography
• the layout patterns
• the typography system
• the templates

It’s everything needed to produce consistent, dimensional RTT/Inside visuals across Finance — and any future domain you explore.