# Draidel — brand guide for AI agents

Version 3.0.0 (2026-09-10), the 2026 kinetic edition.
Canonical, human-readable version: https://www.draidel.com/brandguide
Machine-readable tokens: https://www.draidel.com/hubfs/brand-assets/draidel-tokens.json
This exact version, pinned: https://www.draidel.com/hubfs/brand-assets/v3.0.0/draidel-brand.md

## 0. Versions

| Version | Date | Name | What changed |
|---|---|---|---|
| 3.0.0 | 2026-09-10 | Kinetic edition | The print system: stock, ink and magenta, one idea per plate. The wordmark becomes the name set in Refoke Black with a magenta period; the monogram is the D and the period. First published brand guide and downloadable kit. |
| 2.0.0 | 2025-10-01 | Dark edition | Refoke replaces Montserrat and Playfair. Dark burgundy and plum surfaces pierced by Draidel Pink #ED197E, the italic accent word, wide-tracked eyebrows. The geometric wordmark carries over. |
| 1.0.0 | 2015-01-01 | Founding mark | The geometric monoline DRAIDEL wordmark in #D40B6B on white. Retired for new work in 3.0.0; kept in the kit as the legacy wordmark. |

Versioning: major for a new visual system, minor for a new asset, colour or rule inside it, patch for corrections. The kit at https://www.draidel.com/hubfs/brand-assets is always the latest; a version is pinned at https://www.draidel.com/hubfs/brand-assets/v<version>.

## 1. Who Draidel is

Draidel is a technical consulting firm and venture studio from Miami. Founded 2015. A team with 20+ years of experience, working across 6 countries. Platinum HubSpot Solutions Partner. Tagline: **"We build companies."**

Draidel is **not** a design agency, a marketing agency or a dev shop. They are engineers and operators who build companies: their own (Draidel Ventures) and their clients'. The positioning is *technical go-to-market partner*: migrations, RevOps, HubSpot architecture, AI and data, engineering.

The five services: Go To Market, RevOps, HubSpot, AI & Data, Engineering. Ventures and the Partner Program are proof, not products.

How an engagement runs: Diagnose, Design, Build, Instrument, Hand over.

## 2. Voice

- Plain, direct, operator-confident. No MBA-speak, no marketing adjectives.
- First person plural. "We" and "you". Never "our team", never "Draidel believes".
- Contrast what Draidel is not with what it is: "Not a design agency. Engineers who care about craft."
- Outcome first. State the problem plainly, then the outcome plainly.
- Headlines are two to eight words. Supporting paragraphs are one sentence, one idea, about 25 words.
- Process steps are a verb plus one clause: "Ship — go live with confidence and zero drama."
- Scale cues ("2015", "6 countries", "Platinum") live in the eyebrow or the fact line as comma-separated numerals, never as bullet lists.
- Spanish copy keeps the same clipped tone.

### Casing and punctuation

- Sentence case for headlines and body. UPPERCASE only for eyebrows and labels.
- Title Case for navigation items.
- Em-dashes are encouraged ("engineering, data, and creativity from Miami — we build…").
- Periods after stacked pillar words: "Build. Advise. Grow."
- **No emoji, anywhere.** Not in copy, commit messages or subject lines. The em-dash is the only non-Latin character in use.

### Lines lifted verbatim

- "We build companies."
- "Most consultants hand you a deck. We build the thing."
- "Engineers and operators, not an agency."
- "Most revenue systems are assembled by accident. Ours are designed."
- "Let's build something that holds."

## 3. The signature gesture: one italic word

Every headline carries **one word in Refoke Italic, set in magenta**. The rest of the line is Refoke Black in ink. "We build *companies*." "Ours are *designed*." Italic is an accent, never emphasis: no italic sentences, no italic paragraphs. In source, editors author it with asterisks (`We build *companies*`) and the renderer turns the asterisked word into `<i>`.

## 4. Colour

The 2026 site is a print system: three inks on paper. Stock is the paper, ink is the type, magenta is the accent. The colour change between full-height plates is the transition; there are no gradients and no card fills.

| Name | Hex | RGB | Token | Use |
|---|---|---|---|---|
| Stock | `#EFEAE1` | `rgb(239, 234, 225)` | `--k-stock` | Default page ground. Every plate is stock unless it is deliberately ink or magenta. |
| Ink | `#141116` | `rgb(20, 17, 22)` | `--k-ink` | All running text and display type on stock. The ground of dark plates. |
| Magenta | `#E81B76` | `rgb(232, 27, 118)` | `--k-mag` | The italic word, the wordmark, the dot in the monogram, one plate per page at most. Display sizes only on stock. |
| Ink 2 | `#4A444E` | `rgb(74, 68, 78)` | `--k-ink-2` | Ledes, captions, eyebrows and fine print on stock. |
| Stock 2 | `#DED6C9` | `rgb(222, 214, 201)` | `--k-stock-2` | Hairlines and dividers on stock. Never a fill. |
| Magenta, text | `#B0135A` | `rgb(176, 19, 90)` | `--k-mag-text` | The magenta darkened to clear AA on stock at body size: inline links and small accents. |
| Magenta, on ink | `#FF7FB2` | `rgb(255, 127, 178)` | `--k-mag-text-on-ink` | The accent lifted so it survives an ink or magenta ground. Italic words and links on dark plates. |

Contrast: ink on stock 15.6:1. Magenta on stock 3.6:1 (large text only; use Magenta, text at body size, 5.7:1). Stock on ink 15.6:1. Stock on magenta 3.6:1 (large text only).

Digital accent and product surfaces (apps, HubSpot templates, email, the pre-2026 dark site):

| Name | Hex | RGB | Token | Use |
|---|---|---|---|---|
| Draidel Pink | `#ED197E` | `rgb(237, 25, 126)` | `--draidel-pink` | Buttons, links, focus rings and states in product UI and email. HSL 334 85% 51%. Tailwind token v2-accent. |
| Pink, hover | `#FF4D9E` | `rgb(255, 77, 158)` | `--draidel-pink-hover` | The lighter end of the pink text gradient and the hover state of pink controls. |
| Shell | `#08060A` | `rgb(8, 6, 10)` | `--draidel-shell` | App shells and footers on dark product surfaces. |
| Background | `#0B0810` | `rgb(11, 8, 16)` | `--draidel-bg` | The dark page ground of product UI. HSL 240 12% 3%. |
| Plum | `#2C0A1E` | `rgb(44, 10, 30)` | `--draidel-plum` | Elevated panels on the dark ground. |
| Burgundy | `#3D0A28` | `rgb(61, 10, 40)` | `--draidel-burgundy` | Dark hero backgrounds behind a pink glow. |

Rules:
- Magenta is spent once per screen: the italic word, or one plate, or one control. Not all three.
- No blue anywhere. No secondary brand colours. Semantic colours (success, warning, danger) appear only in product UI states.
- No gradients on the 2026 site. In product UI the only gradient is the pink text gradient #ED197E → #FF4D9E and radial pink glows behind sections.

## 5. Type

One typeface: **Refoke**, in Regular 400, Bold 700 and Black 900, each with an italic. Nothing else. Never Montserrat, never Playfair Display, never a system serif as a substitute for the italic.

| Face | Weight | Files | Role |
|---|---|---|---|
| Refoke Regular | 400 normal | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.otf) | Body, ledes, captions, eyebrows. The default for everything. |
| Refoke Italic | 400 italic | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.otf) | The accent word inside a body sentence. Never a whole sentence. |
| Refoke Bold | 700 normal | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.otf) | Strong inline emphasis, table values, the proof rows. |
| Refoke Bold Italic | 700 italic | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.otf) | The accent word inside bold copy. |
| Refoke Black | 900 normal | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.otf) | Display: every plate headline, the marquee, the ledger figures, the CTA. |
| Refoke Black Italic | 900 italic | [woff2](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.woff2) · [woff](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.woff) · [ttf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.ttf) · [otf](https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.otf) | The accent word inside a headline. The signature gesture. |

Type roles (CSS shorthand):

| Role | CSS | Note |
|---|---|---|
| Display | `font: 900 clamp(2.6rem, 9vw, 8rem)/0.94 Refoke; letter-spacing: -0.035em;` | Plate headlines. Black, tight, one italic word in magenta. |
| Plate heading | `font: 900 clamp(1.8rem, 5vw, 3.5rem)/0.94 Refoke; letter-spacing: -0.035em; max-width: 18ch;` | The heading on a list, grid or prose plate. |
| Lede | `font: 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.5 Refoke; color: var(--k-ink-2); max-width: 34ch;` | One sentence under a headline, in Ink 2. |
| Body | `font: 400 clamp(1rem, 1.05vw, 1.15rem)/1.5 Refoke;` | Running copy. Regular weight, never light. |
| Eyebrow | `font: 400 0.7rem/1 Refoke; letter-spacing: 0.32em; text-transform: uppercase; color: var(--k-ink-2);` | The most recognisable typographic move. Uppercase, tracked wide, low contrast. |
| Fine | `font: 400 0.875rem/1.5 Refoke; color: var(--k-ink-2);` | Card body, captions, colophon. |

- Display type is Black, tracking −0.035em, line-height 0.94.
- Body is Regular at 16–18px, line-height 1.5. There is no light weight; do not fake one.
- Eyebrows are uppercase, 10–12px, letter-spacing 0.25–0.4em, in a low-contrast colour (Ink 2 on stock, 66% stock on ink). This is the single most recognisable typographic move.
- Numerals in tables are tabular (`font-variant-numeric: tabular-nums`).

@font-face for the web:

```css
@font-face {
  font-family: 'Refoke';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Refoke';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Refoke';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Refoke';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BoldItalic.woff') format('woff');
}
@font-face {
  font-family: 'Refoke';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-Black.woff') format('woff');
}
@font-face {
  font-family: 'Refoke';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.woff2') format('woff2'),
       url('https://www.draidel.com/hubfs/brand-assets/fonts/Refoke-BlackItalic.woff') format('woff');
}
```

## 6. Logo

The wordmark is the name, **Draidel.**, set in Refoke Black at -0.04em tracking with the period in magenta. It is the same drawing the site's running head prints as live text. The monogram is the same setting cut to **D.** The geometric monoline DRAIDEL of 2015 to 2025 is the legacy wordmark: keep it where it is already printed, never use it for new work.

Rules:
- Clear space: one cap height of the wordmark on every side. For the monogram, one quarter of the tile.
- Minimum size: wordmark 120px or 25mm wide; monogram 24px or 6mm.
- Colours: magenta on stock or white; ink on stock when magenta is already spent; stock or white on ink and magenta; pure black for one-colour print.
- The period is always the accent: magenta on stock and ink, ink on magenta. In one-colour reproduction the period takes the letters' colour.
- Never recolour, outline, stretch, rotate, add a shadow or a gradient, re-set the name in another weight or font, or place it on a busy photograph without a plate behind it. In HTML the mark may be live text: Refoke Black, letter-spacing -0.04em, period in magenta.
- The legacy raster files used #D40B6B; that colour is retired.

| Variant | Since | Size | Files | Use |
|---|---|---|---|---|
| Wordmark, ink | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-ink.png) | The primary mark: ink with the magenta period. On stock, on white, or on a photograph with room. |
| Wordmark, stock | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-stock.png) | On ink plates and dark grounds. The period stays magenta. |
| Wordmark, magenta | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-magenta.png) | The name in the accent with the period in ink. When the page has no other magenta. |
| Wordmark, for magenta | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-on-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-on-magenta.png) | Stock letters, ink period. The only setting that reads on a magenta ground. |
| Wordmark, black | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-black.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-black.png) | One colour, pure black, for print that cannot carry the accent. |
| Wordmark, white | v3.0.0 | 3554×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-white.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-wordmark-white.png) | One colour, pure white, for third-party dark UIs and video. |
| Monogram, ink | v3.0.0 | 967×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-ink.png) | The D and the period, transparent. Avatars, stamps, favicons on light grounds. |
| Monogram, stock | v3.0.0 | 967×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-stock.png) | The monogram on a dark ground. |
| Monogram, magenta | v3.0.0 | 967×696 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-monogram-magenta.png) | The monogram in the accent, period in ink. |
| App icon, ink | v3.0.0 | 1024×1024 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-ink.png) | Favicon and app icon. Rounded ink tile, stock D, magenta period. |
| App icon, magenta | v3.0.0 | 1024×1024 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-magenta.png) | Social avatar where the feed is dark or busy. |
| App icon, stock | v3.0.0 | 1024×1024 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-icon-stock.png) | Light-mode avatar and profile tile. |
| Square, on stock | v3.0.0 | 1600×1600 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-stock.png) | Profile images and 1:1 placements that want the full name. |
| Square, on ink | v3.0.0 | 1600×1600 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-ink.png) | Dark 1:1 placements. |
| Square, on magenta | v3.0.0 | 1600×1600 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-square-magenta.png) | The loud 1:1. One per feed. |
| Landscape, on stock | v3.0.0 | 1920×1080 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-stock.png) | Slide title cards, video end cards, 16:9 covers. |
| Landscape, on ink | v3.0.0 | 1920×1080 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-ink.png) | Dark 16:9 covers and stream overlays. |
| Landscape, on magenta | v3.0.0 | 1920×1080 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-landscape-magenta.png) | Event screens and banners. |
| Portrait, on stock | v3.0.0 | 1600×2000 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-stock.png) | Stories, posters and 4:5 placements. Monogram over the name. |
| Portrait, on ink | v3.0.0 | 1600×2000 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-ink.png) | Dark 4:5 placements. |
| Portrait, on magenta | v3.0.0 | 1600×2000 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-portrait-magenta.png) | The loud 4:5. |
| Banner, on stock | v3.0.0 | 1584×396 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-stock.png) | LinkedIn and X covers, email headers, 4:1 strips. |
| Banner, on ink | v3.0.0 | 1584×396 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-ink.png) | Dark covers and strips. |
| Banner, on magenta | v3.0.0 | 1584×396 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-banner-magenta.png) | The loud strip. |
| Legacy wordmark, magenta | v1.0.0 | 1566×266 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-magenta.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-magenta.png) | The 2015 to 2025 mark, redrawn as a vector. Only where it is already in place. |
| Legacy wordmark, ink | v1.0.0 | 1566×266 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-ink.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-ink.png) | Legacy, one colour. |
| Legacy wordmark, stock | v1.0.0 | 1566×266 | [SVG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-stock.svg) · [PNG](https://www.draidel.com/hubfs/brand-assets/logos/draidel-legacy-wordmark-stock.png) | Legacy, on dark grounds. |

All logos in one archive: https://www.draidel.com/hubfs/brand-assets/draidel-logos.zip

## 7. Layout, surfaces and motion

- The 2026 site is composed of full-height **plates**, one idea per plate, each in one of the three inks. Interior pages open with a page head plate and close with a CTA plate.
- Lists are ruled, not boxed: a hairline above each item, no card fill, no coloured left border (that pattern is an AI tell and is banned).
- Product UI surfaces are dark-first: cards are `rounded-2xl`, 1px `rgba(255,255,255,0.08)` hairline, `rgba(255,255,255,0.04)` fill, optional pink corner glow on hover. Pill radius on every button and badge.
- Content max-width 1280px, side padding `clamp(1.5rem, 5vw, 5rem)`, section rhythm 96–128px.
- Easing is always `cubic-bezier(0.22, 1, 0.36, 1)`. Hovers 300–500ms, entrances 700–1000ms, marquees 25–30s linear.
- Hover is "more colour, more light, a small translate". Never scale up, never darken.
- Everything must read with JavaScript off and under `prefers-reduced-motion`.
- Icons: hand-drawn inline SVG, 1.5px stroke, never filled. The one custom icon is the long arrow that stretches on hover.
- Imagery: warm, low-key, often magenta-graded photographs of people. No stock illustration, no cool tones, no black and white.

## 8. Accessibility

WCAG 2.1 AA is the floor. Magenta on stock is for display sizes; body-size accents use Magenta, text. Focus rings are visible and use the accent. Every image has alt text; every icon-only control has a name.

## 9. Tokens

CSS custom properties: https://www.draidel.com/hubfs/brand-assets/draidel-tokens.css
JSON: https://www.draidel.com/hubfs/brand-assets/draidel-tokens.json
Tailwind: https://www.draidel.com/hubfs/brand-assets/draidel-tailwind.config.js
Fonts (all faces, all formats): https://www.draidel.com/hubfs/brand-assets/draidel-refoke.zip
Everything: https://www.draidel.com/hubfs/brand-assets/draidel-brand-kit.zip

```css
/* Draidel design tokens v3.0.0 (2026-09-10) — https://www.draidel.com/brandguide */
:root {
  /* The three inks and their working tints */
  --k-stock: #efeae1;
  --k-ink: #141116;
  --k-mag: #e81b76;
  --k-ink-2: #4a444e;
  --k-stock-2: #ded6c9;
  --k-mag-text: #b0135a;
  --k-mag-text-on-ink: #ff7fb2;

  /* Digital accent and product surfaces */
  --draidel-pink: #ed197e;
  --draidel-pink-hover: #ff4d9e;
  --draidel-shell: #08060a;
  --draidel-bg: #0b0810;
  --draidel-plum: #2c0a1e;
  --draidel-burgundy: #3d0a28;

  /* Type */
  --font-sans: 'Refoke', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k-track: 0.28em;          /* eyebrow tracking */
  --tracking-tight: -0.035em; /* display tracking */
  --leading-display: 0.94;
  --leading-body: 1.5;

  /* Motion */
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --k-hover: 400ms;
  --k-enter: 900ms;

  /* Rhythm */
  --k-pad: clamp(1.5rem, 5vw, 5rem);
  --radius-pill: 9999px;
  --radius-card: 16px;
}
```

## 10. Quick checklist before shipping anything

1. Refoke only. One italic magenta word per headline, and it is a word, not a phrase.
2. Three inks on the site; pink accent on product surfaces. No blue, no gradient, no emoji.
3. Eyebrow above the section: uppercase, tracked, quiet.
4. Rules, not boxes. No card fills, no coloured left borders.
5. Copy says "we" and "you", states the outcome, and fits in one breath.
6. Logo from this kit, with its clear space, in one of its four colours.