Brand
style guide// machine reference

{
  "coconut": { "value": "#FFFFFF", "type": "color", "description": "Primary background (light mode)" },
  "licorice": { "value": "#11110D", "type": "color", "description": "Primary text and dark background" },
  "matcha": { "value": "#D1F470", "type": "color", "description": "Primary CTA color (use sparingly)" },
  "sesame": { "value": "#F5F5F2", "type": "color", "description": "Secondary background" }
}

{
  "cactus":    { "value": "#A1D78F", "type": "color" },
  "pineapple": { "value": "#FEEB7E", "type": "color" },
  "shamrock":  { "value": "#2D4C33", "type": "color" },
  "fern":      { "value": "#203524", "type": "color" }
}

{
  "matcha-000": { "value": "#E6FAAB", "type": "color" },
  "matcha-100": { "value": "#D1F470", "type": "color" },
  "matcha-200": { "value": "#B2DA56", "type": "color" },
  "matcha-300": { "value": "#92BF3B", "type": "color" },
  "matcha-400": { "value": "#70A32A", "type": "color" },
  "matcha-500": { "value": "#4E8336", "type": "color" },
  "matcha-600": { "value": "#355E34", "type": "color" }
}

{
  "sesame-100": { "value": "#F5F5F2", "type": "color" },
  "sesame-200": { "value": "#E5E5E2", "type": "color" },
  "sesame-300": { "value": "#D5D5D2", "type": "color" },
  "sesame-400": { "value": "#B4B4B0", "type": "color" },
  "sesame-500": { "value": "#90918C", "type": "color" },
  "sesame-600": { "value": "#6C6C68", "type": "color" },
  "sesame-700": { "value": "#42433E", "type": "color" }
}

{
  "licorice-5":  { "value": "rgba(17, 17, 13, 0.05)", "type": "color" },
  "licorice-11": { "value": "rgba(17, 17, 13, 0.11)", "type": "color" },
  "licorice-18": { "value": "rgba(17, 17, 13, 0.18)", "type": "color" },
  "licorice-32": { "value": "rgba(17, 17, 13, 0.32)", "type": "color" },
  "licorice-47": { "value": "rgba(17, 17, 13, 0.47)", "type": "color" },
  "licorice-79": { "value": "rgba(17, 17, 13, 0.79)", "type": "color" }
}

{
  "coconut-5":  { "value": "rgba(255, 255, 255, 0.05)", "type": "color" },
  "coconut-13": { "value": "rgba(255, 255, 255, 0.13)", "type": "color" },
  "coconut-32": { "value": "rgba(255, 255, 255, 0.32)", "type": "color" },
  "coconut-47": { "value": "rgba(255, 255, 255, 0.47)", "type": "color" },
  "coconut-79": { "value": "rgba(255, 255, 255, 0.79)", "type": "color" }
}

{
  "zendesk-sans": {
    "value": "Zendesk Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    "type": "fontFamily"
  },
  "zendesk-mono": {
    "value": "Zendesk Mono, ui-monospace, 'SF Mono', Menlo, monospace",
    "type": "fontFamily"
  }
}

{
  "h1":              { "fontSize": "42px", "fontWeight": 500, "lineHeight": "44.1px",  "type": "typography" },
  "h2":              { "fontSize": "30px", "fontWeight": 500, "lineHeight": "34.5px",  "type": "typography" },
  "h3":              { "fontSize": "21px", "fontWeight": 500, "lineHeight": "26.25px", "type": "typography" },
  "h4":              { "fontSize": "15px", "fontWeight": 600, "lineHeight": "21.75px", "type": "typography" },
  "paragraph-large": { "fontSize": "21px", "fontWeight": 400, "lineHeight": "26.25px", "type": "typography" },
  "paragraph":       { "fontSize": "15px", "fontWeight": 400, "lineHeight": "21.75px", "type": "typography" },
  "supertitle":      { "fontSize": "12px", "fontWeight": 700, "lineHeight": "14.3px",  "letterSpacing": "0.75px", "type": "typography" },
  "caption":         { "fontSize": "13px", "fontWeight": 400, "lineHeight": "18.2px",  "type": "typography" }
}

{
  "spacer-8":   { "value": "8px",   "type": "spacing" },
  "spacer-12":  { "value": "12px",  "type": "spacing" },
  "spacer-16":  { "value": "16px",  "type": "spacing" },
  "spacer-24":  { "value": "24px",  "type": "spacing" },
  "spacer-40":  { "value": "40px",  "type": "spacing" },
  "spacer-56":  { "value": "56px",  "type": "spacing" },
  "spacer-72":  { "value": "72px",  "type": "spacing" },
  "spacer-96":  { "value": "96px",  "type": "spacing" },
  "spacer-128": { "value": "128px", "type": "spacing" }
}

{
  "text-to-content":    { "xs": "16px", "s": "16px", "m": "24px", "l": "24px", "xl": "24px" },
  "content-to-content": { "xs": "24px", "s": "24px", "m": "40px", "l": "40px", "xl": "40px" },
  "button-margin":      { "xs": "12px", "s": "12px", "m": "16px", "l": "16px", "xl": "16px" },
  "section-padding":    { "xs": "40px", "s": "56px", "m": "72px", "l": "72px", "xl": "96px" }
}

{
  "xs": { "min": "320px",  "max": "480px",  "description": "Mobile (base styles)" },
  "s":  { "min": "481px",  "max": "767px",  "media": "(min-width: 481px)",  "description": "Mobile Large" },
  "m":  { "min": "768px",  "max": "1119px", "media": "(min-width: 768px)",  "description": "Tablet" },
  "l":  { "min": "1120px", "max": "1599px", "media": "(min-width: 1120px)", "description": "Desktop" },
  "xl": { "min": "1600px", "max": null,     "media": "(min-width: 1600px)", "description": "Large Desktop" }
}

{
  "ss1": { "value": "0px 2px 4px rgba(0, 0, 0, 0.08)",   "type": "boxShadow" },
  "ss2": { "value": "0px 4px 12px rgba(0, 0, 0, 0.05)",  "type": "boxShadow" },
  "s1":  { "value": "0px 8px 24px rgba(0, 0, 0, 0.08)",  "type": "boxShadow" },
  "s2":  { "value": "0px 16px 28px rgba(0, 0, 0, 0.08)", "type": "boxShadow" },
  "s3":  { "value": "0px 24px 36px rgba(0, 0, 0, 0.16)", "type": "boxShadow" },
  "s4":  { "value": "0px 10px 50px 20px rgba(0, 0, 0, 0.30)", "type": "boxShadow" }
}

{
  "radius-sm":   { "value": "4px",    "type": "borderRadius" },
  "radius-md":   { "value": "8px",    "type": "borderRadius" },
  "radius-lg":   { "value": "16px",   "type": "borderRadius" },
  "radius-xl":   { "value": "28px",   "type": "borderRadius" },
  "radius-full": { "value": "9999px", "type": "borderRadius" }
}

{
  "columns": 12,
  "gutter": {
    "xs": "16px", "s": "16px", "m": "24px", "l": "24px", "xl": "24px"
  },
  "margin": {
    "xs": "16px", "s": "24px", "m": "40px", "l": "80px", "xl": "120px"
  },
  "maxWidth": "1440px"
}

{
  "manifesto": "The customer is always human",
  "description": "When things go sideways, you want service you can count on. You reach out for help, and the support you receive feels just right. Zendesk is behind it all — ensuring you get exactly what you need when you need it. We're committed to every interaction ending in resolution, no matter what comes your way."
}

{
  "approachable": {
    "name": "Approachable",
    "description": "Great technology should feel intuitive. We present our brand in a way that's welcoming, clear, and easy to understand — no jargon, no barriers."
  },
  "modern": {
    "name": "Modern",
    "description": "Innovation is in our DNA. Through bold, forward-thinking expressions, we communicate that we're not just keeping up with the future — we're building it."
  },
  "trusted": {
    "name": "Trusted",
    "description": "We're advocates for consistency and quality. Every touchpoint reinforces reliability."
  },
  "connected": {
    "name": "Connected",
    "description": "Our brand speaks to the needs of our customers and reflects the culture of the moment."
  },
  "fresh": {
    "name": "Fresh",
    "description": "Our visual and verbal identity mirrors the elegance of our solutions."
  }
}

{
  "overview": "Our design system guides customers from challenge to resolution through clean, intentional choices.",
  "principles": {
    "logo":               "The Zendesk logo animation opens up to show the movement toward resolution.",
    "gradients":          "Soft edges create depth with sophistication.",
    "symbols":            "Simple, universal symbols distill complex ideas into the essentials.",
    "roundedCorners":     "Rounded corners add a sense of approachability.",
    "gradientBackgrounds":"Gradient backgrounds imply movement toward resolution."
  }
}

{
  "matcha": {
    "usage": "Primary CTA only",
    "limit": "1–2 per page",
    "rule": "RESERVED for primary call-to-action buttons. Never use for backgrounds, body text, or decorative elements.",
    "examples": ["Start your free trial", "Get started", "Sign up now"]
  },
  "backgrounds": {
    "primary":   "Coconut (#FFFFFF) for cards and light surfaces",
    "secondary": "Sesame (#F5F5F2) for subtle backgrounds",
    "dark":      "Licorice (#11110D) for dark mode and hero sections"
  },
  "text": {
    "primary":   "Licorice (#11110D) on light backgrounds",
    "secondary": "Neutrals (licorice-79, licorice-47) for less emphasis",
    "onDark":    "Coconut (#FFFFFF) on dark backgrounds"
  }
}

{
  "primary": {
    "style": "Matcha background, Licorice text",
    "usage": "Main CTA only",
    "limit": "1–2 per page",
    "states": {
      "default":  "background: #D1F470, color: #11110D",
      "hover":    "background: #B2DA56",
      "active":   "background: #92BF3B",
      "disabled": "opacity: 0.5, cursor: not-allowed"
    }
  },
  "secondary": {
    "style": "Transparent background, Licorice border and text",
    "usage": "Secondary CTAs like 'Learn more', 'View demo'",
    "states": {
      "default":  "background: transparent, border: 1.5px solid #11110D",
      "hover":    "background: #11110D, color: #FFFFFF",
      "disabled": "opacity: 0.5, cursor: not-allowed"
    }
  }
}

{
  "h1": { "usage": "The biggest idea of the page", "frequency": "1 per page" },
  "h2": { "usage": "Major section headings",       "frequency": "Multiple per page" },
  "h3": { "usage": "Subsection headings",          "frequency": "As needed" },
  "h4": { "usage": "Small headings, card titles",  "frequency": "As needed" },
  "paragraphLarge": { "usage": "Lead paragraphs, hero subtitles" },
  "paragraph":      { "usage": "Standard body copy" }
}

<button class="btn btn--primary">
  Start your free trial
</button>

<style>
.btn--primary {
  background: #D1F470;
  color: #11110D;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1.5px solid #D1F470;
  font-family: 'Zendesk Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn--primary:hover  { background: #B2DA56; border-color: #B2DA56; }
.btn--primary:active { background: #92BF3B; border-color: #92BF3B; }
</style>

<button class="btn btn--secondary">
  Learn more
</button>

<style>
.btn--secondary {
  background: transparent;
  color: #11110D;
  padding: 14px 28px;
  border-radius: 8px;
  border: 1.5px solid #11110D;
  font-family: 'Zendesk Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn--secondary:hover {
  background: #11110D;
  color: #FFFFFF;
}
</style>

<div class="form-field">
  <label class="form-label" for="email">Email address</label>
  <input class="form-input" type="email" id="email" placeholder="you@company.com" />
</div>

<style>
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 13px; font-weight: 500; color: #11110D; }
.form-input {
  font-family: 'Zendesk Sans', sans-serif;
  font-size: 15px;
  padding: 12px 16px;
  border: 1.5px solid rgba(17, 17, 13, 0.18);
  border-radius: 8px;
  background: #FFFFFF;
  color: #11110D;
  transition: border-color 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #11110D;
}
</style>

<div class="card">
  <div class="card__icon"></div>
  <h3 class="card__title">Design tokens</h3>
  <p class="card__body">Consistent colors, spacing, and typography variables.</p>
</div>

<style>
.card {
  background: #FFFFFF;
  border: 1px solid rgba(17, 17, 13, 0.11);
  border-radius: 16px;
  padding: 40px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.card:hover {
  border-color: rgba(17, 17, 13, 0.32);
  transform: translateY(-2px);
}
.card__icon {
  width: 48px;
  height: 48px;
  background: #D1F470;
  border-radius: 8px;
  margin-bottom: 24px;
}
.card__title { font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.card__body  { font-size: 14px; color: rgba(17, 17, 13, 0.79); line-height: 1.55; }
</style>

<section class="hero">
  <div class="hero__inner">
    <div>
      <p class="hero__supertitle">ZENDESK BRAND SYSTEM</p>
      <h1 class="hero__title">Brand style guide</h1>
      <p class="hero__subtitle">
        Zendesk's AI-friendly digital design library.
      </p>
      <button class="btn btn--primary">Get started</button>
    </div>
    <div class="hero__art"><!-- visual --></div>
  </div>
</section>

<style>
.hero {
  background: #F5F5F2;
  padding: 96px 0 128px;
}
.hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 72px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.hero__title {
  font-size: clamp(64px, 9vw, 120px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; padding: 0 24px; }
}
</style>

<section class="features">
  <h2>Features</h2>
  <div class="features__grid">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
  </div>
</section>

<style>
.features { padding: 96px 56px; max-width: 1080px; margin: 0 auto; }
.features h2 {
  font-family: 'Zendesk Sans', sans-serif;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 72px;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .features__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .features__grid { grid-template-columns: 1fr; } }
</style>

{
  "standard": "WCAG 2.1 Level AA",
  "requirements": {
    "normalText":        { "minimum": "4.5:1", "description": "Text under 18px or 14px bold" },
    "largeText":         { "minimum": "3:1",   "description": "Text 18px+ or 14px+ bold" },
    "uiComponents":      { "minimum": "3:1",   "description": "Borders, icons, focus indicators" }
  },
  "validatedPairs": {
    "licorice-on-coconut": { "ratio": "19.4:1", "passes": ["AA", "AAA"] },
    "coconut-on-licorice": { "ratio": "19.4:1", "passes": ["AA", "AAA"] },
    "licorice-on-matcha":  { "ratio": "13.8:1", "passes": ["AA", "AAA"] }
  }
}

{
  "rules": [
    "All interactive elements must be reachable via Tab",
    "Focus indicators must be visible (matcha 3px outline, 2px offset)",
    "Logical tab order matches visual order",
    "Skip links provided for main content",
    "Modals trap focus and restore on close",
    "Esc closes modals and overlays"
  ]
}