ALIGN360.

Align360 Design System

The visual language for clarity, alignment, and growth. Built on the FLC Wisdom Framework.

v1.0.0
DesignSuite Career Nav Integrate360 627 Figures LegacyLab
01 Color System
Core Surface Colors
Black
#1a2830
--a360-black
Dark
#2e3c45
--a360-dark
Surface
#354956
--a360-surface
Surface 2
#3d5362
--a360-surface-2
Surface 3
#455d6e
--a360-surface-3
Border
#4a6575
--a360-border
Border Light
#5a7585
--a360-border-light
Muted
#6a8595
--a360-muted
Stone
#8aa0ad
--a360-stone
Text Secondary
#b0c4cf
--a360-text-secondary
Text
#edefe8
--a360-text
White
#ffffff
--a360-white
Brand Accent Colors
Accent Dark
#5f8a82
--a360-accent-dark
Accent (Turquoise)
#7aa49c
--a360-accent
Accent Light
#95bcb5
--a360-accent-light
Warm Dark
#c47d47
--a360-warm-dark
Warm (Orange)
#e09b67
--a360-warm
Warm Light
#e8b38a
--a360-warm-light
Alert (Red)
#e45742
--a360-error
Phase Colors
DesignSuite
#7aa49c
--a360-phase-design
Career Navigator
#e09b67
--a360-phase-career
Integrate360
#6b9fd4
--a360-phase-integrate
627 Figures
#d4a76b
--a360-phase-figures
LegacyLab
#e45742
--a360-phase-legacy
Text & Border Colors
Text
#edefe8
--a360-text
Text Secondary
#b0c4cf
--a360-text-secondary
Muted
#6a8595
--a360-muted
Stone
#8aa0ad
--a360-stone
Border
#4a6575
--a360-border
Border Light
#5a7585
--a360-border-light
Status Colors
Success
#7aa49c
--a360-success
Warning
#e09b67
--a360-warning
Error
#e45742
--a360-error
Info
#6b9fd4
--a360-info
LLM Instructions

Use --a360-accent (turquoise) for active/positive states and CTAs. Use --a360-warm (orange) for secondary emphasis and 'coming soon' states. Use --a360-error (red) for alerts and critical items. Phase colors should ONLY be used in phase-specific contexts. Never use phase colors for general UI elements.

CSS 
:root {
  /* Surface Scale */
  --a360-black: #1a2830;
  --a360-dark: #2e3c45;
  --a360-surface: #354956;
  --a360-surface-2: #3d5362;
  --a360-surface-3: #455d6e;
  --a360-border: #4a6575;
  --a360-border-light: #5a7585;

  /* Text Scale */
  --a360-muted: #6a8595;
  --a360-stone: #8aa0ad;
  --a360-text-secondary: #b0c4cf;
  --a360-text: #edefe8;
  --a360-white: #ffffff;

  /* Accent (Turquoise) */
  --a360-accent: #7aa49c;
  --a360-accent-light: #95bcb5;
  --a360-accent-dark: #5f8a82;
  --a360-accent-subtle: rgba(122, 164, 156, 0.12);

  /* Warm (Orange) */
  --a360-warm: #e09b67;
  --a360-warm-light: #e8b38a;
  --a360-warm-dark: #c47d47;

  /* Phase Colors */
  --a360-phase-design: #7aa49c;
  --a360-phase-career: #e09b67;
  --a360-phase-integrate: #6b9fd4;
  --a360-phase-figures: #d4a76b;
  --a360-phase-legacy: #e45742;

  /* Status */
  --a360-success: #7aa49c;
  --a360-warning: #e09b67;
  --a360-error: #e45742;
  --a360-info: #6b9fd4;
}
02 Typography
Font Families
Quicksand — Display & Body

Light 300 — Clarity begins with intention

Regular 400 — Clarity begins with intention

Medium 500 — Clarity begins with intention

SemiBold 600 — Clarity begins with intention

Bold 700 — Clarity begins with intention

JetBrains Mono — Code

Regular 400 — const alignment = true;

Medium 500 — const alignment = true;

Type Scale

Discovery before direction

Section heading

Card title

Subsection

Body text for paragraphs and longer content blocks.

Labels and metadata

UPPERCASE LABELS

NameSizeWeightUsage
Hero52px700Page hero headlines
H136px700Section headings
H224px600Card titles
H318px600Subsections
Body16px400Paragraphs, descriptions
Small14px400Labels, metadata
Caption12px500Uppercase labels, overlines
LLM Instructions

Quicksand is the ONLY font for display and body text. Use letter-spacing: -0.02em on hero/h1. Use letter-spacing: 0.08em + uppercase for labels. Use JetBrains Mono only for code blocks, technical values, and version numbers.

CSS 
/* Font Families */
--font-display: 'Quicksand', sans-serif;
--font-body: 'Quicksand', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Type Scale */
.hero  { font-size: 52px; font-weight: 700; letter-spacing: -0.02em; }
.h1    { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; }
.h2    { font-size: 24px; font-weight: 600; }
.h3    { font-size: 18px; font-weight: 600; }
.body  { font-size: 16px; font-weight: 400; }
.small { font-size: 14px; font-weight: 400; }
.caption { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
03 Spacing System
Spacing Scale (8px base unit)
--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
--space-4xl
96px
ContextDesktopMobile
Page Padding60px24px
Section Gap80px48px
Card Padding24-32px16-24px
Component Gap16-24px12-16px
LLM Instructions

Use 8px base unit. Prefer multiples of 8. Section margins: 80px between major sections. Card padding: 24px standard, 32px for featured cards.

CSS 
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
04 Shadow & Elevation
Elevation Levels

Subtle

--shadow-sm

Lifted

--shadow-md

Floating

--shadow-lg

Glow Effects

Turquoise Glow

Active states

Orange Glow

CTAs

Red Glow

Alerts

Border Radius Scale
4px (sm)
8px (md)
12px (lg)
16px (xl)
100px (full)
CSS 
/* Shadows */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.18);
--shadow-md: 0 4px 16px rgba(0,0,0,0.25);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.35);

/* Glows */
--glow-accent: 0 0 20px rgba(122,164,156,0.25);
--glow-warm: 0 0 20px rgba(224,155,103,0.25);
--glow-error: 0 0 20px rgba(228,87,66,0.25);

/* Border Radius */
--radius-sm: 4px;    /* inputs, small elements */
--radius-md: 8px;    /* cards, buttons */
--radius-lg: 12px;   /* sections, panels */
--radius-xl: 16px;   /* hero elements */
--radius-full: 100px; /* pills, avatars */
05 Buttons
Button Variants
Size Variants
Phase Buttons
LLM Instructions

Primary buttons for main actions. Warm buttons for CTAs and upsells. Secondary for alternative actions. Ghost for tertiary. Alert ONLY for destructive actions. Phase-colored buttons ONLY in phase-specific contexts.

CSS 
.btn-primary {
  background: var(--a360-accent);
  color: var(--a360-black);
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--a360-accent-light);
  transform: translateY(-1px);
  box-shadow: var(--glow-accent);
}
.btn-warm {
  background: var(--a360-warm);
  color: var(--a360-black);
}
.btn-secondary {
  background: transparent;
  color: var(--a360-white);
  border: 1px solid var(--a360-border-light);
}
.btn-ghost {
  background: transparent;
  color: var(--a360-accent);
  border: 1px solid var(--a360-accent);
}
.btn-alert {
  background: var(--a360-error);
  color: var(--a360-white);
}
06 Cards
Standard Card

Standard Card

A basic card component with dark surface background, subtle border, and hover lift effect.

Another Card

Cards are the primary container for content blocks across the Align360 platform.

Phase Cards
DesignSuite

Wiring for Impact

Discover your unique design and wiring.

Career Nav

Career Navigator

Navigate your career with clarity and purpose.

Integrate360

Holistic Integration

Integrate all dimensions of life and work.

627 Figures

Revenue Mastery

Build sustainable revenue streams aligned with purpose.

LegacyLab

Legacy Building

Create lasting impact beyond your lifetime.

Tool Card
◆

DISC Profile Analyzer

Map your behavioral wiring and communication style.

DesignSuite
★

Role Fit Scorer

Evaluate career opportunities against your design.

Career Nav
Stat Card
Active Users
2,847
+12.4%
Tools Used
38
+3 new
Completion
94%
+5.2%
Person Card
JM

Jordan Mitchell

Design Strategist

Leading alignment frameworks for enterprise teams.

SK

Sarah Kim

Career Navigator

Helping professionals find purpose-driven roles.

RP

Raj Patel

Integration Coach

Bridging personal design with professional growth.

Pricing Card
Starter
$49/mo
  • DesignSuite Access
  • 5 Core Assessments
  • Basic Reports
  • Email Support
Professional
$149/mo
  • All 5 Pillars
  • 38 Tools Unlocked
  • Advanced Analytics
  • Priority Support
  • Team Dashboard
Enterprise
Custom
  • Everything in Pro
  • Custom Integrations
  • Dedicated Coach
  • White-label Option
  • SLA Guarantee
LLM Instructions

Always use --a360-surface for card backgrounds. Cards should have 1px solid --a360-border. Hover state: translateY(-4px) + enhanced shadow. Phase cards: 3px top border in phase color. Never stack more than 3 cards in a row on desktop.

HTML 
<!-- Standard Card -->
<div class="card">
  <h3>Card Title</h3>
  <p>Description text</p>
</div>

<!-- Phase Card -->
<div class="card phase-design">
  <span class="phase-tag design">DESIGNSUITE</span>
  <h3>Wiring for Impact</h3>
  <p>Discover your unique design and wiring.</p>
</div>
07 Badges, Tags & Status
Phase Pills
DesignSuite Career Nav Integrate360 627 Figures LegacyLab
Status Badges
Active Coming Soon Future Alert
Tool Count, Version & Category Tags
7 Tools 8 Tools 12 Tools
v6.1 v1.0.0 v2.3.1
Product Docs Branding AI System Assessment Framework
LLM Instructions

Phase pills use 0.08 opacity background with matching border. Status badges are self-contained. Never combine phase colors with unrelated status indicators.

HTML 
<!-- Phase Pill -->
<span class="badge-pill" style="
  color: var(--a360-phase-design);
  border-color: var(--a360-phase-design);
  background: rgba(122,164,156,0.08);
">DesignSuite</span>

<!-- Status Badge -->
<span class="status-badge status-active">Active</span>
<span class="status-badge status-coming">Coming Soon</span>

<!-- Tool Count -->
<span class="tool-count-badge">7 Tools</span>

<!-- Version Tag -->
<span class="version-tag">v6.1</span>

<!-- Category Tag -->
<span class="category-tag">Product Docs</span>
08 Complete CSS Export

All design tokens organized by category. Copy this block into any project to use the Align360 design system.

CSS — Full Token Export 
/* ============================================================
   ALIGN360 DESIGN SYSTEM — COMPLETE CSS TOKENS
   Version: 1.0.0
   Updated: 2026-03-09
   ============================================================ */

:root {
  /* ---- BRAND SURFACE SCALE ---- */
  --a360-black: #1a2830;
  --a360-dark: #2e3c45;
  --a360-surface: #354956;
  --a360-surface-2: #3d5362;
  --a360-surface-3: #455d6e;
  --a360-border: #4a6575;
  --a360-border-light: #5a7585;
  --a360-muted: #6a8595;
  --a360-stone: #8aa0ad;
  --a360-text-secondary: #b0c4cf;
  --a360-text: #edefe8;
  --a360-white: #ffffff;

  /* ---- ACCENT (TURQUOISE) ---- */
  --a360-accent: #7aa49c;
  --a360-accent-light: #95bcb5;
  --a360-accent-dark: #5f8a82;
  --a360-accent-subtle: rgba(122, 164, 156, 0.12);
  --a360-accent-glow: rgba(122, 164, 156, 0.06);

  /* ---- WARM (ORANGE) ---- */
  --a360-warm: #e09b67;
  --a360-warm-light: #e8b38a;
  --a360-warm-dark: #c47d47;

  /* ---- PHASE / PILLAR COLORS ---- */
  --a360-phase-design: #7aa49c;      /* DesignSuite */
  --a360-phase-career: #e09b67;      /* Career Navigator */
  --a360-phase-integrate: #6b9fd4;   /* Integrate360 */
  --a360-phase-figures: #d4a76b;     /* 627 Figures */
  --a360-phase-legacy: #e45742;      /* LegacyLab */

  /* ---- STATUS ---- */
  --a360-success: #7aa49c;
  --a360-warning: #e09b67;
  --a360-error: #e45742;
  --a360-info: #6b9fd4;

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Quicksand', sans-serif;
  --font-body: 'Quicksand', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- SPACING (8px base) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---- SHADOWS ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glow-accent: 0 0 20px rgba(122, 164, 156, 0.25);
  --glow-warm: 0 0 20px rgba(224, 155, 103, 0.25);
  --glow-error: 0 0 20px rgba(228, 87, 66, 0.25);

  /* ---- BORDER RADIUS ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 100px;
}