Token Reference

This page lists every default token value shipped with Typewriting Class. All tokens are available as named exports from their respective subpath imports.

Colors

All color palettes are Tailwind CSS-compatible. Each palette is an object with shades from 50 (lightest) to 950 (darkest).

Import: import { blue, red, ... } from 'typewritingclass/theme/colors'

Access: blue[500] returns the hex string '#3b82f6'.

Slate

Shade	Hex	Preview
50	`#f8fafc`
100	`#f1f5f9`
200	`#e2e8f0`
300	`#cbd5e1`
400	`#94a3b8`
500	`#64748b`
600	`#475569`
700	`#334155`
800	`#1e293b`
900	`#0f172a`
950	`#020617`

Gray

Shade	Hex	Preview
50	`#f9fafb`
100	`#f3f4f6`
200	`#e5e7eb`
300	`#d1d5db`
400	`#9ca3af`
500	`#6b7280`
600	`#4b5563`
700	`#374151`
800	`#1f2937`
900	`#111827`
950	`#030712`

Zinc

Shade	Hex	Preview
50	`#fafafa`
100	`#f4f4f5`
200	`#e4e4e7`
300	`#d4d4d8`
400	`#a1a1aa`
500	`#71717a`
600	`#52525b`
700	`#3f3f46`
800	`#27272a`
900	`#18181b`
950	`#09090b`

Neutral

Shade	Hex	Preview
50	`#fafafa`
100	`#f5f5f5`
200	`#e5e5e5`
300	`#d4d4d4`
400	`#a3a3a3`
500	`#737373`
600	`#525252`
700	`#404040`
800	`#262626`
900	`#171717`
950	`#0a0a0a`

Stone

Shade	Hex	Preview
50	`#fafaf9`
100	`#f5f5f4`
200	`#e7e5e4`
300	`#d6d3d1`
400	`#a8a29e`
500	`#78716c`
600	`#57534e`
700	`#44403c`
800	`#292524`
900	`#1c1917`
950	`#0c0a09`

Red

Shade	Hex	Preview
50	`#fef2f2`
100	`#fee2e2`
200	`#fecaca`
300	`#fca5a5`
400	`#f87171`
500	`#ef4444`
600	`#dc2626`
700	`#b91c1c`
800	`#991b1b`
900	`#7f1d1d`
950	`#450a0a`

Orange

Shade	Hex	Preview
50	`#fff7ed`
100	`#ffedd5`
200	`#fed7aa`
300	`#fdba74`
400	`#fb923c`
500	`#f97316`
600	`#ea580c`
700	`#c2410c`
800	`#9a3412`
900	`#7c2d12`
950	`#431407`

Amber

Shade	Hex	Preview
50	`#fffbeb`
100	`#fef3c7`
200	`#fde68a`
300	`#fcd34d`
400	`#fbbf24`
500	`#f59e0b`
600	`#d97706`
700	`#b45309`
800	`#92400e`
900	`#78350f`
950	`#451a03`

Yellow

Shade	Hex	Preview
50	`#fefce8`
100	`#fef9c3`
200	`#fef08a`
300	`#fde047`
400	`#facc15`
500	`#eab308`
600	`#ca8a04`
700	`#a16207`
800	`#854d0e`
900	`#713f12`
950	`#422006`

Lime

Shade	Hex	Preview
50	`#f7fee7`
100	`#ecfccb`
200	`#d9f99d`
300	`#bef264`
400	`#a3e635`
500	`#84cc16`
600	`#65a30d`
700	`#4d7c0f`
800	`#3f6212`
900	`#365314`
950	`#1a2e05`

Green

Shade	Hex	Preview
50	`#f0fdf4`
100	`#dcfce7`
200	`#bbf7d0`
300	`#86efac`
400	`#4ade80`
500	`#22c55e`
600	`#16a34a`
700	`#15803d`
800	`#166534`
900	`#14532d`
950	`#052e16`

Emerald

Shade	Hex	Preview
50	`#ecfdf5`
100	`#d1fae5`
200	`#a7f3d0`
300	`#6ee7b7`
400	`#34d399`
500	`#10b981`
600	`#059669`
700	`#047857`
800	`#065f46`
900	`#064e3b`
950	`#022c22`

Teal

Shade	Hex	Preview
50	`#f0fdfa`
100	`#ccfbf1`
200	`#99f6e4`
300	`#5eead4`
400	`#2dd4bf`
500	`#14b8a6`
600	`#0d9488`
700	`#0f766e`
800	`#115e59`
900	`#134e4a`
950	`#042f2e`

Cyan

Shade	Hex	Preview
50	`#ecfeff`
100	`#cffafe`
200	`#a5f3fc`
300	`#67e8f9`
400	`#22d3ee`
500	`#06b6d4`
600	`#0891b2`
700	`#0e7490`
800	`#155e75`
900	`#164e63`
950	`#083344`

Sky

Shade	Hex	Preview
50	`#f0f9ff`
100	`#e0f2fe`
200	`#bae6fd`
300	`#7dd3fc`
400	`#38bdf8`
500	`#0ea5e9`
600	`#0284c7`
700	`#0369a1`
800	`#075985`
900	`#0c4a6e`
950	`#082f49`

Blue

Shade	Hex	Preview
50	`#eff6ff`
100	`#dbeafe`
200	`#bfdbfe`
300	`#93c5fd`
400	`#60a5fa`
500	`#3b82f6`
600	`#2563eb`
700	`#1d4ed8`
800	`#1e40af`
900	`#1e3a8a`
950	`#172554`

Indigo

Shade	Hex	Preview
50	`#eef2ff`
100	`#e0e7ff`
200	`#c7d2fe`
300	`#a5b4fc`
400	`#818cf8`
500	`#6366f1`
600	`#4f46e5`
700	`#4338ca`
800	`#3730a3`
900	`#312e81`
950	`#1e1b4b`

Violet

Shade	Hex	Preview
50	`#f5f3ff`
100	`#ede9fe`
200	`#ddd6fe`
300	`#c4b5fd`
400	`#a78bfa`
500	`#8b5cf6`
600	`#7c3aed`
700	`#6d28d9`
800	`#5b21b6`
900	`#4c1d95`
950	`#2e1065`

Purple

Shade	Hex	Preview
50	`#faf5ff`
100	`#f3e8ff`
200	`#e9d5ff`
300	`#d8b4fe`
400	`#c084fc`
500	`#a855f7`
600	`#9333ea`
700	`#7e22ce`
800	`#6b21a8`
900	`#581c87`
950	`#3b0764`

Fuchsia

Shade	Hex	Preview
50	`#fdf4ff`
100	`#fae8ff`
200	`#f5d0fe`
300	`#f0abfc`
400	`#e879f9`
500	`#d946ef`
600	`#c026d3`
700	`#a21caf`
800	`#86198f`
900	`#701a75`
950	`#4a044e`

Pink

Shade	Hex	Preview
50	`#fdf2f8`
100	`#fce7f3`
200	`#fbcfe8`
300	`#f9a8d4`
400	`#f472b6`
500	`#ec4899`
600	`#db2777`
700	`#be185d`
800	`#9d174d`
900	`#831843`
950	`#500724`

Rose

Shade	Hex	Preview
50	`#fff1f2`
100	`#ffe4e6`
200	`#fecdd3`
300	`#fda4af`
400	`#fb7185`
500	`#f43f5e`
600	`#e11d48`
700	`#be123c`
800	`#9f1239`
900	`#881337`
950	`#4c0519`

Standalone colors

Export	Value	Description
`white`	`#ffffff`	Pure white
`black`	`#000000`	Pure black
`transparent`	`transparent`	Fully transparent
`currentColor`	`currentColor`	Inherits the current text color

Spacing

A numeric scale mapping unitless keys to rem-based values. Each unit equals 0.25rem (4px at default browser font size).

Import: import { spacingScale, resolveSpacing } from 'typewritingclass/theme/spacing'

Access: spacingScale[4] returns '1rem'.

Key	Value	Pixels (at 16px base)
`0`	`0px`	0px
`0.5`	`0.125rem`	2px
`1`	`0.25rem`	4px
`1.5`	`0.375rem`	6px
`2`	`0.5rem`	8px
`2.5`	`0.625rem`	10px
`3`	`0.75rem`	12px
`3.5`	`0.875rem`	14px
`4`	`1rem`	16px
`5`	`1.25rem`	20px
`6`	`1.5rem`	24px
`7`	`1.75rem`	28px
`8`	`2rem`	32px
`9`	`2.25rem`	36px
`10`	`2.5rem`	40px
`11`	`2.75rem`	44px
`12`	`3rem`	48px
`14`	`3.5rem`	56px
`16`	`4rem`	64px
`20`	`5rem`	80px
`24`	`6rem`	96px
`28`	`7rem`	112px
`32`	`8rem`	128px
`36`	`9rem`	144px
`40`	`10rem`	160px
`44`	`11rem`	176px
`48`	`12rem`	192px
`52`	`13rem`	208px
`56`	`14rem`	224px
`60`	`15rem`	240px
`64`	`16rem`	256px
`72`	`18rem`	288px
`80`	`20rem`	320px
`96`	`24rem`	384px

Typography

Text sizes

Each text size export is an object with fontSize and lineHeight properties.

Import: import { xs, sm, base, lg, xl, _2xl, _3xl, _4xl, _5xl, _6xl, _7xl, _8xl, _9xl } from 'typewritingclass/theme/typography'

Export	Font Size	Line Height	Pixels (at 16px base)
`xs`	`0.75rem`	`1rem`	12px / 16px
`sm`	`0.875rem`	`1.25rem`	14px / 20px
`base`	`1rem`	`1.5rem`	16px / 24px
`lg`	`1.125rem`	`1.75rem`	18px / 28px
`xl`	`1.25rem`	`1.75rem`	20px / 28px
`_2xl`	`1.5rem`	`2rem`	24px / 32px
`_3xl`	`1.875rem`	`2.25rem`	30px / 36px
`_4xl`	`2.25rem`	`2.5rem`	36px / 40px
`_5xl`	`3rem`	`1`	48px / tight
`_6xl`	`3.75rem`	`1`	60px / tight
`_7xl`	`4.5rem`	`1`	72px / tight
`_8xl`	`6rem`	`1`	96px / tight
`_9xl`	`8rem`	`1`	128px / tight

Font weights

Font weight exports are string constants representing CSS font-weight numeric values.

Import: import { thin, extralight, light, normal, medium, semibold, bold, extrabold, black_ } from 'typewritingclass/theme/typography'

Export	CSS Value	Description
`thin`	`100`	Thinnest available weight
`extralight`	`200`	Extra light
`light`	`300`	Light
`normal`	`400`	Normal / regular (browser default)
`medium`	`500`	Medium
`semibold`	`600`	Semi-bold
`bold`	`700`	Bold
`extrabold`	`800`	Extra bold
`black_`	`900`	Heaviest available weight

Shadows

Box-shadow values at increasing intensity levels.

Import: import { sm, DEFAULT, md, lg, xl, _2xl, inner, none } from 'typewritingclass/theme/shadows'

Export	Value
`sm`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`
`DEFAULT`	`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`
`md`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
`lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`
`xl`	`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`
`_2xl`	`0 25px 50px -12px rgb(0 0 0 / 0.25)`
`inner`	`inset 0 2px 4px 0 rgb(0 0 0 / 0.05)`
`none`	`0 0 #0000`

Shadow progression

The shadow scale progresses from subtle (sm) to dramatic (_2xl):

sm — A barely-visible shadow, useful for subtle depth cues on cards or inputs.
DEFAULT — A light shadow, suitable as a baseline card shadow.
md — A moderate shadow, commonly used for dropdowns and popovers.
lg — A pronounced shadow, suitable for modals and elevated surfaces.
xl — A heavy shadow, useful for floating elements and tooltips.
_2xl — The most dramatic shadow, for high-elevation overlays.
inner — An inset shadow, useful for pressed button states or inset input fields.
none — Removes any existing shadow.

Border radius

Border-radius values from subtle rounding to fully circular.

Import: import { none, sm, DEFAULT, md, lg, xl, _2xl, _3xl, full } from 'typewritingclass/theme/borders'

Export	Value	Pixels (at 16px base)	Description
`none`	`0px`	0px	No rounding
`sm`	`0.125rem`	2px	Subtle rounding
`DEFAULT`	`0.25rem`	4px	Standard rounding
`md`	`0.375rem`	6px	Medium rounding
`lg`	`0.5rem`	8px	Large rounding
`xl`	`0.75rem`	12px	Extra-large rounding
`_2xl`	`1rem`	16px	Very large rounding
`_3xl`	`1.5rem`	24px	Pronounced rounding
`full`	`9999px`	N/A	Pill shape / circle

Sizes

Named dimension values for width, height, and constraint utilities.

Import: import { full, screen, screenH, min, max, fit, auto } from 'typewritingclass/theme/sizes'

Export	Value	Description
`full`	`100%`	Fill the parent container
`screen`	`100vw`	Full viewport width
`screenH`	`100vh`	Full viewport height
`min`	`min-content`	Shrink to the minimum content size
`max`	`max-content`	Expand to the maximum content size
`fit`	`fit-content`	Fit to content, constrained by available space
`auto`	`auto`	Browser-determined automatic sizing

Quick import reference

A summary of all subpath imports and their key exports:

Subpath	Key Exports
`typewritingclass/theme/colors`	`slate`, `gray`, `zinc`, `neutral`, `stone`, `red`, `orange`, `amber`, `yellow`, `lime`, `green`, `emerald`, `teal`, `cyan`, `sky`, `blue`, `indigo`, `violet`, `purple`, `fuchsia`, `pink`, `rose`, `white`, `black`, `transparent`, `currentColor`
`typewritingclass/theme/spacing`	`spacingScale`, `resolveSpacing`
`typewritingclass/theme/typography`	`xs`, `sm`, `base`, `lg`, `xl`, `_2xl`, `_3xl`, `_4xl`, `_5xl`, `_6xl`, `_7xl`, `_8xl`, `_9xl`, `thin`, `extralight`, `light`, `normal`, `medium`, `semibold`, `bold`, `extrabold`, `black_`
`typewritingclass/theme/shadows`	`sm`, `DEFAULT`, `md`, `lg`, `xl`, `_2xl`, `inner`, `none`
`typewritingclass/theme/borders`	`none`, `sm`, `DEFAULT`, `md`, `lg`, `xl`, `_2xl`, `_3xl`, `full`
`typewritingclass/theme/sizes`	`full`, `screen`, `screenH`, `min`, `max`, `fit`, `auto`
`typewritingclass/theme`	All of the above, plus `createTheme`, `injectTheme`, `setTheme`