# CRAFTSMAN+ Brand Guidelines (complete)

Generated from https://brand.craftsmanplus.com. Structured data: https://brand.craftsmanplus.com/api/tokens.json and https://brand.craftsmanplus.com/api/brand-rules.json.


---

# Color

> The SUNSET system: a core palette of monotones plus Orange and Pink, product palettes for each product line, and dark mode everywhere.

Canonical: https://brand.craftsmanplus.com/foundations/color

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

> Interactive PaletteGrid component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

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.

> Interactive ProductPalettes component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

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

> Interactive HierarchyViz component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

**The 95% rule.** Monotones plus Orange and Pink cover 95% of output. [craftsmanplus.com](https://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.

> Interactive GradientComposer component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

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](/foundations/texture#grain-outside-the-browser) for the full atmospheric treatment.

> Interactive GradientDownloads component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

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

> Interactive ContrastChecker component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## 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](/resources/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](/foundations/typography#color-in-text).


---

# Typography

> Inter carries the entire brand, tightened at display sizes and opened up at small sizes. One family, one variable file, a fluid scale.

Canonical: https://brand.craftsmanplus.com/foundations/typography

> Interactive TypeHero component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The typeface

CRAFTSMAN+ sets everything in **Inter**, self-hosted as a variable font. One family across marketing, product, and documentation keeps the brand quiet and coherent, which is the point. The voice is calm; the type should be too.

Enable the stylistic sets that ship with the brand:

```css
font-family: var(--font-sans);
font-feature-settings: "ss01", "ss02", "cv11";
```

These features give Inter its open digits and disambiguated glyphs. They are part of the brand setting, not an option.

For code, tokens, and technical values, use **JetBrains Mono**. This is a proposal pending formal adoption; it appears throughout this site so you can judge it in use.

## The scale

The scale is fluid on the web: display and heading sizes are `clamp()` expressions that track the viewport, so type is never stepped awkwardly between breakpoints. Body sizes are fixed.

**In design tools, use the fixed sizes** marked in pink on each step below. They are the large end of each fluid range: type is authored at full size and the web scales it down, never the reverse.

| Step | Design tools | Weight | Tracking | Leading |
| --- | --- | --- | --- | --- |
| Display | 92px | 900 · Black | -4.5% | 102% |
| H1 | 56px | 800 · ExtraBold | -4% | 108% |
| H2 | 36px | 700 · Bold | -2% | 116% |
| H3 | 24px | 600 · SemiBold | -1% | 130% |
| Body large | 20px | 400 · Regular | 0 | 160% |
| Body | 15px | 400 · Regular | 0 | 155% |
| Small | 13px | 400 · Regular | +1% | 150% |
| Eyebrow | 12px | 600 · SemiBold | +18%, uppercase | 100% |
| Mono | 13px | 400 · Regular | 0 | 160% |

Weights are named the way font menus name them: 400 is Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold, 900 Black. Tracking is given as a percentage of the em for design tools; Figma takes it directly as %.

### One system, every tool

The scale does not fork per tool. It is one system in three expressions, split by how the type is read:

- **Web** reads the fluid `clamp()` sizes; they are already in the CSS tokens.
- **Design documents share one ladder.** Figma, Photoshop, Illustrator, and statics all use the fixed px sizes above, and they agree pixel-for-pixel. The ladder is authored for canvases 1440px wide or wider; on narrower artboards, multiply by canvas width over 1440 and round (a 1080-wide static runs display 69, H1 42, H2 27). Body copy never drops below 13px regardless of canvas.
- **Presentations get their own point ladder**, because Google Slides measures a 960 x 540 point canvas and decks are read at distance, which puts a floor under body sizes that linear scaling would break:

| Use | Slides size | Style |
| --- | --- | --- |
| Title slide headline | 56pt | Black |
| Section divider title | 40pt | ExtraBold |
| Stat number | 80pt | Black, Accent 1 |
| Slide heading | 24pt | Bold |
| Lede, quote | 18pt | Medium |
| Body, bullets | 14pt | Regular |
| Eyebrow | 11pt | SemiBold, uppercase |
| Meta, sources | 9pt | Regular |

On a 1920 x 1080 pixel artboard, presentation values double. Deck workflow lives on the [Slides page](/resources/slides).

Every step is shown below at its actual rendered size; type your own specimen to see it across the whole ramp, and copy any step's CSS.

> Interactive TypeScale component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Tracking

Inter needs negative tracking as it grows and positive tracking as it shrinks.

| Context | Tracking |
| --- | --- |
| Display | -0.045em |
| H1 | -0.04em |
| H2 | -0.02em |
| H3 | -0.01em |
| Body | 0 |
| Small | 0.01em |
| Eyebrows and labels | 0.18em, uppercase |

Never track body copy negative, and never letterspace lowercase text. Eyebrows are always uppercase with wide tracking; they are the only place the brand shouts, and they do it quietly.

## Leading

Leading is proportional to size, and it inverts as type grows: big type gets tight, small type gets air. The stripes below are the actual line boxes; what sits between the stripes is the leading.

> Interactive LeadingDemo component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

In design tools, set line height as a percentage, never Auto: Auto in Figma and Slides is looser than the system and makes headlines float apart. The full ladder runs from 102% at display down through 155% for body, per the table above.

## Weights & styles

The system spans 400 through 900, matching [craftsmanplus.com](https://craftsmanplus.com), the reference implementation. Body copy is always 400 and never lighter. 500 carries ledes, buttons, and interface emphasis. 600 sets labels and sub-headings, 700 headings, 800 section titles, and 900 is the hero display weight.

The light cuts, 100 through 300, are never used at any size. The website does not even load them, and light body copy falls below the contrast bar on dark grounds. If existing material sets body text in ExtraLight, correct it to 400.

Italic is available across every weight and reserved for the rare cited title or borrowed term; the brand voice does not lean on italics for emphasis.

Every weight in both styles, live below. Click a row to copy its CSS.

> Interactive WeightSpecimen component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Text casing

| Context | Casing | Example |
| --- | --- | --- |
| Headlines, display through h3 | Title Case, minor words lowercase | Build Ads with Intelligence |
| Buttons and CTAs | Title Case | Book a Demo |
| Eyebrows and labels | All caps, wide tracking | INTERACTIVE CREATIVE |
| Body copy | Sentence case | Playables generate signals before the install. |

Title Case keeps minor words lowercase: a, an, the, and, or, with, of, to, for. Everything else capitalizes, including the first and last word regardless of length.

Two boundaries hold the system. All caps belongs to eyebrows and labels only; a headline set in all caps is shouting, and the voice does not shout. Stylized all-lowercase is not part of the brand in any context.

Company and product names override casing everywhere: CRAFTSMAN+, CM+, PLAY, PRISM, INTELLIGENCE, and ANALYTICS keep their caps in headlines, buttons, and body alike. See [Naming](/voice/naming).

## Color in text

Type carries color by a small set of rules, shown live below.

**Eyebrows.** CRAFTSMAN ORANGE on monotone grounds. On a heavy gradient ground, eyebrows drop to solid CRAFTSMAN BLACK or CRAFTSMAN WHITE, whichever contrasts; the ground already owns the color.

**Gradient text.** A gradient may fill a word or phrase inside a headline, never the full headline and never running text. The CRAFTSMAN+ GRADIENT is the default; the INTELLIGENCE gradient appears only on AI surfaces.

**The ground rule.** Gradient text sits on solid MIDNIGHT or on NEBULA, the CRAFTSMAN+ MINIMAL GRADIENT. NEBULA is the one gradient exception: it is near-black and reads as atmosphere, so the text gradient still carries. Never place gradient text on any other gradient background.

**Body copy.** CRAFTSMAN WHITE or CRAFTSMAN GREY on dark grounds, always solid, never gradient, never orange.

> Interactive ColorInText component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Hierarchy in practice

Lead with the point, typographically as well as editorially. One display size per page. Headings step down without skipping levels. If two adjacent text blocks compete, drop one down the scale rather than pushing the other up.


---

# Space & Grid

> A 4px base unit, a fluid section rhythm, and a 1440px canvas. Atmosphere is mostly empty space used deliberately.

Canonical: https://brand.craftsmanplus.com/foundations/space

## The unit

Everything spatial is a multiple of 4px. The working scale:

| Token | Value | Typical use |
| --- | --- | --- |
| `--space-1` | 4px | Icon gaps, hairline padding |
| `--space-2` | 8px | Chip and badge padding |
| `--space-3` | 12px | Compact control padding |
| `--space-4` | 16px | Default gap |
| `--space-5` | 24px | Card padding |
| `--space-6` | 32px | Group separation |
| `--space-7` | 48px | Subsection separation |
| `--space-8` | 64px | Section-internal blocks |
| `--space-9` | 96px | Large section blocks |
| `--space-10` | 140px | Maximum section padding |

## Page rhythm

Vertical section padding is fluid: `clamp(56px, 9vw, 140px)`. Sections breathe more as the viewport grows. Never stack two full-padding sections without content between them; collapse to a single rhythm instead.

The content canvas is `min(1440px, 90%)`, centered. Prose measures at most `72ch`. Wide elements, tables, media, and interactive panels may break out of the prose measure but not out of the canvas.

## Radius

| Token | Value | Use |
| --- | --- | --- |
| `--radius-sm` | 6px | Chips, badges, small controls |
| `--radius-md` | 10px | Buttons, inputs, code blocks |
| `--radius-lg` | 14px | Panels, popovers |
| `--radius-card` | 20px | Cards and media frames |

One radius per element. Nested elements step down: a 20px card contains 10px controls, not 20px ones.

## Elevation

Depth comes from three quiet layers, not from heavy shadows:

1. **Surface color.** CRAFTSMAN BLACK ground, then the `--surface-raised` and `--surface-raised-2` tokens; exact values live in [tokens.json](/api/tokens.json).
2. **Hairline borders.** 6% white at rest, 12% on hover.
3. **The lift shadow.** `--shadow-card-lift` adds a deep drop with a faint orange glow. Hover states only.

If an element needs more separation than these three provide, the layout is too dense. Remove something.


---

# Texture & Depth

> The grain overlay, near-black gradient grounds, and the restraint that makes CRAFTSMAN+ surfaces feel atmospheric instead of flat.

Canonical: https://brand.craftsmanplus.com/foundations/texture

> Interactive GrainDial component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The grain

Every CRAFTSMAN+ surface carries a fixed film-grain overlay. It is the difference between a black rectangle and an atmosphere. The grain is generated, not a bitmap:

```css
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: overlay;
  opacity: 0.035;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' \
    xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence \
    type='fractalNoise' baseFrequency='0.9' numOctaves='2' \
    stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 \
    0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' \
    filter='url(%23n)'/></svg>");
}
```

The parameters are part of the brand: `fractalNoise`, `baseFrequency 0.9`, two octaves, 200px tile, overlay blend. Opacity lives at 3.5% and never rises above 5%. If the grain is noticeable, it is wrong; it should only be missed when absent.

You are reading this page through the grain right now. Feel the range on the dial above; the slider will tell you when you have left the system.

### Grain outside the browser

For Photoshop, Illustrator, and video work, download the grain as a tileable PNG and apply it the same way the site does: set the layer blend mode to **Overlay** at **3.5% opacity**, never above 5%.

| File | Size | Use |
| --- | --- | --- |
| [CRAFTSMAN-PLUS-grain-512.png](/downloads/CRAFTSMAN-PLUS-grain-512.png) | 512 x 512 | Tiles with no visible repeat; scale to roughly 200px per tile for the site's density. |
| [CRAFTSMAN-PLUS-grain-2048.png](/downloads/CRAFTSMAN-PLUS-grain-2048.png) | 2048 x 2048 | Single-placement coverage for decks, statics, and video frames. |

## Gradient grounds

Large surfaces sit on the CRAFTSMAN+ MINIMAL GRADIENT (NEBULA), the near-black wash defined on the [color page](/foundations/color). It reads as texture rather than color: a faint warmth at the corners of an otherwise black field. CRAFTSMAN+ GRADIENT DARK and INTELLIGENCE DARK serve the same role on product surfaces.

Two rules keep the grounds honest:

1. They are backgrounds, not accents. Do not lighten them to make them visible.
2. One ground per viewport. Stacking gradient sections creates banding and noise.

## Glow

Radial glows are permitted behind hero content: a single off-screen radial of CRAFTSMAN ORANGE at low opacity with a heavy blur, as on the home page of this site. One glow per page, always anchored to a focal element, never free-floating decoration.

## Depth

Depth comes from three quiet layers, not from heavy shadows: surface color, a hairline border, and the lift shadow on hover. The tokens live on the [Space & Grid page](/foundations/space); build the recipe here by toggling the layers and watching the surface separate from the ground. In Photoshop terms: a fill at the raised surface value, a 1px inner stroke at 6 to 12% white, and a soft deep drop shadow reserved for interactive states.

> Interactive DepthBuilder component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## What atmospheric is not

Atmosphere comes from depth and restraint, not from effects. No glassmorphism panels floating on photos, no aurora backgrounds, no particle fields, no parallax scenery. A black ground, a faint gradient, the grain, and one glow is the complete recipe.

> Interactive AtmosphereGrid component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.


---

# Motion

> Two easing curves, four durations, and a principle: motion confirms, it never performs.

Canonical: https://brand.craftsmanplus.com/foundations/motion

## Principles

**Motion confirms, it never performs.** Every animation answers a user action or marks a state change. Nothing moves to be noticed.

**Calm is a speed.** Fast enough to feel responsive, slow enough to never startle. Nothing bounces, nothing overshoots, nothing loops for attention.

**One thing moves at a time.** Simultaneous animations compete; sequenced ones read as intention.

## Easing

Two curves cover the system. Run them and feel the difference.

> Interactive EasingCurve component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

`--ease-standard` is the default for hovers, toggles, and state changes. `--ease-out-quart` starts fast and settles long, which makes it right for entrances and scroll reveals: content arrives, then rests.

Never use `ease-in` alone for anything user-facing, and never use `linear` except for continuous motion like marquees.

## Duration

| Token | Value | Use |
| --- | --- | --- |
| `--duration-fast` | 150ms | Hovers, small state changes |
| `--duration-base` | 300ms | Reveals, toggles, most transitions |
| `--duration-slow` | 600ms | Section entrances, large surface moves |
| `--duration-ambient` | 8000ms | Background drift, barely perceptible |

If a transition needs a value between these, pick the shorter one.

## Scroll reveals

Content fades up 18px on `--ease-out-quart` over `--duration-slow`, staggered by document order. Elements reveal once and stay; scrolling back up does not replay them.

## Reduced motion

`prefers-reduced-motion: reduce` is honored everywhere: reveals render in place, transitions collapse to instant, and ambient drift stops. This is not optional and ships in the base stylesheet.


---

# Components

> Where the foundations meet the interface: the button system and the card surface from craftsmanplus.com.

Canonical: https://brand.craftsmanplus.com/foundations/components

## Buttons

A button is where four foundations intersect: the [CRAFTSMAN+ GRADIENT](/foundations/color#gradients) for the fill, [Inter at 500](/foundations/typography#weights--styles) in [Title Case](/foundations/typography#text-casing) for the label, `--radius-sm` from the [space system](/foundations/space), and the standard easing from [motion](/foundations/motion). The system below is the one shipping on [craftsmanplus.com](https://craftsmanplus.com), tokenized.

> Interactive ButtonLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Button generator

For decks, statics, and mockups outside the browser: type the label, pick the variant and size, and export a transparent or black-ground PNG at up to 8x. The render follows the spec exactly, gradient, radius, highlight, and glow included. Labels are Title Case, per the [casing rules](/foundations/typography#text-casing).

> Interactive ButtonGenerator component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The spec

| Property | Default | Compact |
| --- | --- | --- |
| Height | 40px | 33px |
| Padding | 0 20px | 0 17px |
| Radius | `--radius-sm` (6px) | same |
| Type | Inter 500, 13px, 0.01em tracking | same |
| Icon gap | 10px | 6px |
| Transition | 150ms `--ease-standard` on transform, filter, background, color | same |

**States.** Hover lifts 1px (primary also brightens 8%); press settles 1px down; disabled drops to 40% opacity with no pointer. Focus uses the browser ring; do not remove it.

## Cards

The card is the raised surface everywhere on CRAFTSMAN+ properties, this page included: a vertical near-black gradient, a 20px radius, a hairline border, and an inset top highlight. On hover it lifts with the deep shadow and faint orange glow from the [elevation system](/foundations/space).

| Property | Value |
| --- | --- |
| Fill | Vertical gradient, `--card-grad` (near-black, top lighter) |
| Radius | `--radius-card` (20px) |
| Border | 1px at 7% white; 16% on hover |
| Edge | Inset top highlight at 5% white |
| Hover | `--shadow-card-lift`, translate up 2px on links |
| Nesting | Inner elements step down to 10px radius; never 20px inside 20px |

Every card on this site is a live example. For decks and statics, export an empty card as a transparent PNG and place content on it in your tool:

> Interactive CardLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Rules

- **One primary per view.** The primary is where the brand shows up; two of them is none of them.
- **Labels are Title Case**, per the [casing rules](/foundations/typography#text-casing): Book a Demo, View Case Studies. Never all caps, never a trailing exclamation mark.
- **The INTELLIGENCE variant appears only on AI surfaces**, the same reservation Purple carries everywhere else.
- **Gradient buttons need solid grounds.** On a gradient ground, use solid CRAFTSMAN WHITE or CRAFTSMAN BLACK fills, the same logic as [gradient text](/foundations/typography#color-in-text).
- **No new variants.** No outlined gradient buttons, no product-palette fills outside their product, no pill radii. If a surface seems to need a fourth variant, the surface has too many actions.


---

# Iconography

> The icon system: Phosphor icons in Regular weight, colored CRAFTSMAN BLACK, CRAFTSMAN WHITE, or one of the approved gradients.

Canonical: https://brand.craftsmanplus.com/foundations/iconography

## The library

CRAFTSMAN+ uses [Phosphor](https://phosphoricons.com), an open-source icon family whose even stroke weight and geometric construction sit naturally beside Inter. One library everywhere: product, site, decks, and statics. Do not mix icon sets on a surface, and do not draw one-off icons; if a concept is missing, choose the nearest Phosphor glyph.

Phosphor ships for web, React, Figma, and as raw SVGs, all under the MIT license. The browser below carries the full set: search it, pick a treatment, and export any icon as SVG or PNG without leaving this page.

> Interactive IconLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Weight

**Regular is the system weight.** Its stroke sits comfortably next to Inter at 400 and 500. **Fill** is the accepted alternative where a glyph must read at very small sizes or carry selected-state emphasis. The other Phosphor weights (Thin, Light, Bold, Duotone) are not part of the system.

Never mix Regular and Fill in the same icon row; a Fill glyph beside Regular glyphs reads as a state, not a style.

## Color

Icons take exactly four treatments:

- **CRAFTSMAN WHITE** on dark grounds. The default almost everywhere.
- **CRAFTSMAN BLACK** on light grounds.
- **The CRAFTSMAN+ GRADIENT** as an accent, for a featured icon or an active state. Use it the way gradient text is used: one glyph among many, never a whole row.
- **The INTELLIGENCE gradient**, on AI surfaces only, carrying the same reservation Purple does everywhere else.

Nothing else. No solid Orange or Pink icons, no product-palette colors, no invented gradients. Gradient treatments need at least 24px of glyph; below that the stops band and the icon reads as noise.

## Size

Icons align to the spacing system: 16px inline with text, 20px in controls, 24px standalone, 32px featured. At every size the icon aligns optically to the text cap height beside it, not to the baseline.


---

# Logo

> The CRAFTSMAN+ logo, the + mark, and the product marks for PLAY, PRISM, INTELLIGENCE, and ANALYTICS, in every approved variant.

Canonical: https://brand.craftsmanplus.com/identity/logo

## The logo

The CRAFTSMAN+ logo is the primary identity. Because all CRAFTSMAN+ content is dark mode, it appears in STARLIGHT on MIDNIGHT or on NEBULA. It never takes a palette color or a gradient fill. The black version exists only for third-party surfaces we do not control, such as a partner's light-mode deck or a printed form.

> Interactive LogoPair component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Clear space and minimum size

Clear space on all sides equals one +: the width of the logo's own plus. Nothing enters that zone: no copy, no icons, no other marks. Minimum width is 120px on screen and 30mm in print, measured on the letterforms themselves; the logo file carries no padding, so the file width is the logo width. Below that, use the + mark instead.

> Interactive LogoSpecs component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The library

Every mark in every approved variant. The CRAFTSMAN+ logo and the + mark are black and white only. The product marks add a full-color version in their [product palettes](/foundations/color#product-palettes): PLAY in GARIBALDI and CORAL, INTELLIGENCE in its gradient, PRISM in ANEMONE, LAGOON, and REEF, ANALYTICS in KELP, SEAGRASS, and PLANKTON. Toggle a variant to preview it on its correct ground, then download the SVG.

> Interactive LogoLibrary component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Marks and product palettes

Each full-color product mark is drawn from its [product palette](/foundations/color#product-palettes), and the same boundary applies: a product's colors, mark included, appear only on that product's surfaces. Use the marks as supplied; never recolor one toward the core palette or toward another product.

## Misuse

Each of these is a defect, not a style choice:

- Recoloring any mark outside its approved variants, including palette colors and gradients
- Applying the CRAFTSMAN+ GRADIENT as a fill on the logo or the + mark
- Stretching, condensing, rotating, or outlining
- Placing a mark on a busy photograph without a solid or gradient ground behind it
- Adding shadows, glows, or bevels
- Recreating the logo in type. The logo is drawn, not set
- Using the retired CANVAS name or mark anywhere PRISM appears

## Files

All variants on this page download individually as SVG. Master files live in the repo under `src/brand/logos/`; the generated set is also listed on [Downloads](/resources/downloads).


---

# Products

> CRAFTSMAN+ is the platform. PLAY, PRISM, INTELLIGENCE, and ANALYTICS are the subsystems that operate on what it holds.

Canonical: https://brand.craftsmanplus.com/identity/products

## The platform and its subsystems

CRAFTSMAN+ is the platform. It holds the home page, every other page, the asset library, and the image and video editors. Think of it the way you think about a drive: it stores the individual projects that the subsystems then work on. The platform is the container; the subsystems operate on the contents.

> Interactive ProductFamily component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

Getting this relationship right matters in copy. A user does not "log in to PLAY." They log in to CRAFTSMAN+ and open a project in PLAY.

| Product | Approved forms | What it is |
| --- | --- | --- |
| PLAY | PLAY, CRAFTSMAN PLAY, PLAY Editor | Editor for building playables and animated banners. Both export to HTML. |
| PRISM | PRISM, CRAFTSMAN PRISM, PRISM Editor | Editor for building statics with bulk resizes and variants. Formerly CANVAS. |
| INTELLIGENCE | INTELLIGENCE, CRAFTSMAN INTELLIGENCE | The AI chatbot and LLM system. |
| ANALYTICS | ANALYTICS, CRAFTSMAN ANALYTICS | Proprietary analytics system, listing, and dashboards connected to playables. |

Use only the forms in the table. Do not invent hybrids. Note that Editor is title case, not all caps, in PLAY Editor and PRISM Editor. INTELLIGENCE and ANALYTICS have no Editor form because neither is an editor.

## Product color

Each product owns a [product palette](/foundations/color#product-palettes) and a dark ground, visible in the tiles above:

- **PLAY** carries the CRAFTSMAN+ GRADIENT, with CRAFTSMAN+ GRADIENT DARK for its grounds.
- **INTELLIGENCE** adds URCHIN to the primary pair; its ground is INTELLIGENCE DARK. It is the only surface where purple appears.
- **PRISM** runs ANEMONE, LAGOON, and REEF; its ground is PRISM DARK.
- **ANALYTICS** runs KELP, SEAGRASS, and PLANKTON; its ground is ANALYTICS DARK.

Product dark grounds are used sparingly, for a product's own hero or section. The house ground everywhere else is NEBULA, and no product's colors cross onto another product or onto general brand surfaces.

Each rule, applied to a miniature surface:

> Interactive ProductColorExamples component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Product name versus generic word

All four names are ordinary English words, so capitalization carries the meaning. Capitalize only when referring to the product.

| Product sense | Generic sense |
| --- | --- |
| Open the file in PRISM. | Light splits in a prism. |
| ANALYTICS shows a 4% lift. | We need better analytics on this. |
| Ask INTELLIGENCE to rewrite the headline. | This is an intelligent default. |
| Build it in PLAY. | The user taps play. |

If a sentence is ambiguous either way, rewrite it so the reader does not have to guess.

## Marks

The product marks for PLAY, PRISM, INTELLIGENCE, and ANALYTICS live on the [Logo page](/identity/logo) in full color, black, and white, with downloads. In running interface text, product names are set in Inter 600, all caps, in the surface's text color.


---

# Socials

> How CRAFTSMAN+ shows up on social platforms: the profile icon, and the banner for employee LinkedIn profiles.

Canonical: https://brand.craftsmanplus.com/identity/socials

## The assets

Social surfaces are small, cropped by platforms, and seen mostly at thumbnail size, so they use the most compact expressions of the brand: the + mark and the thesis line. Use the supplied files exactly; platforms do the cropping, not you.

> Interactive SocialAssets component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Rules

- **The icon is the + mark on the CRAFTSMAN+ MINIMAL GRADIENT.** Platforms crop avatars to circles; the file is composed to survive that crop. Never substitute the full logo; at avatar size it is unreadable, which is exactly what the [minimum-size rule](/identity/logo#clear-space-and-minimum-size) exists to prevent.
- **The personal banner is for employees.** Any CRAFTSMAN+ employee may use it on their own LinkedIn profile. Upload it as the background photo without edits, crops, or overlays.
- **Company-page assets are managed centrally.** Banners and avatars for official CRAFTSMAN+ accounts are set by marketing and are not published here.
- **Posts follow the system.** Anything composed for social carries the same rules as everything else: [SUNSET color](/foundations/color), [Title Case](/foundations/typography#text-casing), the [voice](/voice/principles), and the [gradient grounds](/foundations/color#gradients) available as ready renders in social sizes.


---

# Statics

> How a CRAFTSMAN+ static is composed: the anatomy of an approved example and the rules that govern the canvas.

Canonical: https://brand.craftsmanplus.com/identity/statics

## Anatomy of a static

A static carries the full brand system on one canvas. The promo below is an approved reference; the markers call out what makes it correct.

> Interactive StaticAnatomy component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Composition rules

- **Margins.** Keep all content inside a safe area of 5% per edge; the logo keeps its full [clear space](/identity/logo#clear-space-and-minimum-size) beyond that.
- **One headline, one idea.** A static states one thing in Title Case and stops. Supporting copy is one line or absent.
- **Grounds come from the system.** CRAFTSMAN BLACK or a [gradient ground](/foundations/color#gradients), with [grain](/foundations/texture) at 3.5% where the format allows. The ready-made gradient renders cover the standard sizes.
- **Product is the imagery.** UI shots and playable art, used as supplied per the [product shot rules](/resources/product-shots).
- **Type is Inter**, weights per the [system](/foundations/typography#weights--styles): 400 body and never lighter, heavy display.

Co-branding lockups and the partner logo libraries live on the [Partners page](/identity/partners).


---

# Partners

> Co-branding lockup rules and the partner logo libraries: the brands CRAFTSMAN+ builds for and the networks it exports to.

Canonical: https://brand.craftsmanplus.com/identity/partners

## Co-branding

When the CRAFTSMAN+ logo appears beside a partner's mark, both render in their monochrome or supplied form on a shared ground.

> Interactive CoBrandLockup component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

Never stack the marks vertically, never let either mark recolor the other, and never place the lockup on a gradient busier than the MINIMAL family.

## Brand partners

The brands CRAFTSMAN+ builds for, for case studies and co-branded decks. Click any logo to download its SVG. These are the partners' marks; each partner's own brand rules govern their use.

> Interactive BrandPartnerLogos component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Export partners

The networks and DSPs CRAFTSMAN+ exports to, for integration slides and partner one-pagers.

> Interactive ExportPartnerLogos component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The full set

Every logo above in one file: [CRAFTSMAN-PLUS-partner-logos.zip](/downloads/CRAFTSMAN-PLUS-partner-logos.zip).


---

# Values

> What CRAFTSMAN+ stands for: control of your creative as the mission, and five values as the standard.

Canonical: https://brand.craftsmanplus.com/voice/values

## The mission

**You Should Be in Control of Your Creative.**

CRAFTSMAN+ is the creative infrastructure for interactive, playable ads that people actually engage with. Media buying is automated; creative is the last lever anyone actually controls, and control is the whole point. AI is the force multiplier; seven years of pixel-perfect editing underneath is why the output is yours.

Everything the brand says traces back to that sentence. When copy drifts, ask whether it still argues for control.

## What we stand by

Five values. They read as behaviors, not aspirations, because that is how they are used: hiring, reviews, and the daily judgment calls in between.

> Interactive ValuesGrid component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## How values shape the voice

The [voice attributes](/voice/principles) are these values made audible. Customer First is why copy leads with the reader's problem. Lead By Doing and Own It are why claims come with mechanisms and numbers instead of adjectives. Seize Your Potential is why the standard for every surface is the one this site documents, not the minimum a deadline allows.


---

# Voice Principles

> Five words define how CRAFTSMAN+ sounds: sophisticated, tech, atmospheric, calm, intelligent. The website is the reference implementation, and its best lines follow a small set of learnable patterns.

Canonical: https://brand.craftsmanplus.com/voice/principles

## The five attributes

**Sophisticated.** Write for someone who already knows the space. Use the precise term rather than explaining around it. Do not over-qualify. The site says "high-intent signals required for maximizing ROAS" to an audience measured on ROAS.

**Tech.** Be literal and specific about mechanics. "Premium MRAID and HTML5 builds on a dedicated game engine" beats any number of adjectives about power or polish.

**Atmospheric.** Leave room. Fewer words, more space, restraint in layout. The site's strongest lines are under six words.

**Calm.** Declarative sentences. No exclamation marks. No urgency, no countdowns, no pressure. "Trust the Numbers" is an entire section heading.

**Intelligent.** Lead with the point. Cut throat clearing, preamble, and recap. "Decide what to build. Not just how."

## The cadence

Five patterns account for nearly every strong line the brand writes. Write inside them and the voice takes care of itself.

| Pattern | Shape | From the site |
| --- | --- | --- |
| The triad | Three parallel beats, periods between | Build More. Spend Less. Go Faster. |
| Claim, then mechanism | Headline states the outcome; the next line states the how, in precise terms | Engagement Fully Visualized, then "Track every tap, identify drop-off points" |
| Correction by contrast | The claim, then its foil as a fragment | Real campaign data. Not lab test theories. |
| Numbers as proof | A real number where a lesser brand puts an adjective | 15 min brief-to-build |
| Imperative open | Actions start on the verb | Build, Ship, Test, Scale, Explore |

## Line studies

Real lines from the site, annotated. These are the specimens to imitate.

> Interactive VoiceSpecimens component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## In practice

Toggle each example between the version that breaks the voice and the version that carries it.

**Wrong:** Empower your workflow with more than 30+ Export Partners

**Right:** Export to More Than 30 Partners. One Click.

**Note:** Empower is banned vocabulary, and more than 30+ says the same thing twice. The number is the proof; let it work.

**Wrong:** HOW INMOBI SUPERCHARGED PLAYABLE AD CREATION BY 83% WITH CRAFTSMAN+

**Right:** InMobi Cuts Playable Production Time 83% with CRAFTSMAN+

**Note:** Supercharged is banned, all-caps headlines are shouting, and the real number was always the story.

**Wrong:** Craftsman+ just shipped a huge update to the Play editor! We're thrilled to announce a game-changing new workflow that will supercharge your creative output.

**Right:** PLAY now supports anchor points on nested layers. Existing projects pick up the behavior on next open, no migration needed.

**Note:** Announcing something well means describing what it does and why it matters, then stopping.

**Wrong:** Ready to take your campaigns to the next level? Don't wait. Book a demo today and see why leading brands trust us!

**Right:** This Is What Intelligent Ads Look Like. Book a Demo.

**Note:** The site's own closing line. Calm sells: state the thesis, then the invitation, without pressure.

## The announcement rule

Announcing something well means describing what it does and why it matters, then stopping. If a draft ends on a flourish, delete the flourish; the sentence before it was the ending.

## Vocabulary

One narrative, said a hundred ways. The strategic terms the brand repeats until the industry repeats them back:

creative infrastructure · interactive · dynamic · control · enterprise · pre-click data · closed loop · interactive ads · playable ads · gamification

And the practitioner vocabulary the voice uses without explanation, because the audience lives in it: IPM, ROAS, CTR, CPM, UA, MRAID, HTML5, DSP, CTV, playables, drop-off, time-to-interact, brief-to-build.

CRAFTSMAN+ writes American English: maximize, optimize, localize.


---

# Naming

> CRAFTSMAN+ is always all caps, in any format, at any size, in any position. The fallback order and every approved form.

Canonical: https://brand.craftsmanplus.com/voice/naming

## The company and platform

| Form | Status | Use when |
| --- | --- | --- |
| CRAFTSMAN+ | Default. Always correct. | Everywhere the + renders. |
| CM+ | Approved short form. | Space is tight, or the name repeats often in running text. |
| CRAFTSMAN PLUS | Last resort. | The + is not supported and a readable full name is needed. |
| CMP | Last resort. | The + is not supported and space is tight. Already in use as the Linear team key. |

Never write any of these: Craftsman+, craftsman+, Craftsman Plus, Craftsman, CraftsmanPlus, Cm+, cm+, cmp. The one exception: CraftsmanPlus inside craftsmanplus.com, a URL, or an email address, where the domain rules.

Sentence case is not a defense. If a house style, a CMS, or a template would normally lowercase a name mid-sentence or title-case a heading, CRAFTSMAN+ still stays all caps.

## When to fall back

Only drop the + when the destination genuinely cannot take it. Common cases: filenames, URL slugs, code identifiers and variable names, CSV headers consumed by a partner system, ticket keys, and some legacy partner dashboards.

Preference order is always **CRAFTSMAN+** first, then **CM+**, then **CRAFTSMAN PLUS** or **CMP**. Do not fall back preemptively. If the + renders, use it.

| Destination | Write |
| --- | --- |
| Running copy, decks, posts | CRAFTSMAN+ |
| Tight table cell | CM+ |
| Partner handoff filename | CRAFTSMAN-PLUS-Q3-export.csv, or CMP-Q3-export.csv where length matters |
| Code identifier | craftsmanPlus, CMP |

## Possessives and plurals

Write CRAFTSMAN+'s and CM+'s. Do not restructure a sentence to avoid the apostrophe, and do not write CRAFTSMAN+S.

## Product names

Product names are always all caps: PLAY, PRISM, INTELLIGENCE, ANALYTICS. PRISM was formerly CANVAS; the old name is retired. Approved forms, the Editor casing rule, and the product-versus-generic-word test live on the [Products page](/identity/products).

## Machine-readable

Everything on this page is available as structured data at [/api/brand-rules.json](/api/brand-rules.json). Agents should validate output against it rather than paraphrasing this page.


---

# Never Use

> The short list of things that break the CRAFTSMAN+ voice on contact: em dashes, exclamation marks, hype vocabulary, and celebration emoji.

Canonical: https://brand.craftsmanplus.com/voice/never

## Punctuation

**No em dashes anywhere.** Use a period, a comma, a colon, or a semicolon. This applies to every format: copy, decks, docs, commit messages, alt text.

**No exclamation marks.** The voice is calm. If a sentence needs an exclamation mark to land, the sentence needs rewriting, not louder punctuation.

## Emoji

No rocket, sparkle, or fire emoji. Product and partner communication generally carries no emoji at all; if a channel's culture expects one, a single neutral marker is the ceiling.

## Vocabulary

These words are banned in all CRAFTSMAN+ output:

revolutionary · game-changing · unleash · supercharge · seamless · effortless · next-level · cutting-edge · delve · robust · leverage (as a verb) · empower

And any sentence built on "we're thrilled to" or "we're excited to announce."

The pattern behind the list: every entry claims a quality instead of demonstrating one. The fix is never a synonym; it is specificity. "Exports to HTML in one click" needs no adjective.

A miss on this page is a defect, not a style choice: fix it before publishing, and do not ask permission to correct it.


---

# Sizzles

> The finished CRAFTSMAN+ sizzles, and the treatment that makes one: grounds, type, color, pace, grain, and the end card.

Canonical: https://brand.craftsmanplus.com/motion-video/sizzles

## The library

The finished sizzles, in every approved cut. These are the reference for what the treatment below looks like in motion.

> Interactive SizzleLibrary component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Treatment

- **Grounds.** CRAFTSMAN BLACK or the CRAFTSMAN+ MINIMAL GRADIENT. Product segments may use CRAFTSMAN+ GRADIENT DARK or INTELLIGENCE DARK.
- **Type.** Inter only, set to the [type scale](/foundations/typography). Titles enter on `--ease-out-quart`, settle, and hold. No word-by-word pops, no typewriter effects.
- **Color.** Monotone plus Orange and Pink, per the [hierarchy](/foundations/color). The INTELLIGENCE gradient appears only in AI segments.
- **Pace.** Cuts breathe. Hold a UI moment long enough to read it. Music drives energy; the edit stays calm.
- **Grain.** The film grain reads on video exactly as it does on the site: present, never noticeable.
- **End card.** Wordmark on CRAFTSMAN BLACK or the CRAFTSMAN+ MINIMAL GRADIENT, clear space respected, one line of copy at most.

## Captions and title cards

Everything written on screen follows the [voice](/voice/principles) and [naming](/voice/naming) rules without exception. Title cards state mechanisms, not superlatives. If a card reads like a slogan, replace it with what the product just did.

## Duration and easing

Video motion uses the same two curves as UI, scaled up: entrances around 600ms, holds measured in seconds, ambient drift at 8s or slower. Nothing loops for attention.

## Choosing a cut

The Agency Reel ships in three cuts for a reason. Match the cut to the runway:

| Cut | When |
| --- | --- |
| Original | Presentations and first viewings, where the intro sets the room. |
| Short Intro | Audiences that already know CRAFTSMAN+. |
| No Intro | Loops, booths, and embeds, where the first seconds decide everything. |

The INTELLIGENCE sizzle ships 16:9 for web, decks, and events, and 9:16 for stories, reels, and vertical placements. Do not crop one orientation from the other; the cuts are composed separately.


---

# Downloads

> Logo files and design tokens in every format the pipeline generates: CSS, SCSS, JSON, and Figma. All exports derive from one source file.

Canonical: https://brand.craftsmanplus.com/resources/downloads

## Design tokens

Every export below is generated from the same source file on every build. They cannot drift from the guidelines, so integrate them rather than transcribing values.

| File | Format | Use |
| --- | --- | --- |
| [tokens.json](/downloads/tokens.json) | JSON | The full source: colors with names and usage, gradients, type scale, space, radius, easing. |
| [tokens.css](/downloads/tokens.css) | CSS custom properties | Drop into any web project. |
| [tokens.scss](/downloads/tokens.scss) | SCSS variables | Legacy Sass pipelines. |
| [tokens.figma.json](/downloads/tokens.figma.json) | Tokens Studio | Import into Figma via the Tokens Studio plugin. |
| [CRAFTSMAN-PLUS-palette.ase](/downloads/CRAFTSMAN-PLUS-palette.ase) | Adobe Swatch Exchange | Load the palette into Photoshop, Illustrator, or InDesign. Each swatch carries the formal name and codename. |

The live palette is also served at [/api/tokens.json](/api/tokens.json) for programmatic use.

## Texture files

| File | Contents |
| --- | --- |
| [CRAFTSMAN-PLUS-grain-512.png](/downloads/CRAFTSMAN-PLUS-grain-512.png) | Tileable grain, 512 x 512. Overlay blend at 3.5%, ceiling 5%. |
| [CRAFTSMAN-PLUS-grain-2048.png](/downloads/CRAFTSMAN-PLUS-grain-2048.png) | Grain at 2048 x 2048 for decks, statics, and video frames. |
| Gradient grounds | CRAFTSMAN+ MINIMAL GRADIENT, CRAFTSMAN+ GRADIENT, INTELLIGENCE, PRISM, and ANALYTICS, each at 1080 x 1350, 1080 x 1080, 1920 x 1080, and 1080 x 1920, rendered from token stops. Download buttons on the [color page](/foundations/color#gradients). |

Application specs live on the [Texture & Depth page](/foundations/texture).

## Logo files

Every mark in every approved variant, with per-variant preview and download, lives on the [Logo page](/identity/logo).

| File | Contents |
| --- | --- |
| [CRAFTSMAN-PLUS-logo-white.svg](/assets/logo/CRAFTSMAN-PLUS-logo-white.svg) | CRAFTSMAN+ logo in STARLIGHT, for all CRAFTSMAN+ content |
| [CRAFTSMAN-PLUS-logo-black.svg](/assets/logo/CRAFTSMAN-PLUS-logo-black.svg) | CRAFTSMAN+ logo in MIDNIGHT, only for third-party light surfaces |
| [CRAFTSMAN-PLUS-plus-white.svg](/assets/logo/CRAFTSMAN-PLUS-plus-white.svg) | The + mark, white |
| [CRAFTSMAN-PLUS-plus-black.svg](/assets/logo/CRAFTSMAN-PLUS-plus-black.svg) | The + mark, black |
| PLAY, PRISM, INTELLIGENCE, ANALYTICS marks | Full color, black, and white SVGs via the [Logo page](/identity/logo) |

> Still pending: print-resolution files.

## Device mockups

Device frames for presenting playables and product UI live in the team Dropbox: [Devices folder](https://www.dropbox.com/home/_Marketing/_CRAFTSMAN%2B%20Brand/06_General%20Assets/Devices). Requires CRAFTSMAN+ Dropbox access; ask marketing if the link does not resolve.

## Fonts

Both brand typefaces are open source under the SIL Open Font License; no licensing is needed for any CRAFTSMAN+ use, print included.

| File | Contents |
| --- | --- |
| [Inter.zip](/downloads/fonts/Inter.zip) | Inter 4.1: variable TTFs and the full family, from the official release. |
| [JetBrainsMono.zip](/downloads/fonts/JetBrainsMono.zip) | JetBrains Mono 2.304: TTFs and webfonts, from the official release. |

Websites self-host the webfont builds, as this site does; designers install the TTFs.


---

# Product Shots

> Approved UI shots of PLAY, ANALYTICS, INTELLIGENCE, and the platform, ready for decks, posts, docs, and press.

Canonical: https://brand.craftsmanplus.com/resources/product-shots

## The library

Approved product imagery for decks, social posts, documentation, and press. Filter by product, click a shot for full resolution, and download the PNG. Previews are compressed; always download the full file for use.

> Interactive ProductShots component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Perspective studio

Angle a shot in 3D for hero images and decks: pick a shot or upload one, set tilt, pan, roll, and zoom or start from a preset, choose the ground, and download a 2400px PNG. A rounded-corner edge with a hairline border is available as a toggle for opaque shots.

> Interactive PerspectiveStudio component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

Keep angles restrained; the presets mark the sane range. A panel past 30 degrees reads as decoration, not product.

## Rules

- **Use the shots as supplied.** No recoloring, no redrawing UI, no restaging screens in other tools. If a surface needs to look different, request a new capture rather than editing one.
- **Dark UI belongs on dark grounds.** Place shots on CRAFTSMAN BLACK or the CRAFTSMAN+ MINIMAL GRADIENT; on light grounds, give them a hairline border so the frame reads.
- **Crop whole regions, not chrome.** Cropping into a panel is fine; slicing through controls or labels is not.
- **Captions follow the [voice](/voice/principles)** and product names follow [naming](/voice/naming): the editor in the shots is PLAY Editor, the chat is INTELLIGENCE.
- Client work visible in shots is used with permission; do not swap in other client material without approval.
- **Device frames** for presenting these shots live in the team Dropbox; see [Downloads](/resources/downloads#device-mockups).


---

# Slides

> The slide system and the Google Slides template deck are in production.

Canonical: https://brand.craftsmanplus.com/resources/slides

## Coming Soon

The slide system and the Google Slides template deck are in production.

Until they land, decks follow the systems that already exist: the [presentation type ladder](/foundations/typography#one-system-every-tool), the [color hierarchy](/foundations/color), and the [composition rules for statics](/identity/statics).


---

# For Agents

> The machine-readable surfaces of this site: markdown mirrors of every page, structured brand rules, and the token API. Fetch these instead of scraping HTML.

Canonical: https://brand.craftsmanplus.com/resources/for-agents

## If you are an AI agent, start here

Every page on this site has a markdown mirror, and the rules that govern CRAFTSMAN+ output exist as structured data. Fetch these directly; do not parse the HTML.

| Endpoint | Returns |
| --- | --- |
| [/llms.txt](/llms.txt) | Index of the site with one-line descriptions per page |
| [/llms-full.txt](/llms-full.txt) | The complete guidelines as one markdown document |
| /&#123;page&#125;.md | Any page as markdown, e.g. [/foundations/color.md](/foundations/color.md) |
| [/api/tokens.json](/api/tokens.json) | The palette, gradients, type scale, space, radius, easing, and texture parameters |
| [/api/brand-rules.json](/api/brand-rules.json) | Naming rules, product taxonomy, voice attributes, and banned vocabulary |

## The self-check contract

Before returning CRAFTSMAN+ output, validate it against [/api/brand-rules.json](/api/brand-rules.json):

1. Every instance of the company name is CRAFTSMAN+, CM+, CRAFTSMAN PLUS, or CMP. Nothing title-cased or lowercased.
2. A fallback form appears only where the + genuinely cannot render.
3. PLAY, PRISM, INTELLIGENCE, and ANALYTICS are all caps when naming the product, lowercase as ordinary words.
4. Product forms come from the approved table; no invented hybrids.
5. All content is dark mode. Color use is monotone plus Orange and Pink, with exact hex values from [/api/tokens.json](/api/tokens.json); product palettes appear only on their own product's surfaces.
6. URCHIN (CRAFTSMAN PURPLE) appears only on INTELLIGENCE or AI surfaces.
7. No em dashes, no exclamation marks, no words from the banned list.

A miss on any of these is a defect. Fix it before returning output; do not ask permission to correct a name.

## Crawling

All well-behaved crawlers are welcome, and major AI crawlers are explicitly allowed in [robots.txt](/robots.txt). The [sitemap](/sitemap-index.xml) covers every page. Content updates flow through git, so pages carry stable URLs and stable heading anchors.