Brand palette
The core brand palette anchors every surface, component, and interaction across the platform. Pine Green carries the brand identity. Pineapple Yellow adds warmth. Cream provides breathing room.Core brand
| Color | Primary usage |
|---|---|
| Pine Green | Primary brand color, buttons, links, accents, shadow tints |
| Pineapple Yellow | Warm accent, Professor High elements, highlights |
| Cream | Page background (light mode) |
| Charcoal | Primary text color |
| Sage | Muted secondary elements |
| Sand | Mobile-specific accent |
| Pine Dark | Dark backgrounds, hover states |
| Pine Bright | Bright accents, success indicators |
Usage proportions
| Proportion | Color | Role |
|---|---|---|
| 60% | Cream | Backgrounds and breathing room |
| 25% | Pine Green | Primary actions, headers, accents |
| 10% | Charcoal | Text and secondary elements |
| 5% | Pineapple Yellow | Highlights and Professor High elements |
Neutral scale
A full 11-step neutral ramp from white to near-black. These grays handle borders, secondary text, surfaces, and disabled states.Neutrals
State colors
Semantic colors for feedback, validation, and system status.State colors
Strain type colors
The traditional cannabis classification colors used for sativa, indica, and hybrid indicators throughout the UI.Strain types
Strain type colors are used alongside the High Families classification. While the High Families are the primary classification system, strain type indicators remain in the UI for familiarity.
High Families colors
The High Families system replaces the outdated sativa/indica binary with six science-based effect families. Each family has a signature color and gradient used on cards, badges, and data visualizations.High Families
| Family | Study Cluster | Dominant Terpenes | Study % |
|---|---|---|---|
| Uplifting High | Uplifting Citrus | Limonene (4.99), Caryophyllene (2.54), Linalool (2.50) | 16.4% |
| Energetic High | Rare Energizer | Terpinolene (4.13), Ocimene (4.05), Myrcene (4.98) | 4.3% |
| Relaxing High | Relaxing Body | Myrcene (5.43), Caryophyllene (2.04) | 17.1% |
| Relieving High | Therapeutic Spice | Caryophyllene (3.63), Humulene (1.45), Limonene (2.38) | 25.0% |
| Balancing High | Gentle Balance | Caryophyllene (2.64), Humulene (1.00) — lowest total (7.61 mg/g) | 17.9% |
| Entourage High | Full Spectrum | Myrcene (4.77), Limonene (3.87), Caryophyllene (3.56) | 19.3% |
Colors are defined in
HIGH_FAMILIES in @tiwih/strain-filters. The source of truth is packages/strain-filters/src/index.ts. Terpene values are from Herwig et al. (2025), Table 1 (DOI: 10.1089/can.2024.0127). See High Families for the full consumer-to-study name mapping.Terpene colors
Each of the 17 terpenes tracked by the platform has a unique color drawn from its natural associations — warm earth tones for myrcene, gold for citrusy limonene, forest green for pinene.Common terpenes
Additional terpenes
The complete set of 17 terpene colors is defined in the
@tiwih/cannabis shared package. For the full list with aroma profiles, effects, and clinical evidence, see the source files.Cannabinoid colors
Colors for the eight cannabinoids tracked across the platform. Major cannabinoids (THC, CBD, CBG, CBN, CBC, THCV) appear most frequently in strain profiles and data visualizations.Cannabinoids
Accessibility
All color pairings must meet WCAG minimum contrast ratios. Here are the key combinations and their compliance:
- Charcoal (#1F2937) on Cream (#F7F4ED) passes WCAG AAA (ratio exceeds 7:1)
- Pine Green (#18634D) on Cream (#F7F4ED) passes WCAG AA for large text (ratio exceeds 3:1)
- Light terpene colors (Limonene #FFD700, Bisabolol #FFD700, Phytol #9ACD32, Fenchol #32CD32) need a contrast boost when used as text on light backgrounds — use them as background accents or pair with dark text
- All interactive elements must meet WCAG AA minimum contrast: 4.5:1 for normal text, 3:1 for large text and UI components
For developers
Source of truth files:apps/website/src/config/design-system/brand-colors.ts— brand palette, neutrals, state colors@tiwih/cannabispackage — strain type, terpene, and cannabinoid colorsapps/website/src/config/design-system/high-families.ts— High Families colorsapps/mobile/src/_config/design-system/colors.ts— mobile color tokens