T

TEG-Blue Design System

Visual Reference

Rainbow Palette — Base Colors

The 10 base colors of the TEG-Blue Rainbow Palette.

Teal#00d4aa

Cyan#40d8ee

Green#a0e85a

Yellow#ffe040

Orange#ffb830

Pink Hot#ff50e6

Violet#a080ff

Lavender#c8a0ff

Pink Light#f0a0ff

Blue#008cff

Base Color Tones

Each base color has 4 tones: Dark 50%, Base, Light 40%, Light 70%.

Teal

Dark 50%

#006a55

Base

#00d4aa

Light 40%

#66e5cc

Light 70%

#b2f2e5

Cyan

Dark 50%

#206c77

Base

#40d8ee

Light 40%

#8ce7f4

Light 70%

#c5f3f9

Green

Dark 50%

#50742d

Base

#a0e85a

Light 40%

#c6f19c

Light 70%

#e2f8cd

Yellow

Dark 50%

#7f7020

Base

#ffe040

Light 40%

#ffec8c

Light 70%

#fff5c5

Orange

Dark 50%

#7f5c18

Base

#ffb830

Light 40%

#ffd482

Light 70%

#ffe9c0

Pink Hot

Dark 50%

#7f2873

Base

#ff50e6

Light 40%

#ff96f0

Light 70%

#ffcaf7

Violet

Dark 50%

#50407f

Base

#a080ff

Light 40%

#c6b2ff

Light 70%

#e2d8ff

Lavender

Dark 50%

#64507f

Base

#c8a0ff

Light 40%

#dec6ff

Light 70%

#eee2ff

Pink Light

Dark 50%

#78507f

Base

#f0a0ff

Light 40%

#f6c6ff

Light 70%

#fae2ff

Blue

Dark 50%

#00467f

Base

#008cff

Light 40%

#66baff

Light 70%

#b2dcff

Light Mode Cards

Yellow

#ffe040

Sample body text on a light accent card.

Green

#a0e85a

Sample body text on a light accent card.

Cyan

#40d8ee

Sample body text on a light accent card.

Lavender

#c8a0ff

Sample body text on a light accent card.

Pink Light

#f0a0ff

Sample body text on a light accent card.

Orange

#ffb830

Sample body text on a light accent card.

Teal

#00d4aa

Sample body text on a light accent card.

Blue

#008cff

Sample body text on a light accent card.

Violet

#a080ff

Sample body text on a light accent card.

Pink Hot

#ff50e6

Sample body text on a light accent card.

Light Mode Specs

Background

Solid accent color (100% opacity)

Stroke

None — no visible border

Border Radius

12px

Title

18px / 600, accent darkened ~55%

Subtitle

14px / 400, accent darkened ~55%

Body Text

13px / 400, accent darkened ~55%

Light Mode Color Mapping

#ffe040→#7a6a1a

#a0e85a→#4a6828

#40d8ee→#1a5c66

#c8a0ff→#5c4875

#f0a0ff→#6e4575

#ffb830→#7a5510

#00d4aa→#006650

#008cff→#003a66

#a080ff→#4a3a75

#ff50e6→#802873

Accent Cards

Yellow

#ffe040

Sample body text on a solid accent card.

Green

#a0e85a

Sample body text on a solid accent card.

Cyan

#40d8ee

Sample body text on a solid accent card.

Lavender

#c8a0ff

Sample body text on a solid accent card.

Pink Light

#f0a0ff

Sample body text on a solid accent card.

Orange

#ffb830

Sample body text on a solid accent card.

Teal

#00d4aa

Sample body text on a solid accent card.

Blue

#008cff

Sample body text on a solid accent card.

Violet

#a080ff

Sample body text on a solid accent card.

Pink Hot

#ff50e6

Sample body text on a solid accent card.

Accent Card Specs

Background

Solid accent color (100% opacity)

Stroke

None — no visible border

Border Radius

12px

Title

14px / 600, white or #0a1628 based on contrast

Subtitle

10px / 400, same color at 70% opacity

Body Text

11px / 400, same color at 80% opacity

Duotone Gradients

oceanBreeze#00d4aa, #40d8ee

twilight#a080ff, #ff50e6

aurora#00d4aa, #a080ff

frost#40d8ee, #c8a0ff

sunset#ffb830, #ff50e6

sunrise#ffe040, #ffb830

electric#40d8ee, #ff50e6

tropical#00d4aa, #ffe040

Tritone Gradients

deepSeateal → cyan → violet

cosmicviolet → pinkHot → lavender

firelightyellow → orange → pinkHot

prismcyan → violet → pinkHot

tegSignatureteal → cyan → pinkHot

tegVibrantviolet → pinkHot → orange

tegCalmteal → lavender → violet

Rainbow Variations

fullteal → cyan → green → yellow → orange → pinkHot → violet → lavender

essentialsteal → yellow → pinkHot → violet

minimalcyan → pinkHot → violet

Four Mode Colors

Connection

#14b8a6

Protection

#eab308

Control

#f97316

Domination

#ec4899

Background Colors (Dark Mode)

Primary

Deep Navy

#0f172a

--bg-primary

Secondary

Slate-800

#1e293b

--bg-secondary

Surface

Very Dark Blue

#0a1628

--bg-surface

Text Colors (Dark Mode)

PrimaryThe quick brown fox100%#ffffff

SecondaryThe quick brown fox85%rgba(255,255,255,0.85)

MutedThe quick brown fox55%rgba(255,255,255,0.55)

HintThe quick brown fox35%rgba(255,255,255,0.35)

Borders & Surfaces

Default Border

--border-default: rgba(255,255,255,0.1)

Hover Border

--border-hover: rgba(255,255,255,0.2)

Active Border

--border-active: rgba(255,255,255,0.3)

Elevated Surface

--surface-elevated: rgba(255,255,255,0.05)

Opacity Usage Scale

Card hover bg

2–5%

bg-mode-connection/5

Subtle overlay

5–8%

mode-connection/5

Card background

10–15%

mode-connection/10

Border subtle

10%

border-overlay-10

Border default

20%

mode-connection/20

Border strong

30%

mode-connection/30

Hover bg

15%

hover:bg-mode-connection/15

Hover border

40%

hover:border-mode-connection/40

Shadows & Glows

Glow Teal

0 0 20px rgba(0,212,170,0.3)

Glow Cyan

0 0 20px rgba(64,216,238,0.3)

Glow Pink

0 0 20px rgba(255,80,230,0.3)

Glow Violet

0 0 20px rgba(160,128,255,0.3)

Gradient Text

Rainbow Heading

Gradient Heading

Warm Firelight

Warm Firelight Subhead

Gradient Bars

Simple

ConnectionProtectionControlDomination

Advanced

Safety

Threat

Danger

Life peril

Connection

Protection

Control

Domination

Deep Diver (Researcher)

Blueprint Grids

Background grid overlay with 5 sizes and 5 fade masks. Used across page backgrounds for technical feel.

Grid Sizes

XS

Dense, circuit-board feel

SM

Detailed, technical

MD

Balanced

LG

Spacious — default

XL

Architectural, breathing room

Fade Masks

Center

Fade from center outward

Top

Fade from top down

Edges

Visible in center

Subtle

Light all-over fade

None

No fade mask

With Color Tints

Sky tint

rgba(125,211,252,0.02)

Teal tint

rgba(20,184,166,0.02)

Violet tint

rgba(160,128,255,0.02)

Pink tint

rgba(236,72,153,0.02)

BlueprintGrid Props

size

xs(24) / sm(40) / md(60) / lg(80) / xl(120)

fade

center / top / edges / subtle / none

opacity

0–1, default 0.45

tint

rgba color overlay, e.g. rgba(125,211,252,0.02)

fixed

true = viewport-fixed, false = absolute

dots

true/false — intersection dots (default true)