> ## Documentation Index
> Fetch the complete documentation index at: https://docs.highailabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color system

> Full color palette — brand colors, strain types, terpene colors, High Families colors, state colors, and accessibility notes.

## 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.

<Color variant="table">
  <Color.Row title="Core brand">
    <Color.Item name="Pine Green" value="#18634D" />

    <Color.Item name="Pineapple Yellow" value="#D98E04" />

    <Color.Item name="Cream" value="#F7F4ED" />

    <Color.Item name="Charcoal" value="#1F2937" />

    <Color.Item name="Sage" value="#9CAF88" />

    <Color.Item name="Sand" value="#D4C5A0" />

    <Color.Item name="Pine Dark" value="#0F2E1F" />

    <Color.Item name="Pine Bright" value="#22C55E" />
  </Color.Row>
</Color>

| 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

<Tip>
  Pine Green is the hero. Pineapple Yellow is the sidekick. Use it sparingly.
</Tip>

| 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.

<Color variant="table">
  <Color.Row title="Neutrals">
    <Color.Item name="0 (White)" value="#FFFFFF" />

    <Color.Item name="50" value="#F9FAFB" />

    <Color.Item name="100" value="#F3F4F6" />

    <Color.Item name="200" value="#E5E7EB" />

    <Color.Item name="300" value="#D1D5DB" />

    <Color.Item name="400" value="#9CA3AF" />

    <Color.Item name="500" value="#6B7280" />

    <Color.Item name="600" value="#4B5563" />

    <Color.Item name="700" value="#374151" />

    <Color.Item name="800" value="#1F2937" />

    <Color.Item name="900" value="#111827" />
  </Color.Row>
</Color>

## State colors

Semantic colors for feedback, validation, and system status.

<Color variant="table">
  <Color.Row title="State colors">
    <Color.Item name="Success" value="#059669" />

    <Color.Item name="Warning" value="#D97706" />

    <Color.Item name="Error" value="#DC2626" />

    <Color.Item name="Info" value="#0EA5E9" />
  </Color.Row>
</Color>

## Strain type colors

The traditional cannabis classification colors used for sativa, indica, and hybrid indicators throughout the UI.

<Color variant="table">
  <Color.Row title="Strain types">
    <Color.Item name="Sativa" value="#EA580C" />

    <Color.Item name="Indica" value="#7C3AED" />

    <Color.Item name="Hybrid" value="#059669" />
  </Color.Row>
</Color>

<Note>
  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.
</Note>

## 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.

<Color variant="table">
  <Color.Row title="High Families">
    <Color.Item name="Uplifting High 🍋" value="#FCD34D" />

    <Color.Item name="Energetic High ⚡" value="#F97316" />

    <Color.Item name="Relaxing High 😌" value="#8B5CF6" />

    <Color.Item name="Balancing High ☯️" value="#06B6D4" />

    <Color.Item name="Relieving High 🌶️" value="#10B981" />

    <Color.Item name="Entourage High 🌈" value="#EC4899" />
  </Color.Row>
</Color>

| 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%   |

<Note>
  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](/guides/cannabis/high-families) for the full consumer-to-study name mapping.
</Note>

Learn more about the classification system in the [High Families](/guides/cannabis/high-families) guide.

## 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.

<Color variant="table">
  <Color.Row title="Common terpenes">
    <Color.Item name="Myrcene" value="#8B4513" />

    <Color.Item name="Limonene" value="#FFD700" />

    <Color.Item name="Pinene" value="#228B22" />

    <Color.Item name="Linalool" value="#DDA0DD" />

    <Color.Item name="Caryophyllene" value="#B22222" />

    <Color.Item name="Humulene" value="#8B4513" />

    <Color.Item name="Terpinolene" value="#FF69B4" />

    <Color.Item name="Ocimene" value="#FF6347" />
  </Color.Row>
</Color>

<Color variant="table">
  <Color.Row title="Additional terpenes">
    <Color.Item name="Nerolidol" value="#D2691E" />

    <Color.Item name="Bisabolol" value="#FFD700" />

    <Color.Item name="Valencene" value="#FF8C00" />

    <Color.Item name="Eucalyptol" value="#00CED1" />

    <Color.Item name="Fenchol" value="#32CD32" />

    <Color.Item name="Camphene" value="#228B22" />

    <Color.Item name="Borneol" value="#4682B4" />

    <Color.Item name="Guaiol" value="#CD853F" />

    <Color.Item name="Phytol" value="#9ACD32" />
  </Color.Row>
</Color>

<Info>
  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.
</Info>

## 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.

<Color variant="table">
  <Color.Row title="Cannabinoids">
    <Color.Item name="THC" value="#EA580C" />

    <Color.Item name="CBD" value="#059669" />

    <Color.Item name="CBG" value="#7C3AED" />

    <Color.Item name="CBN" value="#DC2626" />

    <Color.Item name="CBC" value="#F59E0B" />

    <Color.Item name="THCV" value="#D97706" />

    <Color.Item name="THCA" value="#10B981" />

    <Color.Item name="CBDA" value="#059669" />
  </Color.Row>
</Color>

## Accessibility

<Note>
  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**
</Note>

## For developers

<Snippet file="brand-color-swatch.mdx" />

Source of truth files:

* `apps/website/src/config/design-system/brand-colors.ts` — brand palette, neutrals, state colors
* `@tiwih/cannabis` package — strain type, terpene, and cannabinoid colors
* `apps/website/src/config/design-system/high-families.ts` — High Families colors
* `apps/mobile/src/_config/design-system/colors.ts` — mobile color tokens