Skip to content
Sandbox · Sprint 26

Theme Builder

Preset
Seed
Agency
--ds-color-agency
Agency Subtle
--ds-color-agency-subtle
Agency Fg
--ds-color-agency-fg
Temporal
--ds-color-temporal
Temporal Subtle
--ds-color-temporal-subtle
Temporal Fg
--ds-color-temporal-fg
Validation
--ds-color-validation
Validation Subtle
--ds-color-validation-subtle
Validation Fg
--ds-color-validation-fg
Small (sm)
3px
Medium (md)
6px
Large (lg)
8px
Live Preview — Finance Dashboard
Treasury Agent
AI-initiated · active
Agency
Temporal
Valid.
Cash Position
$142.3M
+2.1%
Open FX
89.7M
−0.4%
Pending Auth
14
needs review
Entity
Amount
Status
Action
Meridian Capital
$24.1M
approved
Nova Bancorp
$8.7M
pending
Acme Treasury
$55.0M
flagged
Export Theme
import { createTheme } from "@nodus-ds/tokens";

const theme = createTheme({
  id: "custom",
  colors: {
    agency:           "#D42020",
    agencySubtle:     "#FFEBEB",
    agencyFg:         "#FFFFFF",
    temporal:         "#2B44D4",
    temporalSubtle:   "#EBEBFF",
    validation:       "#C49A1A",
    surfaceGround:    "#FFFFFF",
    surfaceRaised:    "#F8F8F8",
    surfaceInverse:   "#18181B",
    textPrimary:      "#18181B",
    textSecondary:    "#3A3A3A",
    textMuted:        "#757575",
    textInverse:      "#FFFFFF",
    borderStructure:  "#D4D4D4",
    borderSeparator:  "#E8E8E8",
  },
  radius: {
    sm: "3px",
    md: "6px",
    lg: "8px",
  },
});

export default theme;