Neptune is built on a consistent design tokens system. Every color, size, or font traces back to a single token. Changing one token cascades to everything bound to it.

#Why tokens?

Before: changing the primary color meant editing 30 different components. After: change one variable, every component matches automatically.

#Core tokens

css
:root {
  --color-background: 240 11% 4%;
  --color-foreground: 240 9% 96%;
  --color-primary: 193 82% 31%;
  --color-accent: 187 85% 53%;
  --color-border: 240 8% 16%;
  --radius: 0.75rem;
}

#Edit via the Salla panel

Every token has a control in the "Customize theme" panel:

VariablePanelType
--color-primaryBrand → Primary colorColor picker
--color-accentBrand → Accent colorColor picker
--color-backgroundBrand → BackgroundColor picker
--font-familyBrand → FontDropdown
--radiusAppearance → Corner radiusSlider (0-1.5rem)

#Edit via code (devs only)

css
/* In Custom CSS */
.light {
  --color-primary: 200 90% 40%;  /* different primary in light mode */
}

[data-section="hero"] {
  --section-padding: 6rem 0;     /* override hero only */
}

#Customization examples

#Change brand primary

css
:root {
  --color-primary: 280 70% 50%;  /* purple instead of teal */
  --color-accent: 290 90% 70%;
}

#Switch font to Tajawal

css
:root {
  --font-family: 'Tajawal', system-ui, sans-serif;
}