← FoundationsNEXDATAFORGE / TOKEN DOCUMENTATION
Design tokens
Shared raw, semantic, and component decisions for Studio surfaces.
Token architecture
Foundation v1.1Raw values establish the palette and scale. Semantic tokens describe intent. Component tokens are reserved for repeated component decisions that semantic tokens cannot express. Website foundation tokens extend layout, spacing, and typography roles without replacing Product Core tokens.
01 RawBlue, neutral, space, radius
02 SemanticPage, surface, text, action, status
03 ComponentButton, card, input, navigation
04 WebsiteContainer, content width, section rhythm
Color tokens
Foundation v1.1--ndf-color-bg-page#07111fSemantic preview usage--ndf-color-bg-surface#112236Semantic preview usage--ndf-color-text-primary#f5f8fcSemantic preview usage--ndf-color-action-primary#4dd7c8Semantic preview usage--ndf-color-status-warning#f0b44bSemantic preview usage--ndf-blue-700#315dffRaw preview usageTypography, spacing, radius, and shadow
Foundation v1.1Page title / 32 / 1.15Clear hierarchy for focused work
Body text uses the existing sans family and readable line height.
--ndf-space-14px--ndf-space-28px--ndf-space-416px--ndf-space-624px--ndf-space-832px--ndf-space-1248pxSmall
Medium
Large
Shadow
Website foundation tokens
Foundation v1.1Website tokens are additive semantic aliases for repeatable marketing pages. They reuse the existing spacing scale where possible and avoid page-specific palette decisions.
--ndf-website-container1180px--ndf-website-container-wide1360px--ndf-website-content-width760px--ndf-website-heading-width920px--ndf-website-description-width860px--ndf-website-readable-width680px--ndf-website-section-space48px--ndf-website-hero-space-block80pxMotion and z-index
Foundation v1.1--ndf-motion-duration-fast120ms / small control feedback--ndf-motion-duration-normal200ms / enter and exit--ndf-z-header30 / named layer order--ndf-z-dialog60 / named overlay orderUsage guide
Foundation v1.1RecommendedPrefer semantic tokens. Match tokens to purpose, preserve the shared scale, and add a new value only after checking the existing system.
AvoidDo not scatter component HEX values, arbitrary spacing, unbounded z-index values, or theme-specific CSS copies.