Brand colors

Overpex uses one semantic color contract across platforms. The canonical, machine-readable source is packages/brand/tokens/; CSS, TypeScript, SwiftUI, Kotlin, and resolved JSON adapters are generated under packages/brand/generated/.

Application interface code should use semantic roles instead of raw hex values or primitive palette names.

Interface colors

Semantic role	Dark	Light	Usage
`background.canvas`	`#0F172A`	`#FFFFFF`	General application/page background
`background.brand`	`#020617`	`#020617`	Intentional dark marketing surface
`background.navigation`	`#0B1220`	`#F8FAFC`	Navigation chrome
`surface.default`	`#1E293B`	`#F8FAFC`	Cards, panels, and sheets
`surface.raised`	`#334155`	`#F1F5F9`	Elevated or selected surfaces
`surface.subtle`	`#475569`	`#E2E8F0`	Subtle surface emphasis
`text.primary`	`#FFFFFF`	`#0F172A`	Primary text
`text.secondary`	`#E2E8F0`	`#1E293B`	Supporting text
`text.muted`	`#94A3B8`	`#475569`	Hints and metadata
`text.disabled`	`#64748B`	`#64748B`	Disabled content only
`border.default`	`#334155`	`#CBD5E1`	Standard dividers and borders
`border.strong`	`#475569`	`#64748B`	Strong boundaries

Actions and statuses

Color pairs are part of the token contract. Do not substitute white text on the dark-theme primary green.

Role	Dark fill / foreground	Light fill / foreground
`action.primary`	`#10B981` / `#0F172A`	`#047857` / `#FFFFFF`
`status.danger`	`#EF4444` / `#0F172A`	`#B91C1C` / `#FFFFFF`
`status.warning`	`#F59E0B` / `#0F172A`	`#B45309` / `#FFFFFF`
`status.info`	`#3B82F6` / `#0F172A`	`#1D4ED8` / `#FFFFFF`

The token generator enforces a minimum 4.5:1 contrast ratio for these filled control pairs.

Feature identity

Feature colors identify types in UI such as menus, legends, and badges. They do not set newly created map content.

Token	Value
`feature.marker`	`#10B981`
`feature.road`	`#3B82F6`
`feature.polygon`	`#8B5CF6`
`feature.circle`	`#F59E0B`
`feature.access`	`#EF4444`
`feature.extrusion`	`#059669`
`feature.vegetation`	`#22C55E`
`feature.geomesh`	`#06B6D4`

Content defaults are separate

Persisted map colors are data. For example, feature.access is red in UI taxonomy, while content.access.color.default is blue (#3B82F6) for a newly created access point. A theme change never recolors existing map records.

Consuming the tokens

CSS: import packages/brand/generated/css/overpex-colors.css and use variables such as var(--op-color-text-muted).
TypeScript: import colorThemes, featureColors, or contentColorDefaults from the generated TypeScript module.
iOS and Android: integrate the generated SwiftUI or Kotlin value file behind the platform’s existing AppTheme API.

Run npm run tokens:build after editing sources and npm run tokens:check in validation. See packages/brand/tokens/README.md and decision record packages/brand/docs/decisions/001-color-token-foundation.md for the full contract.