{
  "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."
    }
  ]
}