Dark mode, always
All CRAFTSMAN+ content is dark mode. Decks, statics, social, video, product, and web: every surface sits on a dark ground. Light-mode content is never created. STARLIGHT and METEOR are for type and marks on dark grounds, not for backgrounds.
The palette
Every color leads with its name: MIDNIGHT, STARLIGHT, GARIBALDI. The formal CRAFTSMAN name sits underneath as the descriptor for code and documentation. Click any swatch to copy its hex.
Primary monotone
The solid ground. Working surfaces, dense content, and anywhere a gradient would compete. Never substitute #000000; the off-pure black is deliberate.
Type and marks on dark grounds. Never a background: all CRAFTSMAN+ content is dark mode. Never substitute #FFFFFF.
Secondary type, dividers, and the third chart series. Spelled GREY, never gray or silver.
Primary color
Primary accent. Where the brand shows up. First series in any chart.
Primary accent alongside Orange. Second series in any chart.
Use these exact values. Never approximate, never introduce a tint, shade, or opacity variant that is not defined here, and never substitute a generic black or white for MIDNIGHT or STARLIGHT. The off-pure values are deliberate.
Product palettes
Beyond the core, color belongs to products. Each product line owns a palette and a gradient, and each palette lives only on its own product’s surfaces. Names keep to the sea: the sunset sinks into the water.
PLAY
PLAY is the primary palette. Nothing to add: GARIBALDI and CORAL.
INTELLIGENCE
The primary pair plus URCHIN. Purple appears only here, which is what makes it mean AI.
PRISM
Light through water: ANEMONE, LAGOON, and REEF. PRISM surfaces only.
ANALYTICS
Growth from the seabed: KELP, SEAGRASS, and PLANKTON. ANALYTICS surfaces only.
PLAY needs nothing beyond the primary pair. INTELLIGENCE adds URCHIN, which is why purple means AI everywhere it appears. PRISM and ANALYTICS each bring three colors of their own; never borrow one product’s palette for another, and never use product colors on general brand surfaces.
The hierarchy
The palette is not a menu of equals. It is a hierarchy, and the hierarchy governs use. The bar below is a representative CRAFTSMAN+ surface broken down by color; the marker sits at exactly 95%.
Primary monotone
The foundation. Most of every surface.
Primary color
The accent. Where the brand shows up.
Product palettes
Each lives only on its own product's surfaces.
Product gradients
Only on the surface they belong to.
The 95% rule. Monotones plus Orange and Pink cover 95% of output. craftsmanplus.com is the reference implementation. When unsure what a surface should look like, match the website.
Product palettes are the remaining 5%, and only on their own product. A PRISM screen may use ANEMONE; a general brand static may not.
Why these colors
The sunset gradient is a grounding concept rather than an asset to reproduce. It shows the derivation: the core colors are the real, naturally occurring colors of a sunset moving into night, Orange and Pink against the black of space. The product palettes continue the story into the sea below it, which is why every product color is named for something that lives there.
This is the test for judgment calls. A color from the core palette or from the product palette of the surface you are on can work. Anything else does not, no matter how well it seems to sit next to Orange.
Gradients
In practice, the brand colors are rarely used by themselves. They almost always appear inside a gradient: adjacent colors blending the way a sky does.
Backgrounds are NEBULA nine times out of ten. The CRAFTSMAN+ MINIMAL GRADIENT is the default ground for main backgrounds; it reads as atmosphere rather than color. Solid MIDNIGHT carries working surfaces and dense content. The product dark variants are used sparingly, for a product’s own hero or section, never as the house ground.
Each product gradient has a dark variant for those moments; toggle a card to see it.
CRAFTSMAN+ MINIMAL GRADIENTNEBULA
The default ground. Main backgrounds use NEBULA nine times out of ten; it reads as texture rather than color. Midpoint is CRAFTSMAN BLACK #090909, not pure black.
CRAFTSMAN+ GRADIENT
The primary brand gradient. Accents, gradient text, and PLAY surfaces and identity.
INTELLIGENCE
INTELLIGENCE and AI features only.
PRISM
PRISM surfaces, icon, and identity.
ANALYTICS
ANALYTICS surfaces, icon, and identity.
The dark variants are the same hues pulled down to near-black. They are backgrounds, not accents. Do not lighten them to make them visible. NEBULA uses MIDNIGHT at its midpoint rather than pure black, which is the same exact-values rule applied inside a gradient.
Ready renders for design tools
Every gradient family is available as a PNG ground, generated from the exact token stops at each gradient’s true angle. Pair the dark grounds with the grain PNGs for the full atmospheric treatment.
CRAFTSMAN+ MINIMAL GRADIENT
CRAFTSMAN+ GRADIENT
INTELLIGENCE
Contrast
Every text pairing should clear APCA Lc 60 for UI text and Lc 75 for body copy. The checker below is constrained to the palette, because those are the only colors you have.
- APCA
- Lc -106
- WCAG
- 19.58:1
Body text
Build Ads with Intelligence
CRAFTSMAN WHITE on CRAFTSMAN BLACK. Interactive is the best-performing format and the only one that generates real interaction data.
Applying color in practice
Charts, dashboards, diagrams. Default to monotone with GARIBALDI for the primary series, CORAL for the secondary, and METEOR for a third. Charts on a product’s own surface may draw on that product’s palette; ANALYTICS dashboards use KELP, SEAGRASS, and PLANKTON.
Code and CSS. Define palette values as variables named for the palette, not for the hex. Do not hardcode off-palette colors. The token downloads carry CSS, SCSS, Tailwind, and Figma formats generated from one source.
UI and product surfaces. Match the website’s balance: monotone structure, color used as accent rather than as fill.
Anything touching INTELLIGENCE. The INTELLIGENCE gradient is available and appropriate here, and only here.
Color in text. Eyebrow color, gradient text in headlines, and the grounds each may sit on are specified with live examples in Typography.