Matcha Latte

Export tokens

:root {
  --surface: #FEFAE0;
  --accent: #DDE5B6;
  --primary: #ADC178;
  --secondary: #A98467;
  --text: #6C584C;
}

$matcha-latte-surface: #FEFAE0;
$matcha-latte-accent: #DDE5B6;
$matcha-latte-primary: #ADC178;
$matcha-latte-secondary: #A98467;
$matcha-latte-text: #6C584C;

// tailwind.config.js — theme.extend.colors
colors: {
  'matcha-latte': {
    'surface': '#FEFAE0',
    'accent': '#DDE5B6',
    'primary': '#ADC178',
    'secondary': '#A98467',
    'text': '#6C584C',
  },
}

{
    "matcha-latte": {
        "surface": {
            "value": "#FEFAE0",
            "type": "color"
        },
        "accent": {
            "value": "#DDE5B6",
            "type": "color"
        },
        "primary": {
            "value": "#ADC178",
            "type": "color"
        },
        "secondary": {
            "value": "#A98467",
            "type": "color"
        },
        "text": {
            "value": "#6C584C",
            "type": "color"
        }
    }
}

{
    "surface": "#FEFAE0",
    "accent": "#DDE5B6",
    "primary": "#ADC178",
    "secondary": "#A98467",
    "text": "#6C584C"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#FEFAE0
#DDE5B6
#ADC178
#A98467
#6C584C

How the roles work