⚒️ Tailwind Tokens — Trinity Design System
DITEMPA BUKAN DIBERI — Forged, Not Given.
Purpose
Maintain Tailwind CSS configuration aligned with Trinity design tokens: federation colour palette, organ-specific accents, dark theme, CSS variable bridge for dynamic theming.
When to Use
- Setting up or modifying
tailwind.config.{ts,js} for any federation surface
- Defining colour tokens, spacing scale, typography, breakpoints
- Dark theme implementation —
class strategy, CSS variable integration
- Organ-specific theming (arifOS amber, GEOX teal, WEALTH gold, WELL violet)
When NOT to Use
- Component-level styling decisions — use TW utility classes directly
- Animation/keyframe definitions — belong in CSS, not token config
- Runtime theme switching outside the Trinity design seam contract
Constitutional Floor Alignment
| Floor |
Application |
| F1 AMANAH |
Token renames must be staged; deprecated tokens kept as aliases for one cycle |
| F2 TRUTH |
Token values in config must match design spec; no drift between figma → config |
| F4 CLARITY |
Max 3 grey neutrals, 5 colour steps per hue — no infinite token explosion |
| F6 MARUAH |
Colour contrast meets WCAG AA minimum; dignity in readability |
| F13 SOVEREIGN |
Brand colours (primary, accent) approved by Arif before deploy |
Commands & Patterns
// tailwind.config.ts — Trinity token structure
colors: {
midnight: { 50: '...', 900: '...' }, // base neutral
forge: { 500: '#f59e0b', ... }, // amber — action
geox: { 500: '#14b8a6', ... }, // teal — earth
wealth: { 500: '#fbbf24', ... }, // gold — capital
well: { 500: '#8b5cf6', ... }, // violet — human
sovereign:{ 500: '#ef4444', ... }, // red — veto
}
// CSS variable bridge for dynamic theming
:root { --color-forge: theme('colors.forge.500'); }
// Dark theme — class strategy
darkMode: 'class',
// Usage: <html class="dark"> or <ThemeToggle />
Refusal Surface
- ❌ Inline styles or
style={} for anything themable via token
- ❌ Hex values outside the token config (no colour literals in components)
- ❌ Removing deprecated tokens without alias fallback
- ❌ RGB/HSL values that lack WCAG AA contrast verification
1---2id: FORGE-tailwind-tokens3name: forge-tailwind-tokens4version: 1.0.0-2026.07.175description: "Tailwind design tokens — Trinity Design System for federation cockpit and web surfaces."6owner: A-FORGE7risk_tier: low8floor_scope: ['F1', 'F4']9autonomy_tier: T110capability_tier: fed-reasoning-heavy11ecology_state: WARM12---1314# ⚒️ Tailwind Tokens — Trinity Design System1516> **DITEMPA BUKAN DIBERI** — Forged, Not Given.1718## Purpose19Maintain Tailwind CSS configuration aligned with Trinity design tokens: federation colour palette, organ-specific accents, dark theme, CSS variable bridge for dynamic theming.2021## When to Use22- Setting up or modifying `tailwind.config.{ts,js}` for any federation surface23- Defining colour tokens, spacing scale, typography, breakpoints24- Dark theme implementation — `class` strategy, CSS variable integration25- Organ-specific theming (arifOS amber, GEOX teal, WEALTH gold, WELL violet)2627## When NOT to Use28- Component-level styling decisions — use TW utility classes directly29- Animation/keyframe definitions — belong in CSS, not token config30- Runtime theme switching outside the Trinity design seam contract3132## Constitutional Floor Alignment3334| Floor | Application |35|-------|-------------|36| F1 AMANAH | Token renames must be staged; deprecated tokens kept as aliases for one cycle |37| F2 TRUTH | Token values in config must match design spec; no drift between figma → config |38| F4 CLARITY | Max 3 grey neutrals, 5 colour steps per hue — no infinite token explosion |39| F6 MARUAH | Colour contrast meets WCAG AA minimum; dignity in readability |40| F13 SOVEREIGN | Brand colours (primary, accent) approved by Arif before deploy |4142## Commands & Patterns4344```ts45// tailwind.config.ts — Trinity token structure46colors: {47 midnight: { 50: '...', 900: '...' }, // base neutral48 forge: { 500: '#f59e0b', ... }, // amber — action49 geox: { 500: '#14b8a6', ... }, // teal — earth50 wealth: { 500: '#fbbf24', ... }, // gold — capital51 well: { 500: '#8b5cf6', ... }, // violet — human52 sovereign:{ 500: '#ef4444', ... }, // red — veto53}5455// CSS variable bridge for dynamic theming56:root { --color-forge: theme('colors.forge.500'); }5758// Dark theme — class strategy59darkMode: 'class',60// Usage: <html class="dark"> or <ThemeToggle />61```6263## Refusal Surface64- ❌ Inline styles or `style={}` for anything themable via token65- ❌ Hex values outside the token config (no colour literals in components)66- ❌ Removing deprecated tokens without alias fallback67- ❌ RGB/HSL values that lack WCAG AA contrast verification
ariffazil 