Mocha Mousse

Export tokens

:root {
  --text: #3F2D23;
  --accent: #6F4E37;
  --primary: #A47864;
  --secondary: #C8A491;
  --surface: #E8D9CC;
}

$mocha-mousse-text: #3F2D23;
$mocha-mousse-accent: #6F4E37;
$mocha-mousse-primary: #A47864;
$mocha-mousse-secondary: #C8A491;
$mocha-mousse-surface: #E8D9CC;

// tailwind.config.js — theme.extend.colors
colors: {
  'mocha-mousse': {
    'text': '#3F2D23',
    'accent': '#6F4E37',
    'primary': '#A47864',
    'secondary': '#C8A491',
    'surface': '#E8D9CC',
  },
}

{
    "mocha-mousse": {
        "text": {
            "value": "#3F2D23",
            "type": "color"
        },
        "accent": {
            "value": "#6F4E37",
            "type": "color"
        },
        "primary": {
            "value": "#A47864",
            "type": "color"
        },
        "secondary": {
            "value": "#C8A491",
            "type": "color"
        },
        "surface": {
            "value": "#E8D9CC",
            "type": "color"
        }
    }
}

{
    "text": "#3F2D23",
    "accent": "#6F4E37",
    "primary": "#A47864",
    "secondary": "#C8A491",
    "surface": "#E8D9CC"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#3F2D23
#6F4E37
#A47864
#C8A491
#E8D9CC

How the roles work