Summary
Tokens connect the Opries brand palette to repeatable product implementation. Product code should use semantic token names so meaning, accessibility, and theme behaviour stay stable.
Token Strategy
The public palette maps to semantic product tokens. Product code should use semantic names wherever possible, so colour meaning remains stable even if brand artwork changes later.
CSS Variables
:root {
--background: #f8f0e0;
--foreground: #16211c;
--white: #ffffff;
--paperbark: #f8f0e0;
--earth: #1b211a;
--primary: #4f654d;
--primary-foreground: #ffffff;
--secondary: #e6f1ef;
--secondary-foreground: #16211c;
--muted: #edf3ec;
--muted-foreground: #58695f;
--border: #d3ded3;
--border-strong: #7c897f;
--ring: #8a5a18;
--info-background: #e6f1ef;
--info-foreground: #266f7a;
--info-border: #6f9698;
--grass: #e5a54e;
--grass-foreground: #1b211a;
--success: #4f654d;
--success-background: #e1e8dc;
--success-foreground: #4f654d;
--success-border: #718568;
--warning: #8a5a18;
--warning-background: #fff4d8;
--warning-foreground: #8a5a18;
--warning-border: #9a6a1f;
--destructive: #9d2d24;
--destructive-background: #fde8e4;
--destructive-foreground: #ffffff;
--destructive-text: #9d2d24;
--destructive-border: #b15d55;
}
[data-theme="dark"],
.dark {
--background: #1b211a;
--foreground: #f8f0e0;
--surface: #334a38;
--surface-soft: #4f654d;
--primary: #4f654d;
--primary-foreground: #f8f0e0;
--secondary: #266f7a;
--secondary-foreground: #f8f0e0;
--muted: #334a38;
--muted-foreground: #d8d0c0;
--border: #58695f;
--border-strong: #d3ded3;
--ring: #f8f0e0;
--info-background: #266f7a;
--info-foreground: #f8f0e0;
--info-border: #d3ded3;
--grass: #e5a54e;
--grass-foreground: #1b211a;
--success: #4f654d;
--success-background: #4f654d;
--success-foreground: #f8f0e0;
--success-border: #d3ded3;
--warning: #8a5a18;
--warning-background: #8a5a18;
--warning-foreground: #f8f0e0;
--warning-border: #d3ded3;
--destructive: #9d2d24;
--destructive-background: #9d2d24;
--destructive-foreground: #ffffff;
--destructive-text: #f8f0e0;
--destructive-border: #d3ded3;
}
Tailwind Mapping
| Token | Tailwind role | Use |
|---|---|---|
primary | bg-primary text-primary-foreground | Main actions, selected state |
secondary | bg-secondary text-secondary-foreground | Information panels and secondary buttons |
muted | bg-muted text-muted-foreground | Table headers, metadata, inactive chrome |
destructive | bg-destructive text-destructive-foreground | Delete, reject, overdue |
ring | focus-visible:ring-ring | Keyboard focus and review emphasis |
border-strong | border-border-strong | Tables, controls, and important boundaries |
warning-foreground | text-warning-foreground | Warning copy on warning backgrounds |
grass-foreground | text-grass-foreground | Text on Grass accent fills |
destructive-text | text-destructive-text | Danger copy on danger backgrounds |
Background Rules
Use pale semantic backgrounds only with their matching foreground and border tokens. Do not place white text on success-background, warning-background, destructive-background, secondary, or muted.
Use border for quiet visual rhythm and border-strong when the boundary carries meaning, such as table grids, form controls, callouts, and status panels.
Theme Rules
Keep semantic token names stable across themes and keep the same core Opries colours. In dark mode, some colours change role for accessibility: Water, Ochre, and Clay work as fills, not normal text on dark backgrounds.
| Semantic role | Light token value | Dark token value |
|---|---|---|
background | #ffffff or #f8f0e0 | #1b211a |
foreground | #16211c | #f8f0e0 |
paperbark | #f8f0e0 | #f8f0e0 |
earth | #1b211a | #1b211a |
primary | #4f654d | #4f654d |
primary-foreground | #ffffff | #f8f0e0 |
secondary | #e6f1ef | #266f7a |
secondary-foreground | #16211c | #f8f0e0 |
grass | #e5a54e | #e5a54e |
grass-foreground | #1b211a | #1b211a |
warning | #8a5a18 | #8a5a18 |
warning-foreground | #8a5a18 | #f8f0e0 |
destructive | #9d2d24 | #9d2d24 |
destructive-text | #9d2d24 | #f8f0e0 |
border-strong | #7c897f | #d3ded3 |
Export Files
Use assets/tokens/opries.tokens.json for design-token exchange and assets/tokens/opries.css for direct CSS variable import.
Use assets/tokens/opries-print-colours.json for v1 print-production references, including approximate CMYK percentages and closest visual PMS matches for the approved palette.
The same token files are also published with the documentation site for sibling Opries projects that need a stable browser-accessible reference while the final subdomain is being configured:
| File | Temporary URL | Use |
|---|---|---|
| CSS tokens | https://opries-style-guide.pages.dev/tokens/opries.css | Direct CSS variable reference for websites, prototypes, and document sites |
| JSON tokens | https://opries-style-guide.pages.dev/tokens/opries.tokens.json | Structured token reference for build tooling or manual checks |
| Print colours | https://opries-style-guide.pages.dev/tokens/opries-print-colours.json | CMYK and PMS print-production reference |
When the final style guide subdomain is live, keep the same paths and replace only the domain.
Checks
- Is product code using semantic token names rather than hard-coded colour values?
- Do light and dark theme tokens keep the same core Opries colour identity?
- Are status colours paired with text labels and accessible foregrounds?
- Have exported token files been updated when documented token values change?