One typeface, three inks, and a word in italic.
Everything a designer, a developer or an agent needs to make Draidel work. Hover anything to take it: logos in every format, the palette, the fonts, the tokens, and the guide as one Markdown file.
Version 3.0.0September 2026Refoke#E81B76
Contents
v3.0.0 · 2026-09-10
Stock·Ink·Magenta·Refoke·One italic word·Stock·Ink·Magenta·Refoke·One italic word·
Wordmark—Monogram—Square—Landscape—Portrait—Banner—Tokens—Wordmark—Monogram—Square—Landscape—Portrait—Banner—Tokens—
Not a design agency. Engineers who care about craft.
Draidel builds companies and the systems they run on. The brand says that plainly: one typeface, paper and ink, and a single magenta word where the sentence turns.
The marks
The name, the period, and every ground.
The mark is the name set in Refoke Black with the period in magenta, exactly as the running head prints it. Hover any tile for its menu: SVG, PNG, or the markup. Every file is drawn from the same vector, so what you download is what you see.
Wordmark
The name in Refoke Black, the period in the accent. Transparent files, one setting each.
Download
3554 × 696Transparent
Wordmark, ink
The primary mark: ink with the magenta period. On stock, on white, or on a photograph with room.
Download
3554 × 696Transparent
Wordmark, stock
On ink plates and dark grounds. The period stays magenta.
Download
3554 × 696Transparent
Wordmark, magenta
The name in the accent with the period in ink. When the page has no other magenta.
Download
3554 × 696Transparent
Wordmark, for magenta
Stock letters, ink period. The only setting that reads on a magenta ground.
Download
3554 × 696Transparent
Wordmark, black
One colour, pure black, for print that cannot carry the accent.
Download
3554 × 696Transparent
Wordmark, white
One colour, pure white, for third-party dark UIs and video.
Monogram and app icon
The D and the period: transparent, and as the rounded tile for favicons, avatars and app icons.
Download
967 × 696Transparent
Monogram, ink
The D and the period, transparent. Avatars, stamps, favicons on light grounds.
Download
967 × 696Transparent
Monogram, stock
The monogram on a dark ground.
Download
967 × 696Transparent
Monogram, magenta
The monogram in the accent, period in ink.
Download
1024 × 1024
App icon, ink
Favicon and app icon. Rounded ink tile, stock D, magenta period.
Download
1024 × 1024
App icon, magenta
Social avatar where the feed is dark or busy.
Download
1024 × 1024
App icon, stock
Light-mode avatar and profile tile.
Square, 1:1
The name on its own ground, for profile images and square placements.
Download
1600 × 1600
Square, on stock
Profile images and 1:1 placements that want the full name.
Download
1600 × 1600
Square, on ink
Dark 1:1 placements.
Download
1600 × 1600
Square, on magenta
The loud 1:1. One per feed.
Landscape, 16:9
Title cards, end cards and covers.
Download
1920 × 1080
Landscape, on stock
Slide title cards, video end cards, 16:9 covers.
Download
1920 × 1080
Landscape, on ink
Dark 16:9 covers and stream overlays.
Download
1920 × 1080
Landscape, on magenta
Event screens and banners.
Portrait, 4:5
Monogram over the name, for stories, posters and vertical placements.
Download
1600 × 2000
Portrait, on stock
Stories, posters and 4:5 placements. Monogram over the name.
Download
1600 × 2000
Portrait, on ink
Dark 4:5 placements.
Download
1600 × 2000
Portrait, on magenta
The loud 4:5.
Banner, 4:1
Profile covers, email headers and strips.
Download
1584 × 396
Banner, on stock
LinkedIn and X covers, email headers, 4:1 strips.
Download
1584 × 396
Banner, on ink
Dark covers and strips.
Download
1584 × 396
Banner, on magenta
The loud strip.
Legacy wordmark, 2015 to 2025
The geometric mark, redrawn as a vector. For material already printed with it; not for new work.
Download
1566 × 266Transparentv1.0.0
Legacy wordmark, magenta
The 2015 to 2025 mark, redrawn as a vector. Only where it is already in place.
Download
1566 × 266Transparentv1.0.0
Legacy wordmark, ink
Legacy, one colour.
Download
1566 × 266Transparentv1.0.0
Legacy wordmark, stock
Legacy, on dark grounds.
How to place it
- Clear spaceThe height of the D on every side of the name. A quarter of the tile around the monogram.
- Minimum sizeName 96 px or 20 mm wide. Monogram 24 px or 6 mm.
- The periodAlways the accent: magenta on stock and ink, ink on magenta. In one-colour reproduction it takes the letters’ colour.
- Live textIn HTML the mark may be typed: Refoke Black, letter-spacing -0.04em, the period in magenta. That is what the site does.
- NeverRecolour, outline, stretch, rotate, shadow, gradient, another weight, another font, or a busy photograph behind it without a plate.
- FormatsSVG for anything on a screen or sent to print. PNG when the tool cannot take a vector. Every transparent file is transparent in both.
Colour
Three inks on paper.
Stock is the paper, ink is the type, magenta is the accent. The colour change between plates is the transition; there are no gradients and no card fills. Hover a swatch to copy it.
The three inks and their tints
The 2026 site and everything printed. Magenta is spent once per screen: the italic word, or one plate, or one control.
Stock
#EFEAE1Copy
--k-stock
The paper
Default page ground. Every plate is stock unless it is deliberately ink or magenta.
1:1 on stock15.6:1 on ink
Ink
#141116Copy
--k-ink
The type
All running text and display type on stock. The ground of dark plates.
15.6:1 on stock1:1 on ink
Magenta
#E81B76Copy
--k-mag
The accent
The italic word, the wordmark, the dot in the monogram, one plate per page at most. Display sizes only on stock.
3.6:1 on stock4.3:1 on ink
Ink 2
#4A444ECopy
--k-ink-2
Secondary text
Ledes, captions, eyebrows and fine print on stock.
7.9:1 on stock2:1 on ink
Stock 2
#DED6C9Copy
--k-stock-2
Rules
Hairlines and dividers on stock. Never a fill.
1.2:1 on stock13:1 on ink
Magenta, text
#B0135ACopy
--k-mag-text
Accent at body size
The magenta darkened to clear AA on stock at body size: inline links and small accents.
5.7:1 on stock2.8:1 on ink
Magenta, on ink
#FF7FB2Copy
--k-mag-text-on-ink
Accent on dark plates
The accent lifted so it survives an ink or magenta ground. Italic words and links on dark plates.
2:1 on stock8:1 on ink
Digital accent and product surfaces
Product UI, HubSpot templates and email. Draidel Pink is the accent there; the burgundy stack is its ground. Not for plates.
Draidel Pink
#ED197ECopy
--draidel-pink
Digital accent
Buttons, links, focus rings and states in product UI and email. HSL 334 85% 51%. Tailwind token v2-accent.
3.5:1 on stock4.5:1 on ink
Pink, hover
#FF4D9ECopy
--draidel-pink-hover
Hover partner
The lighter end of the pink text gradient and the hover state of pink controls.
2.6:1 on stock6.1:1 on ink
Shell
#08060ACopy
--draidel-shell
Deep surface
App shells and footers on dark product surfaces.
16.8:1 on stock1.1:1 on ink
Background
#0B0810Copy
--draidel-bg
Dark ground
The dark page ground of product UI. HSL 240 12% 3%.
16.6:1 on stock1.1:1 on ink
Plum
#2C0A1ECopy
--draidel-plum
Raised surface
Elevated panels on the dark ground.
15:1 on stock1:1 on ink
Burgundy
#3D0A28Copy
--draidel-burgundy
Hero ground
Dark hero backgrounds behind a pink glow.
13.8:1 on stock1.1:1 on ink
Type
One typeface. Refoke.
Regular, Bold and Black, each with an italic. Nothing else, ever: not Montserrat, not Playfair, not a serif standing in for the italic.
The six faces
Hover a face for its files in every format. The italic is the accent word inside a sentence, never the sentence.
Refoke Regular400 normal
Body, ledes, captions, eyebrows. The default for everything.
We build companies.
Refoke Italic400 italic
The accent word inside a body sentence. Never a whole sentence.
We build companies.
Refoke Bold700 normal
Strong inline emphasis, table values, the proof rows.
We build companies.
Refoke Bold Italic700 italic
The accent word inside bold copy.
We build companies.
Refoke Black900 normal
Display: every plate headline, the marquee, the ledger figures, the CTA.
We build companies.
Refoke Black Italic900 italic
The accent word inside a headline. The signature gesture.
We build companies.
Type roles
The settings the site uses, as CSS you can paste. The eyebrow is the most recognisable move in the system.
Display
We build companies.
Plate headlines. Black, tight, one italic word in magenta.
font: 900 clamp(2.6rem, 9vw, 8rem)/0.94 Refoke; letter-spacing: -0.035em;Plate heading
Rarely new software. Removing the joins nobody owns.
The heading on a list, grid or prose plate.
font: 900 clamp(1.8rem, 5vw, 3.5rem)/0.94 Refoke; letter-spacing: -0.035em; max-width: 18ch;Lede
Engineers and operators, not an agency.
One sentence under a headline, in Ink 2.
font: 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.5 Refoke; color: var(--k-ink-2); max-width: 34ch;Body
Most of what we are hired to fix was bought, not built.
Running copy. Regular weight, never light.
font: 400 clamp(1rem, 1.05vw, 1.15rem)/1.5 Refoke;Eyebrow
PLATINUM PARTNER
The most recognisable typographic move. Uppercase, tracked wide, low contrast.
font: 400 0.7rem/1 Refoke; letter-spacing: 0.32em; text-transform: uppercase; color: var(--k-ink-2);Fine
Documentation, training, and a period where we run it with your team.
Card body, captions, colophon.
font: 400 0.875rem/1.5 Refoke; color: var(--k-ink-2);Plain, direct, and written by the people who build it.
We and you, never our team. The outcome first, then how. Two to eight words in a headline, one sentence under it, and an em-dash where a comma would stall.
The rules of the house
Ten things that make it look like Draidel.
01
One italic word
Every headline carries one word in Refoke Italic, in magenta. A word, not a phrase, and never a whole sentence.
02
Three inks
Stock, ink, magenta. No blue, no secondary palette, no gradient on the site. Semantic colours live in product states only.
03
Eyebrow first
Uppercase, 10 to 12 px, tracked 0.25 to 0.4 em, quiet colour. It sits above every section and every plate.
04
Rules, not boxes
Lists get a hairline above each item. No card fills, no coloured left borders, no drop shadows on paper.
05
Sentence case
Headlines and body in sentence case. Uppercase only for eyebrows and labels. Title Case in the navigation.
06
We and you
Never our team, never Draidel believes. Say what is wrong plainly, then what changes plainly.
07
Em-dashes, no emoji
The em-dash is welcome and is the only non-Latin character. Zero emoji, in copy, commits and subject lines.
08
One easing
cubic-bezier(0.22, 1, 0.36, 1). Hovers 300 to 500 ms, entrances 700 to 1000 ms, marquees 25 to 30 s. Hover adds colour and light; it never scales or darkens.
09
Readable without JavaScript
Every plate prints as flat, legible type with the motion island absent and under prefers-reduced-motion.
10
The logo from the kit
In one of its four colours, with its clear space, at or above its minimum size. Never redrawn, recoloured or set in a font.
For developers and agents
Copy it, download it, or point an agent at it.
Every block below is generated from the same data as this page, so it is always current. The Markdown is written for a model that has to produce Draidel work on its own.
The brand guide, for AI
draidel-brand.mdPaste it into a system prompt, a CLAUDE.md, or a project file. It carries the voice, the palette, the type and the logo rules, with the URL of every asset.
# 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.
Tokens as CSS custom properties
draidel-tokens.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;
}
Tokens as JSON
draidel-tokens.jsonColours with hex, RGB and HSL; faces; roles; motion; and the URL of every logo.
{
"brand": "Draidel",
"version": "3.0.0",
"date": "2026-09-10",
"edition": "2026",
"source": "https://www.draidel.com/brandguide",
"pinned": "https://www.draidel.com/hubfs/brand-assets/v3.0.0",
"versions": [
{
"version": "3.0.0",
"date": "2026-09-10",
"name": "Kinetic edition",
"summary": "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."
},
{
"version": "2.0.0",
"date": "2025-10-01",
"name": "Dark edition",
"summary": "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."
},
{
"version": "1.0.0",
"date": "2015-01-01",
"name": "Founding mark",
"summary": "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."
}
],
"color": {
"inks": {
"stock": {
"name": "Stock",
"hex": "#EFEAE1",
"rgb": [
239,
234,
225
],
"hsl": "hsl(39 30% 91%)",
"token": "--k-stock",
"role": "The paper",
"usage": "Default page ground. Every plate is stock unless it is deliberately ink or magenta."
},
"ink": {
"name": "Ink",
"hex": "#141116",
"rgb": [
20,
17,
22
],
"hsl": "hsl(276 13% 8%)",
"token": "--k-ink",
"role": "The type",
"usage": "All running text and display type on stock. The ground of dark plates."
},
"magenta": {
"name": "Magenta",
"hex": "#E81B76",
"rgb": [
232,
27,
118
],
"hsl": "hsl(333 82% 51%)",
"token": "--k-mag",
"role": "The accent",
"usage": "The italic word, the wordmark, the dot in the monogram, one plate per page at most. Display sizes only on stock."
},
"ink-2": {
"name": "Ink 2",
"hex": "#4A444E",
"rgb": [
74,
68,
78
],
"hsl": "hsl(276 7% 29%)",
"token": "--k-ink-2",
"role": "Secondary text",
"usage": "Ledes, captions, eyebrows and fine print on stock."
},
"stock-2": {
"name": "Stock 2",
"hex": "#DED6C9",
"rgb": [
222,
214,
201
],
"hsl": "hsl(37 24% 83%)",
"token": "--k-stock-2",
"role": "Rules",
"usage": "Hairlines and dividers on stock. Never a fill."
},
"magenta-text": {
"name": "Magenta, text",
"hex": "#B0135A",
"rgb": [
176,
19,
90
],
"hsl": "hsl(333 81% 38%)",
"token": "--k-mag-text",
"role": "Accent at body size",
"usage": "The magenta darkened to clear AA on stock at body size: inline links and small accents."
},
"magenta-on-ink": {
"name": "Magenta, on ink",
"hex": "#FF7FB2",
"rgb": [
255,
127,
178
],
"hsl": "hsl(336 100% 75%)",
"token": "--k-mag-text-on-ink",
"role": "Accent on dark plates",
"usage": "The accent lifted so it survives an ink or magenta ground. Italic words and links on dark plates."
}
},
"digital": {
"draidel-pink": {
"name": "Draidel Pink",
"hex": "#ED197E",
"rgb": [
237,
25,
126
],
"hsl": "hsl(331 85% 51%)",
"token": "--draidel-pink",
"role": "Digital accent",
"usage": "Buttons, links, focus rings and states in product UI and email. HSL 334 85% 51%. Tailwind token v2-accent."
},
"pink-hover": {
"name": "Pink, hover",
"hex": "#FF4D9E",
"rgb": [
255,
77,
158
],
"hsl": "hsl(333 100% 65%)",
"token": "--draidel-pink-hover",
"role": "Hover partner",
"usage": "The lighter end of the pink text gradient and the hover state of pink controls."
},
"shell": {
"name": "Shell",
"hex": "#08060A",
"rgb": [
8,
6,
10
],
"hsl": "hsl(270 25% 3%)",
"token": "--draidel-shell",
"role": "Deep surface",
"usage": "App shells and footers on dark product surfaces."
},
"background": {
"name": "Background",
"hex": "#0B0810",
"rgb": [
11,
8,
16
],
"hsl": "hsl(263 33% 5%)",
"token": "--draidel-bg",
"role": "Dark ground",
"usage": "The dark page ground of product UI. HSL 240 12% 3%."
},
"plum": {
"name": "Plum",
"hex": "#2C0A1E",
"rgb": [
44,
10,
30
],
"hsl": "hsl(325 63% 11%)",
"token": "--draidel-plum",
"role": "Raised surface",
"usage": "Elevated panels on the dark ground."
},
"burgundy": {
"name": "Burgundy",
"hex": "#3D0A28",
"rgb": [
61,
10,
40
],
"hsl": "hsl(325 72% 14%)",
"token": "--draidel-burgundy",
"role": "Hero ground",
"usage": "Dark hero backgrounds behind a pink glow."
}
}
},
"type": {
"family": "Refoke",
"fallback": "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
"faces": [
{
"name": "Refoke Regular",
"file": "Refoke-Regular",
"weight": 400,
"style": "normal",
"role": "Body, ledes, captions, eyebrows. The default for everything."
},
{
"name": "Refoke Italic",
"file": "Refoke-Italic",
"weight": 400,
"style": "italic",
"role": "The accent word inside a body sentence. Never a whole sentence."
},
{
"name": "Refoke Bold",
"file": "Refoke-Bold",
"weight": 700,
"style": "normal",
"role": "Strong inline emphasis, table values, the proof rows."
},
{
"name": "Refoke Bold Italic",
"file": "Refoke-BoldItalic",
"weight": 700,
"style": "italic",
"role": "The accent word inside bold copy."
},
{
"name": "Refoke Black",
"file": "Refoke-Black",
"weight": 900,
"style": "normal",
"role": "Display: every plate headline, the marquee, the ledger figures, the CTA."
},
{
"name": "Refoke Black Italic",
"file": "Refoke-BlackItalic",
"weight": 900,
"style": "italic",
"role": "The accent word inside a headline. The signature gesture."
}
],
"roles": [
{
"name": "Display",
"css": "font: 900 clamp(2.6rem, 9vw, 8rem)/0.94 Refoke; letter-spacing: -0.035em;",
"note": "Plate headlines. Black, tight, one italic word in magenta."
},
{
"name": "Plate heading",
"css": "font: 900 clamp(1.8rem, 5vw, 3.5rem)/0.94 Refoke; letter-spacing: -0.035em; max-width: 18ch;",
"note": "The heading on a list, grid or prose plate."
},
{
"name": "Lede",
"css": "font: 400 clamp(1.05rem, 1.5vw, 1.4rem)/1.5 Refoke; color: var(--k-ink-2); max-width: 34ch;",
"note": "One sentence under a headline, in Ink 2."
},
{
"name": "Body",
"css": "font: 400 clamp(1rem, 1.05vw, 1.15rem)/1.5 Refoke;",
"note": "Running copy. Regular weight, never light."
},
{
"name": "Eyebrow",
"css": "font: 400 0.7rem/1 Refoke; letter-spacing: 0.32em; text-transform: uppercase; color: var(--k-ink-2);",
"note": "The most recognisable typographic move. Uppercase, tracked wide, low contrast."
},
{
"name": "Fine",
"css": "font: 400 0.875rem/1.5 Refoke; color: var(--k-ink-2);",
"note": "Card body, captions, colophon."
}
]
},
"motion": {
"ease": "cubic-bezier(0.22, 1, 0.36, 1)",
"hoverMs": [
300,
500
],
"enterMs": [
700,
1000
],
"marqueeS": [
25,
30
]
},
"radius": {
"chip": 4,
"input": 8,
"card": 16,
"pill": 9999
},
"logos": [
{
"slug": "draidel-wordmark-ink",
"title": "Wordmark, ink",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "The primary mark: ink with the magenta period. On stock, on white, or on a photograph with room."
},
{
"slug": "draidel-wordmark-stock",
"title": "Wordmark, stock",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "On ink plates and dark grounds. The period stays magenta."
},
{
"slug": "draidel-wordmark-magenta",
"title": "Wordmark, magenta",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "The name in the accent with the period in ink. When the page has no other magenta."
},
{
"slug": "draidel-wordmark-on-magenta",
"title": "Wordmark, for magenta",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "Stock letters, ink period. The only setting that reads on a magenta ground."
},
{
"slug": "draidel-wordmark-black",
"title": "Wordmark, black",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "One colour, pure black, for print that cannot carry the accent."
},
{
"slug": "draidel-wordmark-white",
"title": "Wordmark, white",
"kind": "wordmark",
"since": "3.0.0",
"width": 3554,
"height": 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",
"use": "One colour, pure white, for third-party dark UIs and video."
},
{
"slug": "draidel-monogram-ink",
"title": "Monogram, ink",
"kind": "monogram",
"since": "3.0.0",
"width": 967,
"height": 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",
"use": "The D and the period, transparent. Avatars, stamps, favicons on light grounds."
},
{
"slug": "draidel-monogram-stock",
"title": "Monogram, stock",
"kind": "monogram",
"since": "3.0.0",
"width": 967,
"height": 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",
"use": "The monogram on a dark ground."
},
{
"slug": "draidel-monogram-magenta",
"title": "Monogram, magenta",
"kind": "monogram",
"since": "3.0.0",
"width": 967,
"height": 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",
"use": "The monogram in the accent, period in ink."
},
{
"slug": "draidel-icon-ink",
"title": "App icon, ink",
"kind": "monogram-tile",
"since": "3.0.0",
"width": 1024,
"height": 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",
"use": "Favicon and app icon. Rounded ink tile, stock D, magenta period."
},
{
"slug": "draidel-icon-magenta",
"title": "App icon, magenta",
"kind": "monogram-tile",
"since": "3.0.0",
"width": 1024,
"height": 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",
"use": "Social avatar where the feed is dark or busy."
},
{
"slug": "draidel-icon-stock",
"title": "App icon, stock",
"kind": "monogram-tile",
"since": "3.0.0",
"width": 1024,
"height": 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",
"use": "Light-mode avatar and profile tile."
},
{
"slug": "draidel-square-stock",
"title": "Square, on stock",
"kind": "square",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "Profile images and 1:1 placements that want the full name."
},
{
"slug": "draidel-square-ink",
"title": "Square, on ink",
"kind": "square",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "Dark 1:1 placements."
},
{
"slug": "draidel-square-magenta",
"title": "Square, on magenta",
"kind": "square",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "The loud 1:1. One per feed."
},
{
"slug": "draidel-landscape-stock",
"title": "Landscape, on stock",
"kind": "landscape",
"since": "3.0.0",
"width": 1920,
"height": 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",
"use": "Slide title cards, video end cards, 16:9 covers."
},
{
"slug": "draidel-landscape-ink",
"title": "Landscape, on ink",
"kind": "landscape",
"since": "3.0.0",
"width": 1920,
"height": 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",
"use": "Dark 16:9 covers and stream overlays."
},
{
"slug": "draidel-landscape-magenta",
"title": "Landscape, on magenta",
"kind": "landscape",
"since": "3.0.0",
"width": 1920,
"height": 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",
"use": "Event screens and banners."
},
{
"slug": "draidel-portrait-stock",
"title": "Portrait, on stock",
"kind": "portrait",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "Stories, posters and 4:5 placements. Monogram over the name."
},
{
"slug": "draidel-portrait-ink",
"title": "Portrait, on ink",
"kind": "portrait",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "Dark 4:5 placements."
},
{
"slug": "draidel-portrait-magenta",
"title": "Portrait, on magenta",
"kind": "portrait",
"since": "3.0.0",
"width": 1600,
"height": 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",
"use": "The loud 4:5."
},
{
"slug": "draidel-banner-stock",
"title": "Banner, on stock",
"kind": "banner",
"since": "3.0.0",
"width": 1584,
"height": 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",
"use": "LinkedIn and X covers, email headers, 4:1 strips."
},
{
"slug": "draidel-banner-ink",
"title": "Banner, on ink",
"kind": "banner",
"since": "3.0.0",
"width": 1584,
"height": 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",
"use": "Dark covers and strips."
},
{
"slug": "draidel-banner-magenta",
"title": "Banner, on magenta",
"kind": "banner",
"since": "3.0.0",
"width": 1584,
"height": 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",
"use": "The loud strip."
},
{
"slug": "draidel-legacy-wordmark-magenta",
"title": "Legacy wordmark, magenta",
"kind": "legacy-wordmark",
"since": "1.0.0",
"width": 1566,
"height": 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",
"use": "The 2015 to 2025 mark, redrawn as a vector. Only where it is already in place."
},
{
"slug": "draidel-legacy-wordmark-ink",
"title": "Legacy wordmark, ink",
"kind": "legacy-wordmark",
"since": "1.0.0",
"width": 1566,
"height": 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",
"use": "Legacy, one colour."
},
{
"slug": "draidel-legacy-wordmark-stock",
"title": "Legacy wordmark, stock",
"kind": "legacy-wordmark",
"since": "1.0.0",
"width": 1566,
"height": 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",
"use": "Legacy, on dark grounds."
}
]
}
Tokens for Tailwind
draidel-tailwind.config.js// tailwind.config.js — Draidel tokens
export default {
theme: {
extend: {
colors: {
stock: { DEFAULT: '#efeae1', 2: '#ded6c9' },
ink: { DEFAULT: '#141116', 2: '#4a444e' },
magenta: { DEFAULT: '#e81b76', text: '#b0135a', 'on-ink': '#ff7fb2' },
'v2-accent': 'rgb(237 25 126 / <alpha-value>)',
},
fontFamily: { sans: ['Refoke', 'ui-sans-serif', 'system-ui', 'sans-serif'] },
letterSpacing: { eyebrow: '0.32em', display: '-0.035em' },
transitionTimingFunction: { draidel: 'cubic-bezier(0.22, 1, 0.36, 1)' },
borderRadius: { card: '16px' },
},
},
};
Refoke @font-face
draidel-fonts.cssPoints at the hosted files. Self-host from the zip for anything outside draidel.com.
@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');
}
Versions
The brand is versioned like software.
3.0.0 — Kinetic edition, September 2026
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 guide and downloadable kit. This is the current version.
2.0.0 — Dark edition, 2025
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 — Founding mark, 2015
The geometric monoline DRAIDEL wordmark in #D40B6B on white. Retired for new work in 3.0.0 and kept in the kit as the legacy wordmark.
How it moves
Major for a new visual system, minor for a new asset, colour or rule inside it, patch for corrections. The kit at /hubfs/brand-assets is always the latest; every version is also pinned at /hubfs/brand-assets/v3.0.0 and never overwritten.
27logo variants, SVG and PNG
6faces of Refoke, four formats each
13colours, with contrast on both grounds
3.0.0the version this page and the kit are on