Foundation

Foundation values for every runtime.

HODS foundations define color, dimension, radius, typography, and runtime CSS variables before components add behavior.

Palette

Raw color values for brand, neutral, status, and code surfaces.

$color.palette.static-black#000000

$color.palette.static-white#FFFFFF

$color.palette.navy100#F8FAFC

$color.palette.navy200#E2E8F0

$color.palette.navy300#CBD5E1

$color.palette.navy400#94A3B8

$color.palette.navy500#64748B

$color.palette.navy600#2563EB

$color.palette.navy700#1D4ED8

$color.palette.navy800#334155

$color.palette.navy900#0F172A

$color.palette.navy1000#020617

$color.palette.gray100#F8FAFC

$color.palette.gray600#475569

$color.palette.gray700#334155

$color.palette.gray800#1E293B

$color.palette.gray900#0F172A

$color.palette.gray1000#020617

$color.palette.cyan500#0F766E

$color.palette.cyan600#115E59

$color.palette.red500#EF4444

$color.palette.red600#DC2626

$color.palette.red700#B91C1C

$color.palette.green600#16A34A

$color.palette.yellow500#CA8A04

Semantic Color

Light theme roles consumed by components and application surfaces.

$color.fg.brand#2563EB

$color.fg.brand-contrast#FFFFFF

$color.fg.neutral#0F172A

$color.fg.neutral-muted#475569

$color.fg.neutral-subtle#64748B

$color.fg.neutral-inverted#FFFFFF

$color.fg.placeholder#94A3B8

$color.fg.informative#2563EB

$color.fg.positive#16A34A

$color.fg.warning#CA8A04

$color.fg.critical#DC2626

$color.fg.disabled#CBD5E1

$color.bg.layer-basement#F8FAFC

$color.bg.layer-default#FFFFFF

$color.bg.layer-default-pressed#E2E8F0

$color.bg.layer-floating#FFFFFF

$color.bg.brand-solid#2563EB

$color.bg.brand-solid-pressed#1D4ED8

$color.bg.brand-weak#DBEAFE

$color.bg.neutral-weak#F1F5F9

$color.bg.neutral-weak-pressed#E2E8F0

$color.bg.neutral-solid-muted#E2E8F0

$color.bg.critical-solid#DC2626

$color.bg.critical-weak#FEE2E2

$color.bg.overlay#0F172A99

$color.stroke.brand-solid#2563EB

$color.stroke.brand-weak#BFDBFE

$color.stroke.informative-solid#2563EB

$color.stroke.informative-weak#BFDBFE

$color.stroke.neutral-weak#E2E8F0

$color.stroke.neutral-muted#CBD5E1

$color.stroke.focus-ring#2563EB

$color.stroke.critical-solid#DC2626

$color.code.cyan#0F766E

$color.code.blue#2563EB

$color.code.green#16A34A

$color.code.yellow#CA8A04

$color.code.red#DC2626

Dark Color

Dark theme values with the same role names as the light foundation.

$color.dark.fg.brand#93C5FD

$color.dark.fg.brand-contrast#020617

$color.dark.fg.neutral#E2E8F0

$color.dark.fg.neutral-muted#94A3B8

$color.dark.fg.neutral-subtle#64748B

$color.dark.fg.neutral-inverted#020617

$color.dark.fg.placeholder#64748B

$color.dark.fg.informative#93C5FD

$color.dark.fg.positive#86EFAC

$color.dark.fg.warning#FDE68A

$color.dark.fg.critical#FCA5A5

$color.dark.fg.disabled#475569

$color.dark.bg.layer-basement#020617

$color.dark.bg.layer-default#0F172A

$color.dark.bg.layer-default-pressed#1E293B

$color.dark.bg.layer-floating#111827

$color.dark.bg.brand-solid#3B82F6

$color.dark.bg.brand-solid-pressed#2563EB

$color.dark.bg.brand-weak#172554

$color.dark.bg.neutral-weak#1E293B

$color.dark.bg.neutral-weak-pressed#334155

$color.dark.bg.neutral-solid-muted#334155

$color.dark.bg.critical-solid#DC2626

$color.dark.bg.critical-weak#450A0A

$color.dark.bg.overlay#00000099

$color.dark.stroke.brand-solid#3B82F6

$color.dark.stroke.brand-weak#1D4ED8

$color.dark.stroke.informative-solid#60A5FA

$color.dark.stroke.informative-weak#1E3A8A

$color.dark.stroke.neutral-weak#334155

$color.dark.stroke.neutral-muted#475569

$color.dark.stroke.focus-ring#60A5FA

$color.dark.stroke.critical-solid#DC2626

$color.dark.code.cyan#5EEAD4

$color.dark.code.blue#93C5FD

$color.dark.code.green#86EFAC

$color.dark.code.yellow#FDE68A

$color.dark.code.red#FCA5A5

Dimension

Spacing and sizing steps shared across layout and component props.

$dimension.x0.52

$dimension.x14

$dimension.x1.56

$dimension.x28

$dimension.x312

$dimension.x416

$dimension.x520

$dimension.x624

$dimension.x832

$dimension.x1248

$dimension.x1664

$dimension.x2288

Radius

Corner radius values for controls, overlays, and full pills.

$radius.r14

$radius.r1.56

$radius.r28

$radius.r312

$radius.r4.518

$radius.r728

$radius.full9999

Typography

Text styles for editorial hierarchy, product UI, and code blocks.

$typography.display-xlfont-size: 72; line-height: 1.05; font-weight: 700; letter-spacing: -2.4

$typography.display-lgfont-size: 52; line-height: 1.08; font-weight: 700; letter-spacing: -1.6

$typography.display-mdfont-size: 38; line-height: 1.12; font-weight: 700; letter-spacing: -0.8

$typography.headlinefont-size: 28; line-height: 1.2; font-weight: 650; letter-spacing: 0

$typography.card-titlefont-size: 21; line-height: 1.25; font-weight: 650; letter-spacing: 0

$typography.bodyfont-size: 16; line-height: 1.5; font-weight: 400; letter-spacing: 0

$typography.body-smfont-size: 14; line-height: 1.45; font-weight: 400; letter-spacing: 0

$typography.captionfont-size: 12; line-height: 1.35; font-weight: 500; letter-spacing: 0

$typography.buttonfont-size: 14; line-height: 1.2; font-weight: 650; letter-spacing: 0

$typography.monofont-size: 13; line-height: 1.5; font-weight: 500; letter-spacing: 0

Runtime

React users can load the CSS foundation from the React package directly.

import "@hozorica/hods-react/tokens.css";

document.documentElement.dataset.theme = "light";