ACTIONS
Colour Palette Reference
Source: Actions Brand Book v1 (2025). Web edition 2026-10-19.
─────────────────────────────────────────────────────────────────────────────

PRIMARY COLOURS
─────────────────────────────────────────────────────────────────────────────

Not White               #FCFBF7         Dominant colour; backgrounds (about 70%)
Not Black               #2C2C2C         Copy only


ACCENT COLOURS
─────────────────────────────────────────────────────────────────────────────

Violet                  #B03F89         The dominant accent colour
Acid                    #B7FF00         Actions only: CTAs and rollovers. Sparingly.


PRIMARY NEUTRALS: NOT WHITE
"Hard to tell the difference, but it's there."
─────────────────────────────────────────────────────────────────────────────

Not White 50            #FFFEFC
Not White 100           #FCFBF7         Not White (core)
Not White 150           #F7F5F0
Not White 200           #F2F1EB
Not White 250           #F0EDE9
Not White 300           #E5E3DF


PRIMARY NEUTRALS: NOT BLACK
─────────────────────────────────────────────────────────────────────────────

Not Black 700           #525252
Not Black 800           #3B3B3B
Not Black 850           #333332
Not Black 900           #262625
Not Black 950           #1A1A19
Not Black 990           #0D0D0D
(The core swatch #2C2C2C sits between 850 and 900.)


ACCENT: VIOLET (mostly use 500-950)
─────────────────────────────────────────────────────────────────────────────

Violet 100              #F2C4E1
Violet 200              #E5A1CE
Violet 300              #E577BF
Violet 400              #CF57A3         Headlines on Violet 800 (large text only)
Violet 500              #B03F89         Violet (core)
Violet 600              #8D2A6A         Primary headlines on light backgrounds
Violet 700              #7E275F
Violet 800              #621D49         Violet panels
Violet 900              #451534
Violet 950              #290C1E


ACCENT: ACID (mostly use 400-800)
─────────────────────────────────────────────────────────────────────────────

Acid 100                #ECFFBD
Acid 200                #DFFF8F
Acid 300                #D2FF61
Acid 400                #C5FF33         Hover
Acid 500                #B7FF00         Acid (core)
Acid 600                #9AD600         Pressed
Acid 700                #79A800
Acid 800                #587A00
Acid 900                #374D00
Acid 950                #161F00


COLOUR DISTRIBUTION (a guide rather than a formula)
─────────────────────────────────────────────────────────────────────────────

Not White               ~70%
Not Black               ~17.5%
Violet                  ~12.5%
Acid                    ~5%


LOGO COLOURWAYS (back plane / middle / front / logotype)
─────────────────────────────────────────────────────────────────────────────

Not Black, shaded       #1A1A19 / #262625 / #333332 / #2C2C2C    On light
Not Black, solid        #262625 (all planes)        / #2C2C2C
Not White, shaded       #F2F1EB / #F7F5F0 / #FFFEFC / #F0EDE9    On dark
Not White, solid        #F7F5F0 (all planes)        / #F0EDE9
Violet, shaded          #290C1E / #451534 / #621D49 / #290C1E    Companies, concepts,
Violet, solid           #451534 (all planes)        / #290C1E    approaches, and things


PRODUCT UI: STATUS (PROPOSED, NOT IN BRAND BOOK V1)
Always pair with an icon and a label.
─────────────────────────────────────────────────────────────────────────────

                        Mark            Text            Wash
Positive                #08805E         #0A6B4F         #DFECE5
Caution                 #C27C0E         #8F5600         #F5ECDB
Critical                #A3241C         #A3241C         #F1E1DD
Neutral                 #525252         #525252         #F2F1EB


PRODUCT UI: RELATIONSHIP STRENGTH (PROPOSED)
─────────────────────────────────────────────────────────────────────────────

None                    #E5E3DF         Not White 300
Weak                    #E577BF         Violet 300
Medium                  #B03F89         Violet 500
Strong                  #621D49         Violet 800


USAGE GUIDELINES
─────────────────────────────────────────────────────────────────────────────

DO:
• Keep compositions mostly Not White
• Use Not Black only for copy
• Make Violet the dominant accent
• Save Acid for actions: CTAs and rollovers, with Not Black text on top
• Make sure the brand is always legible

DON'T:
• Set text in Acid on light backgrounds (1.2:1 contrast)
• Use Violet 400 on Violet 800 for small text (large headlines only)
• Use status colours without an icon and a label
• Use raw hex values in product code; use the semantic tokens in brand/tokens


TOKENS
─────────────────────────────────────────────────────────────────────────────

Source of truth:        brand/tokens/actions.tokens.json
CSS variables:          brand/tokens/actions.css
Tailwind v4 theme:      brand/tokens/tailwind.css
TypeScript:             brand/tokens/actions.tokens.ts
Rebuild:                node brand/tokens/build.mts