Skip to main content

Brand

Brand Guide

Complete brand identity options for team review. Toggle dark/light previews per section.

1. Brand Color Options

13 primary color candidates with full 50-950 scales

Light

Blue

#3B82F6User pick

Cool, confident, infrastructure-grade

50
100
200
300
400
500
600
700
800
900
950

Indigo

#6366F1User pick

Blue-purple bridge, dev tooling sweet spot

50
100
200
300
400
500
600
700
800
900
950

Purple

#7C3AEDUser pick

Intelligent, authoritative

50
100
200
300
400
500
600
700
800
900
950

Electric Teal

#14B8A6AI pick

Fresh, distinctive, breaks from blue ecosystem

50
100
200
300
400
500
600
700
800
900
950

Emerald

#10B981AI pick

"Resolved, handled" -- aligns with product promise

50
100
200
300
400
500
600
700
800
900
950

Amber/Gold

#F59E0BAI pick

Bold, uncommon in dev tools

50
100
200
300
400
500
600
700
800
900
950

Sky Blue

#0EA5E9Current

Reference only -- very common in TS ecosystem

50
100
200
300
400
500
600
700
800
900
950

Rose

#F43F5EAI pick

Warm energy, bold and distinctive

50
100
200
300
400
500
600
700
800
900
950

Cyan

#06B6D4AI pick

Cool precision, strong dark-mode contrast

50
100
200
300
400
500
600
700
800
900
950

Zinc

#71717AAI pick

Muted authority, pairs with bright accents

50
100
200
300
400
500
600
700
800
900
950

Lime

#84CC16AI pick

High-energy accent, terminal green vibes

50
100
200
300
400
500
600
700
800
900
950

Fuchsia

#D946EFAI pick

Vibrant, creative, maximum energy

50
100
200
300
400
500
600
700
800
900
950

Orange

#F97316AI pick

Urgent energy, uncommon in dev tools

50
100
200
300
400
500
600
700
800
900
950

Dark

Blue

#3B82F6User pick

Cool, confident, infrastructure-grade

50
100
200
300
400
500
600
700
800
900
950

Indigo

#6366F1User pick

Blue-purple bridge, dev tooling sweet spot

50
100
200
300
400
500
600
700
800
900
950

Purple

#7C3AEDUser pick

Intelligent, authoritative

50
100
200
300
400
500
600
700
800
900
950

Electric Teal

#14B8A6AI pick

Fresh, distinctive, breaks from blue ecosystem

50
100
200
300
400
500
600
700
800
900
950

Emerald

#10B981AI pick

"Resolved, handled" -- aligns with product promise

50
100
200
300
400
500
600
700
800
900
950

Amber/Gold

#F59E0BAI pick

Bold, uncommon in dev tools

50
100
200
300
400
500
600
700
800
900
950

Sky Blue

#0EA5E9Current

Reference only -- very common in TS ecosystem

50
100
200
300
400
500
600
700
800
900
950

Rose

#F43F5EAI pick

Warm energy, bold and distinctive

50
100
200
300
400
500
600
700
800
900
950

Cyan

#06B6D4AI pick

Cool precision, strong dark-mode contrast

50
100
200
300
400
500
600
700
800
900
950

Zinc

#71717AAI pick

Muted authority, pairs with bright accents

50
100
200
300
400
500
600
700
800
900
950

Lime

#84CC16AI pick

High-energy accent, terminal green vibes

50
100
200
300
400
500
600
700
800
900
950

Fuchsia

#D946EFAI pick

Vibrant, creative, maximum energy

50
100
200
300
400
500
600
700
800
900
950

Orange

#F97316AI pick

Urgent energy, uncommon in dev tools

50
100
200
300
400
500
600
700
800
900
950

2. Color Combo Pairings

16 primary + accent combos with logo, hero, and UI mockups

Light

Option A

Purple+Emerald

AE Verdict: Product & Strategy favorite -- "intelligence that delivers"

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option B

Teal+Purple

AE Verdict: UX & Marketing favorite -- best accessibility, fresh

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option C

Indigo+Emerald

AE Verdict: Technical precision + resolution

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option D

Purple+Amber

AE Verdict: Authority + bold command

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option E

Blue+Teal

AE Verdict: Trusted + modern

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option F

Indigo+Amber

AE Verdict: Precision + authority

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option G

Purple+Teal

AE Verdict: Authority + energy

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option H

Blue+Purple

AE Verdict: Trusted foundation + intelligent depth

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option I

Teal+Amber

AE Verdict: Highest-contrast complementary pair, visually arresting

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option J

Indigo+Teal

AE Verdict: Cool-spectrum with excellent contrast ratios

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option K

Emerald+Purple

AE Verdict: Flipped A — green-primary, high trademark distinctiveness

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option L

Rose+Cyan

AE Verdict: Bold warmth balanced by cool precision

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option M

Zinc+Lime

AE Verdict: Understated base with high-energy accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option N

Fuchsia+Teal

AE Verdict: Vibrant energy with grounded cool accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option O

Slate+Violet

AE Verdict: Professional restraint with intelligent accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option P

Orange+Indigo

AE Verdict: High-energy primary with deep precision accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Dark

Option A

Purple+Emerald

AE Verdict: Product & Strategy favorite -- "intelligence that delivers"

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option B

Teal+Purple

AE Verdict: UX & Marketing favorite -- best accessibility, fresh

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option C

Indigo+Emerald

AE Verdict: Technical precision + resolution

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option D

Purple+Amber

AE Verdict: Authority + bold command

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option E

Blue+Teal

AE Verdict: Trusted + modern

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option F

Indigo+Amber

AE Verdict: Precision + authority

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option G

Purple+Teal

AE Verdict: Authority + energy

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option H

Blue+Purple

AE Verdict: Trusted foundation + intelligent depth

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option I

Teal+Amber

AE Verdict: Highest-contrast complementary pair, visually arresting

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option J

Indigo+Teal

AE Verdict: Cool-spectrum with excellent contrast ratios

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option K

Emerald+Purple

AE Verdict: Flipped A — green-primary, high trademark distinctiveness

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option L

Rose+Cyan

AE Verdict: Bold warmth balanced by cool precision

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option M

Zinc+Lime

AE Verdict: Understated base with high-energy accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option N

Fuchsia+Teal

AE Verdict: Vibrant energy with grounded cool accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option O

Slate+Violet

AE Verdict: Professional restraint with intelligent accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

Option P

Orange+Indigo

AE Verdict: High-energy primary with deep precision accent

directive

State that resolves itself.

Documentation linkcreateModule()

Constraints are evaluated reactively. When facts change, relevant constraints re-evaluate automatically.

3. Typography Options

8 font pairings -- Display + Body + Code

Light

Option 1

Space Grotesk · IBM Plex Sans · IBM Plex Mono

Top Pick (3/4 AEs)

Top pick (3/4 AEs) -- Technical authority, differentiated from ecosystem

Headings -- Space Grotesk

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- IBM Plex Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- IBM Plex Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 2

Space Grotesk · Geist Sans · Geist Mono

Modern "Vercel aesthetic", infrastructure-grade feel. Geist fonts require separate installation.

Headings -- Space Grotesk

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Geist Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Geist Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 3

Manrope · Inter · JetBrains Mono

Safe + one twist. Inter already cached on most devices

Headings -- Manrope

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Inter

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- JetBrains Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 4

Outfit · IBM Plex Sans · IBM Plex Mono

Strong hierarchy, purpose-built for technical docs

Headings -- Outfit

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- IBM Plex Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- IBM Plex Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 5

Satoshi · DM Sans · JetBrains Mono

Editorial credibility, premium but approachable. Satoshi requires Fontshare CDN.

Headings -- Satoshi

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- DM Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- JetBrains Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 6

Plus Jakarta Sans · Source Sans 3 · Source Code Pro

Clean geometric display with neutral professional body

Headings -- Plus Jakarta Sans

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Source Sans 3

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Source Code Pro

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 7

Bricolage Grotesque · Geist Sans · Fira Code

Eclectic display with modern body and ligature-rich code font

Headings -- Bricolage Grotesque

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Geist Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Fira Code

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 8

General Sans · Inter · Berkeley Mono

Premium geometric display with trusted body and luxury code font

Headings -- General Sans

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Inter

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Berkeley Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Dark

Option 1

Space Grotesk · IBM Plex Sans · IBM Plex Mono

Top Pick (3/4 AEs)

Top pick (3/4 AEs) -- Technical authority, differentiated from ecosystem

Headings -- Space Grotesk

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- IBM Plex Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- IBM Plex Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 2

Space Grotesk · Geist Sans · Geist Mono

Modern "Vercel aesthetic", infrastructure-grade feel. Geist fonts require separate installation.

Headings -- Space Grotesk

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Geist Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Geist Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 3

Manrope · Inter · JetBrains Mono

Safe + one twist. Inter already cached on most devices

Headings -- Manrope

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Inter

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- JetBrains Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 4

Outfit · IBM Plex Sans · IBM Plex Mono

Strong hierarchy, purpose-built for technical docs

Headings -- Outfit

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- IBM Plex Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- IBM Plex Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 5

Satoshi · DM Sans · JetBrains Mono

Editorial credibility, premium but approachable. Satoshi requires Fontshare CDN.

Headings -- Satoshi

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- DM Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- JetBrains Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 6

Plus Jakarta Sans · Source Sans 3 · Source Code Pro

Clean geometric display with neutral professional body

Headings -- Plus Jakarta Sans

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Source Sans 3

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Source Code Pro

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 7

Bricolage Grotesque · Geist Sans · Fira Code

Eclectic display with modern body and ligature-rich code font

Headings -- Bricolage Grotesque

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Geist Sans

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Fira Code

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

Option 8

General Sans · Inter · Berkeley Mono

Premium geometric display with trusted body and luxury code font

Headings -- General Sans

H1 -- State that resolves itself

H2 -- State that resolves itself

H3 -- State that resolves itself

H4 -- State that resolves itself

Body -- Inter

16px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

14px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

12px

Directive is a constraint-driven runtime for TypeScript. Declare requirements, let resolvers fulfill them, and inspect everything through a unified reactive system with built-in time-travel debugging.

Code -- Berkeley Mono

const system = createSystem({
  module: trafficLight,
  plugins: [loggingPlugin()],
});

// Constraints resolve automatically
system.facts.phase = "red";
await system.settle();

4. Semantic Colors

Shared across all options -- consistent meaning regardless of brand choice

Success

Emerald-600 · #059669

Positive outcomes, confirmations

Warning

Amber-600 · #D97706

Caution states, non-blocking alerts

Error

Red-600 · #DC2626

Failures, blocking issues

Info

Sky-600 · #0284C7

Informational, neutral highlights

5. Neutral Scale

Full Slate scale with usage labels

Light

50#f8fafcLight background
100#f1f5f9Alt background
200#e2e8f0Border, divider
300#cbd5e1Disabled border
400#94a3b8Placeholder text
500#64748bSecondary text
600#475569Body text (light mode)
700#334155Strong text (light mode)
800#1e293bSurface (dark mode)
900#0f172aBackground (dark mode)
950#020617Deep background

Dark

50#f8fafcLight background
100#f1f5f9Alt background
200#e2e8f0Border, divider
300#cbd5e1Disabled border
400#94a3b8Placeholder text
500#64748bSecondary text
600#475569Body text (light mode)
700#334155Strong text (light mode)
800#1e293bSurface (dark mode)
900#0f172aBackground (dark mode)
950#020617Deep background

6. AE Team Brand Review

All 20 AE agents voted on color combos (A-K) and typography (1-5). Rankings show primary and secondary (2nd choice) vote counts.

Color Combo Rankings

1st2nd
#1
C4/201/20Winner
#2
J4/202/20
#3
I3/203/20
#4
D2/201/20
#5
H2/202/20
#6
A1/201/20
#7
B1/200/20
#8
E1/203/20
#9
F1/204/20
#10
K1/201/20
#11
G0/202/20
#12
L0/200/20
#13
M0/200/20
#14
N0/200/20
#15
O0/200/20
#16
P0/200/20

Typography Rankings

1st2nd
#11 8/205/20Winner
#22 5/203/20
#33 3/203/20
#44 2/204/20
#55 2/205/20
#66 0/200/20
#77 0/200/20
#88 0/200/20

Proposals & Recommendations

social-kit

Create a simplified logomark variant optimized for 32x32 and 16x16 rendering for GitHub org avatars, npm badges, and Discord server icons.

The full wordmark becomes unreadable at small sizes used across most developer social touchpoints.

Proposed by Avery Social — Community & Social Media

testing

Run a quick A/B preference test in a developer Discord or Twitter poll with the top 2-3 color combos shown on a mock npm README card.

Actual developer reactions will validate or override our assumptions about what reads as trustworthy vs. novel.

Proposed by Taylor Product — Product Manager

accessibility

Generate a full accessibility matrix: contrast ratios for every foreground/background combination at AA and AAA levels, plus simulated renders under protanopia, deuteranopia, and tritanopia.

This becomes part of the brand guidelines to prevent downstream accessibility regressions in docs and marketing.

Proposed by Blake UX — UX/UI Designer

compliance

Run a WCAG 2.2 contrast audit on the final palette at 14px body text and 12px code text sizes before shipping.

Contrast ratios that pass at 16px often fail at sizes actually used in docs and terminal output.

Proposed by Quinn QA-Security — QA + Security

performance

Ship fonts as woff2 subsets with unicode-range splitting and use font-display: optional for code fonts to prevent layout jank.

Streaming UI can never show layout shifts from late-loading monospace metrics.

Proposed by River Streaming — Streaming Engineer

testing

Set up a simple split test on the landing page hero with the top two combos measuring scroll depth and CTA click-through before locking the palette.

A 48-hour test with even moderate traffic gives directional signal and removes subjectivity.

Proposed by Val Analytics — Data Analytics + Revenue

licensing

Confirm all finalist fonts are SIL Open Font License or equivalent with no per-seat or commercial-use licensing exposure as adoption scales.

Zero per-seat or redistribution restrictions eliminates future cost surprises.

Proposed by Morgan Finance — CFO

compliance

Run a WCAG 2.2 AA audit against the winning combo — specifically test primary color on both white and dark backgrounds at body-text size to confirm 4.5:1 contrast ratios hold.

Documented compliance reduces legal exposure and signals engineering quality to enterprise buyers.

Proposed by Jordan Legal — Chief Legal Officer

brand-element

Pair the winning combo with a simple geometric logomark based on the "constraint resolution" concept — a shape that transforms or completes.

Builds ownable visual IP beyond just color and type, creating a memorable symbol for the category.

Proposed by Nova Ventures — Chief Innovation Officer

community

Define a "community" color variant — slightly warmer or lighter — for contributor-facing materials like onboarding docs, Discord branding, and welcome emails.

The brand should feel human alongside the technical precision in contributor-facing contexts.

Proposed by Morgan HR — CHRO

verification

Run a Lighthouse audit on font loading strategy — subset to Latin, use font-display: swap, preload only display weight. Budget: zero CLS, total payload under 80KB.

Font performance is a proxy for engineering credibility in a developer library.

Proposed by Riley Systems — Architecture + Performance

implementation

Define CSS custom properties for the full color scale from day one (--directive-primary-50 through --directive-primary-950) supporting dark mode, high contrast, and component variants.

Avoids ad-hoc hex values and prevents tech debt in the design system.

Proposed by Dana Frontend — Frontend Engineer

verification

Document named ANSI terminal equivalents for brand colors (e.g., teal maps to ANSI cyan, amber to ANSI yellow) so CLI tools use on-brand colors without custom 24-bit escape sequences.

Makes brand consistency achievable even in constrained terminal color environments.

Proposed by Harper Infrastructure — DevOps Engineer

Individual Reviews

We care about your data. We'll never share your email.

Powered by Directive. This signup uses a Directive module with facts, derivations, constraints, and resolvers – zero useState, zero useEffect. Read how it works →