Design tokens

The palette, type and spacing as code. Use these values in the website, email templates and any WhatsApp catalogue tooling, so that every screen matches print.

/* Velari Atelier — design tokens (CSS custom properties)
   Source: Velari Atelier Brand Guidelines, Edition 01 · 2026.
   Core colours are from the guidelines; tints marked "derived" are proposed for digital use. */
:root{
  /* Core palette */
  --v-color-plum:#420F29;          /* Deep Plum — the voice: logo, headings, signature backgrounds */
  --v-color-ivory:#F6F1E9;         /* Warm Ivory — the base: pages, packaging, space */
  --v-color-dusty-mauve:#936A7E;   /* Dusty Mauve — the swish; small accents only */
  --v-color-velvet-mauve:#754F66;  /* Velvet Mauve — emblem ground, secondary panels */
  --v-color-navy:#141B35;          /* Midnight Navy — evening contrast, occasions */

  /* Print specification — Proposed, confirm from printed proof.
     Deep Plum     #420F29  CMYK FOGRA39 39 88 25 77  ·  PANTONE 690 C  ·  PANTONE 2357 U
     Warm Ivory    #F6F1E9  CMYK FOGRA39 4 5 10 0  ·  PANTONE 9285 C  ·  PANTONE 9285 U
     Dusty Mauve   #936A7E  CMYK FOGRA39 28 53 20 33  ·  PANTONE 4094 C  ·  PANTONE 689 U
     Velvet Mauve  #754F66  CMYK FOGRA39 35 61 20 46  ·  PANTONE 4111 C  ·  PANTONE 229 U
     Midnight Navy #141B35  CMYK FOGRA39 81 65 16 79  ·  PANTONE 4146 C  ·  PANTONE 282 U */

  /* Derived tints (proposed, digital) — mixed toward Warm Ivory / Deep Plum */
  --v-color-ivory-deep:#EEE7DC;
  --v-color-ivory-shade:#E5DBCD;
  --v-color-plum-90:#54263C;
  --v-color-star-glow:#E7D6DE;
  --v-color-star-rose:#C9A3B6;
  --v-color-plum-80:#663C4F;
  --v-color-plum-60:#8A6976;
  --v-color-plum-40:#AE979C;
  --v-color-plum-20:#D2C4C3;
  --v-color-plum-10:#E4DAD6;
  --v-color-dusty-mauve-80:#A78593;
  --v-color-dusty-mauve-60:#BBA0A9;
  --v-color-dusty-mauve-40:#CEBBBE;
  --v-color-dusty-mauve-20:#E2D6D4;
  --v-color-dusty-mauve-10:#ECE4DE;
  --v-color-velvet-mauve-80:#8F6F80;
  --v-color-velvet-mauve-60:#A9909A;
  --v-color-velvet-mauve-40:#C2B0B5;
  --v-color-velvet-mauve-20:#DCD1CF;
  --v-color-velvet-mauve-10:#E9E1DC;
  --v-color-navy-80:#414659;
  --v-color-navy-60:#6E717D;
  --v-color-navy-40:#9C9BA1;
  --v-color-navy-20:#C9C6C5;
  --v-color-navy-10:#DFDCD7;

  /* Semantic */
  --v-surface:var(--v-color-ivory);
  --v-surface-alt:var(--v-color-ivory-deep);
  --v-surface-inverse:var(--v-color-plum);
  --v-text:var(--v-color-plum);
  --v-text-muted:var(--v-color-velvet-mauve);
  --v-text-inverse:var(--v-color-ivory);
  --v-line:rgba(66,15,41,.16);
  --v-line-strong:rgba(66,15,41,.32);
  --v-accent:var(--v-color-dusty-mauve);
  --v-focus:var(--v-color-velvet-mauve);

  /* Typography */
  --v-font-display:"Cinzel","Trajan Pro",Georgia,serif;
  --v-font-text:"Cormorant Garamond","Cormorant",Garamond,Georgia,serif;
  --v-font-arabic:"Amiri","Noto Naskh Arabic","Traditional Arabic",serif;
  --v-tracking-label:.24em;
  --v-tracking-title:.12em;
  --v-size-label:.8rem;   /* 12.8px */
  --v-size-small:1rem;    /* 16px  */
  --v-size-body:1.25rem;  /* 20px  */
  --v-size-lead:1.5625rem;/* 25px  */
  --v-size-h3:1.953rem;   /* 31px  */
  --v-size-h2:2.441rem;   /* 39px  */
  --v-size-h1:3.052rem;   /* 49px  */
  --v-size-display:3.815rem; /* 61px */
  --v-leading-body:1.6;
  --v-leading-tight:1.15;

  /* Space (8px base) */
  --v-space-1:4px; --v-space-2:8px; --v-space-3:12px; --v-space-4:16px;
  --v-space-5:24px; --v-space-6:32px; --v-space-7:48px; --v-space-8:64px;
  --v-space-9:96px; --v-space-10:128px;

  /* Shape & motion */
  --v-radius-0:0; --v-radius-1:2px; --v-radius-arch:999px 999px 0 0; --v-radius-round:50%;
  --v-ease:cubic-bezier(.22,.61,.36,1);
  --v-duration:240ms;

  /* Logo minimums */
  --v-min-wordmark-screen:160px;
  --v-min-monogram-screen:48px;
  --v-min-emblem-screen:80px;
}

{
  "$description": "Velari Atelier design tokens · Edition 01 · 2026 · identity.velari.ae",
  "color": {
    "core": {
      "plum": {
        "$type": "color",
        "$value": "#420F29",
        "$description": "Deep Plum — Logo, headings, signature backgrounds.",
        "$extensions": {
          "ae.velari": {
            "rgb": [
              66,
              15,
              41
            ],
            "print": {
              "status": "Proposed, confirm from printed proof",
              "lab": [
                13.8,
                26.8,
                -3.6
              ],
              "cmykCoatedFogra39": [
                39,
                88,
                25,
                77
              ],
              "cmykUncoatedFogra47": [
                52,
                91,
                16,
                76
              ],
              "pantoneCoated": "PANTONE 690 C",
              "pantoneCoatedConfidence": "Low",
              "pantoneUncoated": "PANTONE 2357 U",
              "pantoneUncoatedConfidence": "Very low"
            },
            "share": 30,
            "nameAr": "برقوقي داكن"
          }
        }
      },
      "ivory": {
        "$type": "color",
        "$value": "#F6F1E9",
        "$description": "Warm Ivory — Base for pages, packaging, space.",
        "$extensions": {
          "ae.velari": {
            "rgb": [
              246,
              241,
              233
            ],
            "print": {
              "status": "Proposed, confirm from printed proof",
              "lab": [
                95.4,
                0.7,
                4.5
              ],
              "cmykCoatedFogra39": [
                4,
                5,
                10,
                0
              ],
              "cmykUncoatedFogra47": [
                4,
                4,
                8,
                0
              ],
              "pantoneCoated": "PANTONE 9285 C",
              "pantoneCoatedConfidence": "Medium",
              "pantoneUncoated": "PANTONE 9285 U",
              "pantoneUncoatedConfidence": "Medium-low"
            },
            "share": 46,
            "nameAr": "عاجي دافئ"
          }
        }
      },
      "dusty-mauve": {
        "$type": "color",
        "$value": "#936A7E",
        "$description": "Dusty Mauve — The swish; small accents only.",
        "$extensions": {
          "ae.velari": {
            "rgb": [
              147,
              106,
              126
            ],
            "print": {
              "status": "Proposed, confirm from printed proof",
              "lab": [
                49.6,
                19.3,
                -4.3
              ],
              "cmykCoatedFogra39": [
                28,
                53,
                20,
                33
              ],
              "cmykUncoatedFogra47": [
                24,
                55,
                13,
                31
              ],
              "pantoneCoated": "PANTONE 4094 C",
              "pantoneCoatedConfidence": "Medium-high",
              "pantoneUncoated": "PANTONE 689 U",
              "pantoneUncoatedConfidence": "Medium"
            },
            "share": 6,
            "nameAr": "موف غباري"
          }
        }
      },
      "velvet-mauve": {
        "$type": "color",
        "$value": "#754F66",
        "$description": "Velvet Mauve — Emblem ground, secondary panels.",
        "$extensions": {
          "ae.velari": {
            "rgb": [
              117,
              79,
              102
            ],
            "print": {
              "status": "Proposed, confirm from printed proof",
              "lab": [
                38.5,
                19.3,
                -6.6
              ],
              "cmykCoatedFogra39": [
                35,
                61,
                20,
                46
              ],
              "cmykUncoatedFogra47": [
                35,
                67,
                12,
                44
              ],
              "pantoneCoated": "PANTONE 4111 C",
              "pantoneCoatedConfidence": "Medium",
              "pantoneUncoated": "PANTONE 229 U",
              "pantoneUncoatedConfidence": "Medium"
            },
            "share": 6,
            "nameAr": "موف مخملي"
          }
        }
      },
      "navy": {
        "$type": "color",
        "$value": "#141B35",
        "$description": "Midnight Navy — Evening contrast, occasions.",
        "$extensions": {
          "ae.velari": {
            "rgb": [
              20,
              27,
              53
            ],
            "print": {
              "status": "Proposed, confirm from printed proof",
              "lab": [
                10.2,
                3.9,
                -18.4
              ],
              "cmykCoatedFogra39": [
                81,
                65,
                16,
                79
              ],
              "cmykUncoatedFogra47": [
                89,
                58,
                18,
                81
              ],
              "pantoneCoated": "PANTONE 4146 C",
              "pantoneCoatedConfidence": "High",
              "pantoneUncoated": "PANTONE 282 U",
              "pantoneUncoatedConfidence": "Very low"
            },
            "share": 12,
            "nameAr": "كحلي ليلي"
          }
        }
      }
    },
    "derived": {
      "ivory-deep": {
        "$type": "color",
        "$value": "#EEE7DC",
        "$description": "Derived, proposed for digital use"
      },
      "ivory-shade": {
        "$type": "color",
        "$value": "#E5DBCD",
        "$description": "Derived, proposed for digital use"
      },
      "plum-90": {
        "$type": "color",
        "$value": "#54263C",
        "$description": "Derived, proposed for digital use"
      },
      "star-glow": {
        "$type": "color",
        "$value": "#E7D6DE",
        "$description": "Derived, proposed for digital use"
      },
      "star-rose": {
        "$type": "color",
        "$value": "#C9A3B6",
        "$description": "Derived, proposed for digital use"
      },
      "plum-80": {
        "$type": "color",
        "$value": "#663C4F",
        "$description": "Derived, proposed for digital use"
      },
      "plum-60": {
        "$type": "color",
        "$value": "#8A6976",
        "$description": "Derived, proposed for digital use"
      },
      "plum-40": {
        "$type": "color",
        "$value": "#AE979C",
        "$description": "Derived, proposed for digital use"
      },
      "plum-20": {
        "$type": "color",
        "$value": "#D2C4C3",
        "$description": "Derived, proposed for digital use"
      },
      "plum-10": {
        "$type": "color",
        "$value": "#E4DAD6",
        "$description": "Derived, proposed for digital use"
      },
      "dusty-mauve-80": {
        "$type": "color",
        "$value": "#A78593",
        "$description": "Derived, proposed for digital use"
      },
      "dusty-mauve-60": {
        "$type": "color",
        "$value": "#BBA0A9",
        "$description": "Derived, proposed for digital use"
      },
      "dusty-mauve-40": {
        "$type": "color",
        "$value": "#CEBBBE",
        "$description": "Derived, proposed for digital use"
      },
      "dusty-mauve-20": {
        "$type": "color",
        "$value": "#E2D6D4",
        "$description": "Derived, proposed for digital use"
      },
      "dusty-mauve-10": {
        "$type": "color",
        "$value": "#ECE4DE",
        "$description": "Derived, proposed for digital use"
      },
      "velvet-mauve-80": {
        "$type": "color",
        "$value": "#8F6F80",
        "$description": "Derived, proposed for digital use"
      },
      "velvet-mauve-60": {
        "$type": "color",
        "$value": "#A9909A",
        "$description": "Derived, proposed for digital use"
      },
      "velvet-mauve-40": {
        "$type": "color",
        "$value": "#C2B0B5",
        "$description": "Derived, proposed for digital use"
      },
      "velvet-mauve-20": {
        "$type": "color",
        "$value": "#DCD1CF",
        "$description": "Derived, proposed for digital use"
      },
      "velvet-mauve-10": {
        "$type": "color",
        "$value": "#E9E1DC",
        "$description": "Derived, proposed for digital use"
      },
      "navy-80": {
        "$type": "color",
        "$value": "#414659",
        "$description": "Derived, proposed for digital use"
      },
      "navy-60": {
        "$type": "color",
        "$value": "#6E717D",
        "$description": "Derived, proposed for digital use"
      },
      "navy-40": {
        "$type": "color",
        "$value": "#9C9BA1",
        "$description": "Derived, proposed for digital use"
      },
      "navy-20": {
        "$type": "color",
        "$value": "#C9C6C5",
        "$description": "Derived, proposed for digital use"
      },
      "navy-10": {
        "$type": "color",
        "$value": "#DFDCD7",
        "$description": "Derived, proposed for digital use"
      }
    },
    "semantic": {
      "surface": {
        "$type": "color",
        "$value": "{color.core.ivory}"
      },
      "surface-inverse": {
        "$type": "color",
        "$value": "{color.core.plum}"
      },
      "text": {
        "$type": "color",
        "$value": "{color.core.plum}"
      },
      "text-muted": {
        "$type": "color",
        "$value": "{color.core.velvet-mauve}"
      },
      "text-inverse": {
        "$type": "color",
        "$value": "{color.core.ivory}"
      },
      "accent": {
        "$type": "color",
        "$value": "{color.core.dusty-mauve}"
      },
      "evening": {
        "$type": "color",
        "$value": "{color.core.navy}"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Cinzel",
          "Georgia",
          "serif"
        ],
        "$description": "Headings & labels; uppercase, generously spaced"
      },
      "text": {
        "$type": "fontFamily",
        "$value": [
          "Cormorant Garamond",
          "Garamond",
          "Georgia",
          "serif"
        ],
        "$description": "Body copy (Medium 500), italic for emphasis"
      },
      "arabic": {
        "$type": "fontFamily",
        "$value": [
          "Amiri",
          "Noto Naskh Arabic",
          "serif"
        ],
        "$description": "Arabic (suggested; confirm before print)"
      }
    },
    "size": {
      "label": {
        "$type": "dimension",
        "$value": "12.8px"
      },
      "small": {
        "$type": "dimension",
        "$value": "16px"
      },
      "body": {
        "$type": "dimension",
        "$value": "20px"
      },
      "lead": {
        "$type": "dimension",
        "$value": "25px"
      },
      "h3": {
        "$type": "dimension",
        "$value": "31.25px"
      },
      "h2": {
        "$type": "dimension",
        "$value": "39.06px"
      },
      "h1": {
        "$type": "dimension",
        "$value": "48.83px"
      },
      "display": {
        "$type": "dimension",
        "$value": "61.04px"
      }
    },
    "weight": {
      "light": {
        "$type": "fontWeight",
        "$value": 300
      },
      "regular": {
        "$type": "fontWeight",
        "$value": 400
      },
      "medium": {
        "$type": "fontWeight",
        "$value": 500
      },
      "semibold": {
        "$type": "fontWeight",
        "$value": 600
      }
    },
    "tracking": {
      "label": {
        "$type": "dimension",
        "$value": "0.24em"
      },
      "title": {
        "$type": "dimension",
        "$value": "0.12em"
      }
    },
    "lineHeight": {
      "body": {
        "$type": "number",
        "$value": 1.6
      },
      "tight": {
        "$type": "number",
        "$value": 1.15
      }
    }
  },
  "space": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "3": {
      "$type": "dimension",
      "$value": "12px"
    },
    "4": {
      "$type": "dimension",
      "$value": "16px"
    },
    "5": {
      "$type": "dimension",
      "$value": "24px"
    },
    "6": {
      "$type": "dimension",
      "$value": "32px"
    },
    "7": {
      "$type": "dimension",
      "$value": "48px"
    },
    "8": {
      "$type": "dimension",
      "$value": "64px"
    },
    "9": {
      "$type": "dimension",
      "$value": "96px"
    },
    "10": {
      "$type": "dimension",
      "$value": "128px"
    }
  },
  "logo": {
    "minWidth": {
      "wordmark": {
        "screen": "160px",
        "print": "35mm"
      },
      "monogram": {
        "screen": "48px",
        "print": "12mm"
      },
      "emblem": {
        "screen": "80px tall",
        "print": "18mm tall"
      }
    },
    "clearSpace": "Height of the star (X) on every side"
  },
  "contrast": {
    "plum-on-ivory": 14.02,
    "plum-on-dusty-mauve": 3.46,
    "plum-on-velvet-mauve": 2.3,
    "plum-on-navy": 1.08,
    "ivory-on-plum": 14.02,
    "ivory-on-dusty-mauve": 4.06,
    "ivory-on-velvet-mauve": 6.09,
    "ivory-on-navy": 15.09,
    "dusty-mauve-on-plum": 3.46,
    "dusty-mauve-on-ivory": 4.06,
    "dusty-mauve-on-velvet-mauve": 1.5,
    "dusty-mauve-on-navy": 3.72,
    "velvet-mauve-on-plum": 2.3,
    "velvet-mauve-on-ivory": 6.09,
    "velvet-mauve-on-dusty-mauve": 1.5,
    "velvet-mauve-on-navy": 2.48,
    "navy-on-plum": 1.08,
    "navy-on-ivory": 15.09,
    "navy-on-dusty-mauve": 3.72,
    "navy-on-velvet-mauve": 2.48
  }
}

// Velari Atelier — SCSS tokens
$v-plum: #420F29; // Deep Plum · CMYK FOGRA39 39 88 25 77 · PANTONE 690 C / PANTONE 2357 U (proposed, confirm from printed proof)
$v-ivory: #F6F1E9; // Warm Ivory · CMYK FOGRA39 4 5 10 0 · PANTONE 9285 C / PANTONE 9285 U (proposed, confirm from printed proof)
$v-dusty-mauve: #936A7E; // Dusty Mauve · CMYK FOGRA39 28 53 20 33 · PANTONE 4094 C / PANTONE 689 U (proposed, confirm from printed proof)
$v-velvet-mauve: #754F66; // Velvet Mauve · CMYK FOGRA39 35 61 20 46 · PANTONE 4111 C / PANTONE 229 U (proposed, confirm from printed proof)
$v-navy: #141B35; // Midnight Navy · CMYK FOGRA39 81 65 16 79 · PANTONE 4146 C / PANTONE 282 U (proposed, confirm from printed proof)

$v-plum-80: #663C4F;
$v-plum-60: #8A6976;
$v-plum-40: #AE979C;
$v-plum-20: #D2C4C3;
$v-plum-10: #E4DAD6;
$v-dusty-mauve-80: #A78593;
$v-dusty-mauve-60: #BBA0A9;
$v-dusty-mauve-40: #CEBBBE;
$v-dusty-mauve-20: #E2D6D4;
$v-dusty-mauve-10: #ECE4DE;
$v-velvet-mauve-80: #8F6F80;
$v-velvet-mauve-60: #A9909A;
$v-velvet-mauve-40: #C2B0B5;
$v-velvet-mauve-20: #DCD1CF;
$v-velvet-mauve-10: #E9E1DC;
$v-navy-80: #414659;
$v-navy-60: #6E717D;
$v-navy-40: #9C9BA1;
$v-navy-20: #C9C6C5;
$v-navy-10: #DFDCD7;

$v-palette: (
  'plum': #420F29,
  'ivory': #F6F1E9,
  'dusty-mauve': #936A7E,
  'velvet-mauve': #754F66,
  'navy': #141B35
);

$v-font-display: 'Cinzel', Georgia, serif;
$v-font-text: 'Cormorant Garamond', Garamond, Georgia, serif;
$v-font-arabic: 'Amiri', 'Noto Naskh Arabic', serif;
$v-tracking-label: .24em;
$v-type-scale: (label: 12.8px, small: 16px, body: 20px, lead: 25px, h3: 31.25px, h2: 39.06px, h1: 48.83px, display: 61.04px);
$v-space: (1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 24px, 6: 32px, 7: 48px, 8: 64px, 9: 96px, 10: 128px);

/** Velari Atelier — Tailwind CSS preset
 *  module.exports = { presets: [require('./tailwind.velari.js')] }
 */
module.exports = {
  theme: {
    extend: {
      colors: {
        velari: {
          'plum': '#420F29',
          'ivory': '#F6F1E9',
          'dusty-mauve': '#936A7E',
          'velvet-mauve': '#754F66',
          'navy': '#141B35',
          'plum-80': '#663C4F',
          'plum-60': '#8A6976',
          'plum-40': '#AE979C',
          'plum-20': '#D2C4C3',
          'plum-10': '#E4DAD6',
          'dusty-mauve-80': '#A78593',
          'dusty-mauve-60': '#BBA0A9',
          'dusty-mauve-40': '#CEBBBE',
          'dusty-mauve-20': '#E2D6D4',
          'dusty-mauve-10': '#ECE4DE',
          'velvet-mauve-80': '#8F6F80',
          'velvet-mauve-60': '#A9909A',
          'velvet-mauve-40': '#C2B0B5',
          'velvet-mauve-20': '#DCD1CF',
          'velvet-mauve-10': '#E9E1DC',
          'navy-80': '#414659',
          'navy-60': '#6E717D',
          'navy-40': '#9C9BA1',
          'navy-20': '#C9C6C5',
          'navy-10': '#DFDCD7',
        },
      },
      fontFamily: {
        display: ['Cinzel', 'Georgia', 'serif'],
        serif: ['"Cormorant Garamond"', 'Garamond', 'Georgia', 'serif'],
        arabic: ['Amiri', '"Noto Naskh Arabic"', 'serif'],
      },
      fontSize: { label: '0.8rem', body: '1.25rem', lead: '1.5625rem', h3: '1.953rem', h2: '2.441rem', h1: '3.052rem', display: '3.815rem' },
      letterSpacing: { label: '0.24em', title: '0.12em' },
      minWidth: { 'wordmark': '160px', 'monogram': '48px' },
    },
  },
};