Design System

Visual reference for TGDS design tokens. All values are sourced from the codebase and kept in sync with SCSS, Tailwind, and styled-components.

Colors

src/style/tokens/_colors.scss

Brand

blue

#2E00B2

var(--blue)

yellow

#ffe900

var(--yellow)

red

#b51429

var(--red)

Blue Variants

blue-light-gradient

#2F05D1

var(--blue-light-gradient)

blue-dark-gradient

#1C0089

var(--blue-dark-gradient)

rich-blue

#4216F7

var(--rich-blue)

light-blue

#5c26f5

var(--light-blue)

dark-blue

#000081

var(--dark-blue)

blue-star-bang

#2a00ff

var(--blue-star-bang)

Semantic

green

Success

#0AC057

var(--green)

orange-red

Error

#fa4802

var(--orange-red)

orange

Warning

#dda81a

var(--orange)

orange-review

Review

#fabb14

var(--orange-review)

Grey Scale

white

black

white

#fff

var(--white)

grey05

#FCFCFC

var(--grey05)

grey10

#F8F8F8

var(--grey10)

grey20

#F4F4F4

var(--grey20)

grey30

#F0F0F0

var(--grey30)

grey35

#ECECEC

var(--grey35)

grey40

#B1B1B1

var(--grey40)

Typography

src/style/tokens/_typography.scss

Font Families

Gotham A, Gotham B

font-family: 'Gotham A', 'Gotham B', sans-serif

SFMono-Regular, Consolas, Roboto Mono

var(--font-monospace)

Type Scale

Display

The quick brown fox

6vw / 2.5rem

.text-clamp-6

The quick brown fox

3.125vw / 2rem

.text-clamp-3.12

The quick brown fox

2.5vw / 1.75rem

.text-clamp-2.5

The quick brown fox

2.1vw / 1.3125rem

.text-clamp-2.1

The quick brown fox

1.56vw / 1.125rem

.text-clamp-1.56

The quick brown fox

1.11vw / 1.0625rem

.text-clamp-1.11

Body

The quick brown fox

0.833vw / 1rem

.text-clamp-0.833

Small

The quick brown fox

0.7vw / 0.875rem

.text-clamp-0.7

XSmall

The quick brown fox

0.55vw / 0.625rem

.text-clamp-0.55

Font Weights

Book (300)

.font-book

Normal (400)

.font-normal

Semibold (500)

.font-semibold

Bold (700)

.font-bold

XBold (800)

.font-xbold

Line Heights

Line
Height

None (1)

.leading-none

Line
Height

Tight (1.25)

.leading-tight

Line
Height

Snug (1.4)

.leading-snug

Line
Height

Normal (1.5)

.leading-normal

Line
Height

Relaxed (1.6)

.leading-relaxed

Line
Height

Loose (1.75)

.leading-loose

Line
Height

Double (2)

.leading-double

Spacing

src/style/tokens/_spacing.scss, _spacing_ratios.scss

VW Scale (Viewport Width)

0.25vw

.mt-0.25

0.5vw

.mt-0.5

1vw

.mt-1

1.5vw

.mt-1.5

2vw

.mt-2

3vw

.mt-3

4vw

.mt-4

5vw

.mt-5

6vw

.mt-6

7vw

.mt-7

8vw

.mt-8

10vw

.mt-10

12vw

.mt-12

Golden Ratio Scale (φ = 1.618)

sp1

≈ 27px

var(--sp1)

sp2

≈ 44px

var(--sp2)

sp3

≈ 71px

var(--sp3)

sp4

≈ 115px

var(--sp4)

sp5

≈ 186px

var(--sp5)

sp6

≈ 301px

var(--sp6)

sp7

≈ 487px

var(--sp7)

sp8

≈ 788px

var(--sp8)

Breakpoints

src/style/tokens/_breakpoints.scss, src/style/responsive.js

Name	Value	Tailwind	SCSS	Styled	Description
Phone	480px	N/A	$phone-bp	phone`...`	Small mobile devices
Tablet/Mobile	1028px	mo:	$tablet-bp	mobile`...`	Tablets and mobile (max-width)
Desktop	1920px	desktop:	$xl-bp	wide`...`	Large screens (min-width)

Usage Examples

// Tailwind
<div className="hidden mo:block">
// SCSS
@media (max-width: $tablet-bp) { ... }
// styled-components
import { mobile } from '@style/responsive'
${mobile`padding: 1rem;`}

Shadows

src/style/generic/_shadow.scss

shadow

.shadow

Deep layered shadow for elevated elements

shadow-lite

.shadow-lite

Subtle shadow for cards and containers