Skip to main content
There are essentially two colors in a Growth Method project: the base color and the accent color (we’ve taken inspiration from the default base theme in Flux https://fluxui.dev/themes, and the default shadcn (theme https://ui.shadcn.com/themes.

​
Base (Primary) Color

The base color (Neutral Grey or “Zinc”) is the color of the majority of the content including text, backgrounds, panels, form controls, borders, secondary buttons, nav items, icons and links. . It’s used for things like text, backgrounds, borders, etc. We use a shade of grey called “zinc” as the default base color.
  • Neutral Grey aka Zinc
  • Hex Code #27272a
  • RGB Code rgb(39,39,42)
  • HSL Code hsl(240,3.7%,15.9%)
  • oklch(27.4% 0.006 286.033)
@theme {
    --color-zinc-50: var(--color-zinc-50);
    --color-zinc-100: var(--color-zinc-100);
    --color-zinc-200: var(--color-zinc-200);
    --color-zinc-300: var(--color-zinc-300);
    --color-zinc-400: var(--color-zinc-400);
    --color-zinc-500: var(--color-zinc-500);
    --color-zinc-600: var(--color-zinc-600);
    --color-zinc-700: var(--color-zinc-700);
    --color-zinc-800: var(--color-zinc-800);
    --color-zinc-900: var(--color-zinc-900);
    --color-zinc-950: var(--color-zinc-950);
}

Source: https://tailwindcss.com/docs/colors

​
Accent Color

The accent color is the color of the primary action buttons and other interactive elements in your application. Certain design elements like tabs and links use the accent color by default. Use it sparingly when needing an element to stand out or to reinforce (e.g. error states). We use three different hues in both light mode and dark mode for the accent color palette as follows:
  1. —color-accent: The main accent color used is the background for primary buttons.
  2. —color-accent-content: A (typically) darker hue used for text content because it’s more readable.
  3. —color-accent-foreground: The color of (typically) text content on top of an accent colored background.
  • Hex Code #27272a
  • RGB Code rgb(39,39,42)
  • HSL Code hsl(240,3.7%,15.9%)
  • oklch(27.4% 0.006 286.033)
@theme {
    --color-accent: var(--color-zinc-800);
    --color-accent-content: var(--color-zinc-800);
    --color-accent-foreground: var(--color-white);
}
@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-zinc-800);
    }
}

​
Semantic colours

The base and accent colours above may be supplemented by semantic colours where necessary e.g. Green = Positive, Yellow / Orange=Warning, Red = Danger.

​
Purple accent

Rarely, where a splash of colour is needed (such as on a chart line) we use the purple from https://fluxui.dev/components/chart. We use the default tailwind pink-500, and #ec4899. 
pink-500
#ec4899

​
Dark mode

The above should ensure Growth Method applications and websites work with dark mode out of the box.