# Foundations > Frame’s foundations: color tokens, brand gradient, typography, shadow, radius and spacing. Web page: https://system.beibeidesign.com/foundations/ ### Color tokens CSS variables with light + dark themes baked in. Toggle the moon/sun to compare. Each token shows its var name, the resolved value at the current theme, the canonical Tailwind class, and the primitives that consume it (click the eye toggle to expand). Surface bg-page --color-bg-page — `bg-bg-page` 9 primitives - PageLayout - SearchBox - StepIndicator - StatusTag - DarkToggle - SidebarSectionToggle - ConnectorCard - AttachmentChip - ChatPanel bg-message --color-bg-message — `bg-bg-message` 7 primitives - DarkToggle - AgentRequiredHint - ChatMessage - VoiceWaveform - AttachmentChip - ChatInput - ChatWelcomeState bg-hover --color-bg-hover — `bg-bg-hover` 21 primitives - SearchBox - SectionCount - ProgressBar - HeaderIconButton - MenuRow - IconBadge - StatusStrip - DarkToggle - AvatarMenu - AddRowButton - TextField - AutocompleteField - Chip - SolutionRow - ChoiceCard - InsightCard - TaskProgressCard - EmptyState - AttachmentChip - ChatInput - ChatWelcomeState sidebar --color-sidebar-bg — `bg-bg-sidebar` no primitive uses card-panel --color-card-panel-bg — `bg-bg-card` 3 primitives - ArtifactCard - AgentRequiredHint - MessageCard Text text-primary --color-text-primary — `text-text-primary` 53 primitives - HeaderBar - SearchBox - SidePanelHeader - SideCard - ToolbarPill - ToolbarIconButton - ToolbarSegmented - Switch - Checkbox - SectionCount - SectionTitle - ProgressBar - CategoryBreakdown - StepIndicator - TertiaryButton - GhostPillButton - HeaderIconButton - IconButton - MessageActions - MenuRow - IconBadge - TextButton - UserAvatar - DarkToggle - AvatarMenu - TextField - AutocompleteField - RangeSlider - DualRangeSlider - NavItem - SidebarSectionToggle - ConnectorCard - FilterChip - Chip - UtilityChip - SolutionRow - SummaryFooter - MetricCard - InsightCard - AreaChart - TaskProgressCard - HealthDimensionRow - ReviewItemCard - ArtifactCard - EmptyState - VersionRow - AgentRequiredHint - ChatMessage - AttachmentChip - ChatInput - ChatPanel - ChatWelcomeState - MessageCard text-secondary --color-text-secondary — `text-text-secondary` 23 primitives - Switch - Checkbox - CategoryBreakdown - HeaderIconButton - SegmentedToggle - MenuRow - StatusStrip - TextButton - ResourceLinkCard - AvatarMenu - AddRowButton - TextField - AutocompleteField - RangeSlider - DualRangeSlider - ConnectorCard - ChoiceCard - EmptyState - VersionRow - ChatMessage - AttachmentChip - ChatInput - MessageCard text-tertiary --color-text-tertiary — `text-text-tertiary` 4 primitives - MenuRow - ConnectorCard - VersionRow - ChatInput Stroke stroke-outline --color-stroke-outline — `border-stroke-outline` 18 primitives - ToolbarPill - ToolbarSegmented - Switch - Checkbox - StepIndicator - StatusTag - TertiaryButton - GhostPillButton - SegmentedToggle - AvatarMenu - RangeSlider - DualRangeSlider - ConnectorCard - FilterChip - Chip - UtilityChip - ChoiceCard - AttachmentChip Selected selected-bg --color-selected-bg — `bg-selected-bg` 9 primitives - ToolbarSegmented - Switch - Checkbox - IconButton - SegmentedToggle - FilterChip - Chip - ChoiceCard - ChatMessage selected-text --color-selected-text — `text-selected-text` 9 primitives - ToolbarSegmented - Switch - Checkbox - IconButton - SegmentedToggle - FilterChip - Chip - ChoiceCard - ChatMessage Accent accent-blue --color-accent-blue — `text-accent-blue` 4 primitives - SampleWorkspaceLabel - ResourceLinkCard - ChatInput - ChatWelcomeState accent-green --color-accent-green — `text-accent-green` 1 primitive - ChatWelcomeState accent-red --color-accent-red — `text-accent-red` no primitive uses accent-amber --color-accent-amber — `text-accent-amber` no primitive uses accent-orange --color-accent-orange — `text-accent-orange` no primitive uses accent-violet --color-accent-violet — `text-accent-violet` no primitive uses accent-neutral --color-accent-neutral — `text-accent-neutral` no primitive uses Status warning --color-warning — `text-warning` 1 primitive - ChatWelcomeState error --color-error — `text-error` 3 primitives - DangerButton - TextField - ChatInput ### Overlay glass surface One treatment for every surface that floats OVER content — dialog, dropdown, menu, popover, overlay navigation, overlay Inspector. In dark mode it is pure black at 50% AND a 10px backdrop blur, applied together by the .overlay-surface class; the colour is not exposed as a Tailwind class on its own, so a consumer cannot take the fill and miss the blur. Light mode keeps the opaque fill overlays already shipped with. It is a background fill, so the fill-or-border rule applies: no border by default. Not for inline panes, page canvases, passive cards, on-media controls or tooltips. .overlay-surface Foreground stays fully opaque — backdrop-filter only touches what is behind. Computed background — Computed backdrop-filter — Light mode is unchanged: .overlay-surface keeps the opaque sidebar fill and declares no backdrop-filter at all. Flip the moon to compare. ### Brand gradient Three-stop signature gradient — every CTA, app shell, nav highlight and chip-hover border resolves through these stops. Equal-status with color tokens, not a color sub-group. Stops start --brand-grad-start — mid --brand-grad-mid — end --brand-grad-end — Utility classes Gradient text `.gradient-text` Primary CTA `.gradient-btn` Hover me `.chip-gradient-hover` Active nav `.gradient-ring` `.app-bg — outer shell background` ### Typography Use the .type-* helper classes — never hardcode font-size / line-height / letter-spacing. Token change in one place propagates everywhere. The quick brown fox .type-display-xl Display XL — oversized stat The quick brown fox .type-display Display — page title The quick brown fox .type-h1--emphasized H1 emphasized — section banner The quick brown fox .type-h1 H1 — section banner (regular) The quick brown fox .type-h2-emphasized H2 emphasized — card title The quick brown fox .type-h2 H2 — header label The quick brown fox .type-h3 H3 — sub-heading The quick brown fox .type-body-emphasized Body emphasized — markdown bold The quick brown fox .type-body Body — chat bubble copy The quick brown fox .type-detail-emphasized Detail emphasized — list label The quick brown fox .type-detail Detail — meta description The quick brown fox .type-caption Caption — meta line / counter The quick brown fox .type-footnote Footnote — tooltip / hint ### Shadow Sparse on purpose — only two semantic depths plus the gradient-btn lift. Light mode shadows turn into 1px gradient rings on dark canvas (shadows read as muddy glows on dark). thumb --shadow-thumb Slider thumb / draggable knob Hover me card-hover --shadow-card-hover `.card-hover-shadow` Card hover lift (light only — dark uses gradient ring instead) Lift gradient-btn `.gradient-btn` Brand gradient CTA — internal box-shadow lift on hover/active Light mode active — toggle the sun/moon to see how dark mode swaps shadows for gradient rings. ### Radius Five-step radius scale. The shell radius (40px) is the outer app rounding; pill (9999px) is for tags and gradient CTAs. sm --radius-sm 8px Pills, small cards, inputs md --radius-md 12px Section cards, modal panels lg --radius-lg 16px Composer, chat-input panel pill --radius-pill 9999px Tags, status pills, gradient buttons shell --radius-shell 40px Outer app shell rounded corner ### Spacing Use Tailwind spacing scale. Common rhythms: 1.5 (6px), 2 (8px), 3 (12px), 4 (16px), 6 (24px), 8 (32px). gap-1.5 6px gap-2 8px gap-3 12px gap-4 16px gap-6 24px gap-8 32px