Coastal Calm

Export tokens

:root {
  --text: #1B6CA8;
  --primary: #5BA4CF;
  --secondary: #A9D6E5;
  --surface: #F1E3D3;
  --accent: #E0C097;
}

$coastal-calm-text: #1B6CA8;
$coastal-calm-primary: #5BA4CF;
$coastal-calm-secondary: #A9D6E5;
$coastal-calm-surface: #F1E3D3;
$coastal-calm-accent: #E0C097;

// tailwind.config.js — theme.extend.colors
colors: {
  'coastal-calm': {
    'text': '#1B6CA8',
    'primary': '#5BA4CF',
    'secondary': '#A9D6E5',
    'surface': '#F1E3D3',
    'accent': '#E0C097',
  },
}

{
    "coastal-calm": {
        "text": {
            "value": "#1B6CA8",
            "type": "color"
        },
        "primary": {
            "value": "#5BA4CF",
            "type": "color"
        },
        "secondary": {
            "value": "#A9D6E5",
            "type": "color"
        },
        "surface": {
            "value": "#F1E3D3",
            "type": "color"
        },
        "accent": {
            "value": "#E0C097",
            "type": "color"
        }
    }
}

{
    "text": "#1B6CA8",
    "primary": "#5BA4CF",
    "secondary": "#A9D6E5",
    "surface": "#F1E3D3",
    "accent": "#E0C097"
}

/* Paste into Canva → Brand Kit → Brand Colors */
#1B6CA8
#5BA4CF
#A9D6E5
#F1E3D3
#E0C097

How the roles work