CSS Design Tokens

CSS Design Tokens

All Jetonomy design tokens are defined in :root, .jt-app inside assets/css/jetonomy.css. Every visual property in the UI draws from these tokens. Never hardcode px, hex colors, or font stacks directly in component CSS.

Inheritance Chain

Tokens follow a three-tier inheritance model:

BuddyNext theme.json  >  WordPress preset  >  Hardcoded fallback

In practice, this means each token resolves through nested var() calls:

var(--brand, var(--wp--preset--color--primary, #3B82F6))

If BuddyNext defines --brand, it wins. Otherwise WordPress theme.json presets apply. If neither exists, the hardcoded fallback is used.

---

Token Categories

Typography

Token	Purpose
--jt-font	Body text font stack
--jt-font-heading	Heading font stack
--jt-font-mono	Code / monospace font stack

Accent

Token	Default
--jt-accent	#3B82F6
--jt-accent-hover	Darker variant for hover/focus states
--jt-accent-light	Light tint for backgrounds and badges
--jt-accent-muted	Subtle accent for disabled/secondary elements

Text

Token	Default
--jt-text	#1a1a1a
--jt-text-secondary	#4B5563
--jt-text-tertiary	#6B7280

Background

Token	Default
--jt-bg	#ffffff
--jt-bg-subtle	#F9FAFB
--jt-bg-muted	#F3F4F6
--jt-bg-hover	#F9FAFB

Border

Token	Purpose
--jt-border	Default border color
--jt-border-strong	Emphasized border (inputs, separators)

Semantic Colors

Token	Default	Purpose
--jt-success	#16a34a	Positive actions, confirmations
--jt-success-light	Light tint	Success backgrounds
--jt-warn	#ca8a04	Warnings, caution states
--jt-warn-light	Light tint	Warning backgrounds
--jt-danger	#dc2626	Errors, destructive actions
--jt-danger-light	Light tint	Error backgrounds

Trust Levels

Each trust level has a dedicated color token used for badges, labels, and profile indicators.

Token	Default	Level
--jt-tl0	#9ca3af	New
--jt-tl1	#60a5fa	Active
--jt-tl2	#34d399	Regular
--jt-tl3	#a78bfa	Trusted
--jt-tl4	#f472b6	Expert
--jt-tl5	#fbbf24	Moderator

Badge Tiers

Token	Purpose
--jt-badge-bronze	Bronze tier badge color
--jt-badge-silver	Silver tier badge color
--jt-badge-gold	Gold tier badge color

Radius

Token	Default
--jt-radius	8px
--jt-radius-sm	4px
--jt-radius-lg	12px
--jt-radius-full	9999px

Motion

Token	Default	Purpose
--jt-ease	cubic-bezier(...)	Standard easing curve
--jt-dur	0.15s	Default transition duration

---

Dark Mode

Dark mode is applied via the .jt-dark .jt-app selector. It overrides root tokens globally, so individual components do not need their own dark-mode selectors.

/* Correct - defined once at the token level */
.jt-dark .jt-app {
    --jt-bg: #111827;
    --jt-text: #f3f4f6;
    /* ... all other overrides ... */
}

/* Wrong - never write per-component dark selectors */
.jt-dark .jt-post-card {
    background: #111827; /* DO NOT DO THIS */
}

All components automatically inherit dark mode through the token system. If you need a new color for dark mode, add a token override in .jt-dark .jt-app, never in a component class.

---

Rules

1. Never hardcode values. No raw px, hex colors, or font-family strings in component CSS. Always reference a token.

2. Add new tokens to :root, .jt-app first. Any new design value must be registered as a token before use.

3. Color-mix fallback pattern. When using color-mix(), always provide the hex fallback first, then the color-mix() override:

   .jt-element {
       /* Fallback for browsers without color-mix support */
       background: #dbeafe;
       /* Progressive enhancement */
       background: color-mix(in srgb, var(--jt-accent) 15%, transparent);
   }

4. Test at 390px viewport. All token-dependent layouts must be verified at mobile width to ensure nothing breaks with scaled values.