Design System · v0.1

A quiet system for
team intelligence.

The shared vocabulary behind AlignLabs. Tokens, typography, surfaces and DISC visualizations — composed for calm, editorial clarity.

Back home →
01 · Foundations

Color

Background
--background
Foreground
--foreground
Card
--card
Accent
--accent
D · Dominance
--disc-d
I · Influence
--disc-i
S · Steadiness
--disc-s
C · Conscientiousness
--disc-c
02 · Foundations

Typography

al-eyebrow · JetBrains Mono 10/0.18em
Team intelligence
al-display · Inter Tight 800

The human prism.

al-headline · Inter Tight 700

Four bands of light.

al-title · Inter Tight 700

A quiet conversation with yourself

al-lead · Inter 400

AlignLabs translates the complexity of human behavior into clear, actionable team intelligence.

al-body · Inter 400

DISC isn't a box you fit into — it's a spectrum you move along.

03 · Foundations

Spacing & rhythm

Sections breathe at al-section (5–8rem) for primary chapters, and al-section-tight for nested rhythms. Container max-width is 80rem.

16px
24px
32px
40px
48px
64px
80px
96px
04 · Components

Buttons

Variants
Sizes
05 · Components

Surfaces

Raised

Soft white card

The default container for content modules.

Quiet

Calm group surface

For grouped or secondary content.

Interactive

Hovers gently

Subtle lift on hover, no neon shadows.

06 · Components

Avatars & chips

DISC-tinted avatars
D
D
I
I
S
S
C
C
Chips
StrategicReflectiveDominanceInfluenceSteadinessConscientiousness
07 · DISC visualizations

Prism & distribution

Prism bars · personal profile
DDominance68%
IInfluence42%
SSteadiness81%
CConscientiousness57%
Team distribution

Aggregate behavioral spread across the team — never a single dominant color.

08 · Team modules

Balance matrix

2×2 balance

Where the team's weight sits

D1
I2
C1
S2
Roster

Who's in the room

  • ML
    Maya LindqvistProduct Lead
    Dominance · Conscientiousness
    D/C
  • JV
    Jonas VikDesign
    Influence · Steadiness
    I/S
  • SH
    Sara HolmEngineering
    Conscientiousness · Dominance
    C/D
  • TN
    Theo NorénResearch
    Steadiness · Influence
    S/I
  • IP
    Ines ParkMarketing
    Influence
    I
  • AE
    Adrian EkOperations
    Steadiness
    S
09 · Team modules

Insights

Intelligence summary

A driving core, gently anchored

The team leads with directness and ideation, but holds itself together through steady, supportive contributors. Decisions move quickly; follow-through is intentional.

Synergy

Vision meets execution

High-D and high-C members balance ambition with rigor. Use this pairing on initiatives that need both speed and structural integrity.

Risk

Quiet voices in fast meetings

Steadiness-leaning members may withhold concerns when the room moves quickly. Build in slow moments for them to speak.

Communication pattern

Direct + diplomatic

Most team conversations land best when framed first, then sharpened — context, then conclusion.

10 · Personal

Archetype headline

Your archetype

The Strategic Visionary.

Dominance/Conscientiousness