Appearance
Mode Tokens
Why?
Light and dark colour modes.
Light and dark colour modes are a concept fundamental to most design system token systems.
It is often seen in semantic token dictionaries somewhere near the root; semantics.color.<mode>.[...].
The approach that many of us will be familiar with using to handle modes is the foundation of the approaches used throughout this token system.
Example
json
{
"$type": "color",
"color": {
"foreground": {
"default": {
"$value": {
"hex": "#1f2937",
"colorSpace": "srgb",
"components": [
0.12156862745098039, 0.1607843137254902, 0.21568627450980393
],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#6b7280",
"colorSpace": "srgb",
"components": [
0.4196078431372549, 0.4470588235294118, 0.5019607843137255
],
"alpha": 1
}
}
},
"background": {
"panel": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"border": {
"default": {
"$value": {
"hex": "#d7dce5",
"colorSpace": "srgb",
"components": [
0.8431372549019608, 0.8627450980392157, 0.8980392156862745
],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#d7dce5",
"colorSpace": "srgb",
"components": [
0.8431372549019608, 0.8627450980392157, 0.8980392156862745
],
"alpha": 1
}
}
},
"sentiment": {
"primary": {
"foreground": {
"default": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#1d4ed8",
"colorSpace": "srgb",
"components": [
0.11372549019607843, 0.3058823529411765, 0.8470588235294118
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#1e40af",
"colorSpace": "srgb",
"components": [
0.11764705882352941, 0.25098039215686274, 0.6862745098039216
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#1e3a8a",
"colorSpace": "srgb",
"components": [
0.11764705882352941, 0.22745098039215686, 0.5411764705882353
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#dbeafe",
"colorSpace": "srgb",
"components": [
0.8588235294117647, 0.9176470588235294, 0.996078431372549
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#bfdbfe",
"colorSpace": "srgb",
"components": [
0.7490196078431373, 0.8588235294117647, 0.996078431372549
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#93c5fd",
"colorSpace": "srgb",
"components": [
0.5764705882352941, 0.7725490196078432, 0.9921568627450981
],
"alpha": 1
}
}
}
},
"positive": {
"foreground": {
"default": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#15803d",
"colorSpace": "srgb",
"components": [
0.08235294117647059, 0.5019607843137255, 0.23921568627450981
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#166534",
"colorSpace": "srgb",
"components": [
0.08627450980392157, 0.396078431372549, 0.20392156862745098
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#14532d",
"colorSpace": "srgb",
"components": [
0.0784313725490196, 0.3254901960784314, 0.17647058823529413
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#dcfce7",
"colorSpace": "srgb",
"components": [
0.8627450980392157, 0.9882352941176471, 0.9058823529411765
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#bbf7d0",
"colorSpace": "srgb",
"components": [
0.7333333333333333, 0.9686274509803922, 0.8156862745098039
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#86efac",
"colorSpace": "srgb",
"components": [
0.5254901960784314, 0.9372549019607843, 0.6745098039215687
],
"alpha": 1
}
}
}
},
"warning": {
"foreground": {
"default": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#d97706",
"colorSpace": "srgb",
"components": [
0.8509803921568627, 0.4666666666666667, 0.023529411764705882
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#b45309",
"colorSpace": "srgb",
"components": [
0.7058823529411765, 0.3254901960784314, 0.03529411764705882
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#92400e",
"colorSpace": "srgb",
"components": [
0.5725490196078431, 0.25098039215686274, 0.054901960784313725
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#fef3c7",
"colorSpace": "srgb",
"components": [
0.996078431372549, 0.9529411764705882, 0.7803921568627451
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#fde68a",
"colorSpace": "srgb",
"components": [
0.9921568627450981, 0.9019607843137255, 0.5411764705882353
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#fcd34d",
"colorSpace": "srgb",
"components": [
0.9882352941176471, 0.8274509803921568, 0.30196078431372547
],
"alpha": 1
}
}
}
},
"negative": {
"foreground": {
"default": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#dc2626",
"colorSpace": "srgb",
"components": [
0.8627450980392157, 0.14901960784313725, 0.14901960784313725
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#b91c1c",
"colorSpace": "srgb",
"components": [
0.7254901960784313, 0.10980392156862745, 0.10980392156862745
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#991b1b",
"colorSpace": "srgb",
"components": [0.6, 0.10588235294117647, 0.10588235294117647],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#fee2e2",
"colorSpace": "srgb",
"components": [
0.996078431372549, 0.8862745098039215, 0.8862745098039215
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#fecaca",
"colorSpace": "srgb",
"components": [
0.996078431372549, 0.792156862745098, 0.792156862745098
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#fca5a5",
"colorSpace": "srgb",
"components": [
0.9882352941176471, 0.6470588235294118, 0.6470588235294118
],
"alpha": 1
}
}
}
}
}
}
}json
{
"$type": "color",
"color": {
"foreground": {
"default": {
"$value": {
"hex": "#f9fafb",
"colorSpace": "srgb",
"components": [
0.9764705882352941, 0.9803921568627451, 0.984313725490196
],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#d1d5db",
"colorSpace": "srgb",
"components": [
0.8196078431372549, 0.8352941176470589, 0.8588235294117647
],
"alpha": 1
}
}
},
"background": {
"panel": {
"$value": {
"hex": "#111827",
"colorSpace": "srgb",
"components": [
0.06666666666666667, 0.09411764705882353, 0.15294117647058825
],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#111827",
"colorSpace": "srgb",
"components": [
0.06666666666666667, 0.09411764705882353, 0.15294117647058825
],
"alpha": 1
}
}
},
"border": {
"default": {
"$value": {
"hex": "#374151",
"colorSpace": "srgb",
"components": [
0.21568627450980393, 0.2549019607843137, 0.3176470588235294
],
"alpha": 1
}
},
"disabled": {
"$value": {
"hex": "#d1d5db",
"colorSpace": "srgb",
"components": [
0.8196078431372549, 0.8352941176470589, 0.8588235294117647
],
"alpha": 1
}
}
},
"sentiment": {
"primary": {
"foreground": {
"default": {
"$value": {
"hex": "#08111f",
"colorSpace": "srgb",
"components": [
0.03137254901960784, 0.06666666666666667, 0.12156862745098039
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#f8fafc",
"colorSpace": "srgb",
"components": [
0.9725490196078431, 0.9803921568627451, 0.9882352941176471
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#3b82f6",
"colorSpace": "srgb",
"components": [
0.23137254901960785, 0.5098039215686274, 0.9647058823529412
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#2563eb",
"colorSpace": "srgb",
"components": [
0.1450980392156863, 0.38823529411764707, 0.9215686274509803
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#1d4ed8",
"colorSpace": "srgb",
"components": [
0.11372549019607843, 0.3058823529411765, 0.8470588235294118
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#172554",
"colorSpace": "srgb",
"components": [
0.09019607843137255, 0.1450980392156863, 0.32941176470588235
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#1e3a8a",
"colorSpace": "srgb",
"components": [
0.11764705882352941, 0.22745098039215686, 0.5411764705882353
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#1d4ed8",
"colorSpace": "srgb",
"components": [
0.11372549019607843, 0.3058823529411765, 0.8470588235294118
],
"alpha": 1
}
}
}
},
"positive": {
"foreground": {
"default": {
"$value": {
"hex": "#052e16",
"colorSpace": "srgb",
"components": [
0.0196078431372549, 0.1803921568627451, 0.08627450980392157
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#f0fdf4",
"colorSpace": "srgb",
"components": [
0.9411764705882353, 0.9921568627450981, 0.9568627450980393
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#22c55e",
"colorSpace": "srgb",
"components": [
0.13333333333333333, 0.7725490196078432, 0.3686274509803922
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#16a34a",
"colorSpace": "srgb",
"components": [
0.08627450980392157, 0.6392156862745098, 0.2901960784313726
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#15803d",
"colorSpace": "srgb",
"components": [
0.08235294117647059, 0.5019607843137255, 0.23921568627450981
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#052e16",
"colorSpace": "srgb",
"components": [
0.0196078431372549, 0.1803921568627451, 0.08627450980392157
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#14532d",
"colorSpace": "srgb",
"components": [
0.0784313725490196, 0.3254901960784314, 0.17647058823529413
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#166534",
"colorSpace": "srgb",
"components": [
0.08627450980392157, 0.396078431372549, 0.20392156862745098
],
"alpha": 1
}
}
}
},
"warning": {
"foreground": {
"default": {
"$value": {
"hex": "#1c1917",
"colorSpace": "srgb",
"components": [
0.10980392156862745, 0.09803921568627451, 0.09019607843137255
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#fffbeb",
"colorSpace": "srgb",
"components": [1, 0.984313725490196, 0.9215686274509803],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#f59e0b",
"colorSpace": "srgb",
"components": [
0.9607843137254902, 0.6196078431372549, 0.043137254901960784
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#d97706",
"colorSpace": "srgb",
"components": [
0.8509803921568627, 0.4666666666666667, 0.023529411764705882
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#b45309",
"colorSpace": "srgb",
"components": [
0.7058823529411765, 0.3254901960784314, 0.03529411764705882
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#451a03",
"colorSpace": "srgb",
"components": [
0.27058823529411763, 0.10196078431372549, 0.011764705882352941
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#78350f",
"colorSpace": "srgb",
"components": [
0.47058823529411764, 0.20784313725490197, 0.058823529411764705
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#92400e",
"colorSpace": "srgb",
"components": [
0.5725490196078431, 0.25098039215686274, 0.054901960784313725
],
"alpha": 1
}
}
}
},
"negative": {
"foreground": {
"default": {
"$value": {
"hex": "#1f0a0a",
"colorSpace": "srgb",
"components": [
0.12156862745098039, 0.0392156862745098, 0.0392156862745098
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#fef2f2",
"colorSpace": "srgb",
"components": [
0.996078431372549, 0.9490196078431372, 0.9490196078431372
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#ffffff",
"colorSpace": "srgb",
"components": [1, 1, 1],
"alpha": 1
}
}
},
"base": {
"default": {
"$value": {
"hex": "#ef4444",
"colorSpace": "srgb",
"components": [
0.9372549019607843, 0.26666666666666666, 0.26666666666666666
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#dc2626",
"colorSpace": "srgb",
"components": [
0.8627450980392157, 0.14901960784313725, 0.14901960784313725
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#b91c1c",
"colorSpace": "srgb",
"components": [
0.7254901960784313, 0.10980392156862745, 0.10980392156862745
],
"alpha": 1
}
}
},
"background": {
"default": {
"$value": {
"hex": "#450a0a",
"colorSpace": "srgb",
"components": [
0.27058823529411763, 0.0392156862745098, 0.0392156862745098
],
"alpha": 1
}
},
"hover": {
"$value": {
"hex": "#7f1d1d",
"colorSpace": "srgb",
"components": [
0.4980392156862745, 0.11372549019607843, 0.11372549019607843
],
"alpha": 1
}
},
"active": {
"$value": {
"hex": "#991b1b",
"colorSpace": "srgb",
"components": [0.6, 0.10588235294117647, 0.10588235294117647],
"alpha": 1
}
}
}
}
}
}
}Figma Output
Mode
Name
Light
Dark
Color
Foreground
Default
#1f2937#f9fafb Disabled
#6b7280#d1d5dbColor
Background
Panel
#ffffff#111827 Disabled
#ffffff#111827Color
Border
Default
#d7dce5#374151 Disabled
#d7dce5#d1d5dbColor
Sentiment
Primary
Foreground
Default
#ffffff#08111f Hover
#ffffff#f8fafc Active
#ffffff#ffffffColor
Sentiment
Primary
Base
Default
#1d4ed8#3b82f6 Hover
#1e40af#2563eb Active
#1e3a8a#1d4ed8Color
Sentiment
Primary
Background
Default
#dbeafe#172554 Hover
#bfdbfe#1e3a8a Active
#93c5fd#1d4ed8Color
Sentiment
Positive
Foreground
Default
#ffffff#052e16 Hover
#ffffff#f0fdf4 Active
#ffffff#ffffffColor
Sentiment
Positive
Base
Default
#15803d#22c55e Hover
#166534#16a34a Active
#14532d#15803dColor
Sentiment
Positive
Background
Default
#dcfce7#052e16 Hover
#bbf7d0#14532d Active
#86efac#166534Color
Sentiment
Warning
Foreground
Default
#ffffff#1c1917 Hover
#ffffff#fffbeb Active
#ffffff#ffffffColor
Sentiment
Warning
Base
Default
#d97706#f59e0b Hover
#b45309#d97706 Active
#92400e#b45309Color
Sentiment
Warning
Background
Default
#fef3c7#451a03 Hover
#fde68a#78350f Active
#fcd34d#92400eColor
Sentiment
Negative
Foreground
Default
#ffffff#1f0a0a Hover
#ffffff#fef2f2 Active
#ffffff#ffffffColor
Sentiment
Negative
Base
Default
#dc2626#ef4444 Hover
#b91c1c#dc2626 Active
#991b1b#b91c1cColor
Sentiment
Negative
Background
Default
#fee2e2#450a0a Hover
#fecaca#7f1d1d Active
#fca5a5#991b1bSCSS Output
scss
/* -------------------------------------------
* Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
* ------------------------------------------- */
@mixin light {
--color-background-disabled: #fff;
--color-background-panel: #fff;
--color-border-default: #d7dce5;
--color-border-disabled: #d7dce5;
--color-foreground-default: #1f2937;
--color-foreground-disabled: #6b7280;
--color-sentiment-negative-background-active: #fca5a5;
--color-sentiment-negative-background-default: #fee2e2;
--color-sentiment-negative-background-hover: #fecaca;
--color-sentiment-negative-base-active: #991b1b;
--color-sentiment-negative-base-default: #dc2626;
--color-sentiment-negative-base-hover: #b91c1c;
--color-sentiment-negative-foreground-active: #fff;
--color-sentiment-negative-foreground-default: #fff;
--color-sentiment-negative-foreground-hover: #fff;
--color-sentiment-positive-background-active: #86efac;
--color-sentiment-positive-background-default: #dcfce7;
--color-sentiment-positive-background-hover: #bbf7d0;
--color-sentiment-positive-base-active: #14532d;
--color-sentiment-positive-base-default: #15803d;
--color-sentiment-positive-base-hover: #166534;
--color-sentiment-positive-foreground-active: #fff;
--color-sentiment-positive-foreground-default: #fff;
--color-sentiment-positive-foreground-hover: #fff;
--color-sentiment-primary-background-active: #93c5fd;
--color-sentiment-primary-background-default: #dbeafe;
--color-sentiment-primary-background-hover: #bfdbfe;
--color-sentiment-primary-base-active: #1e3a8a;
--color-sentiment-primary-base-default: #1d4ed8;
--color-sentiment-primary-base-hover: #1e40af;
--color-sentiment-primary-foreground-active: #fff;
--color-sentiment-primary-foreground-default: #fff;
--color-sentiment-primary-foreground-hover: #fff;
--color-sentiment-warning-background-active: #fcd34d;
--color-sentiment-warning-background-default: #fef3c7;
--color-sentiment-warning-background-hover: #fde68a;
--color-sentiment-warning-base-active: #92400e;
--color-sentiment-warning-base-default: #d97706;
--color-sentiment-warning-base-hover: #b45309;
--color-sentiment-warning-foreground-active: #fff;
--color-sentiment-warning-foreground-default: #fff;
--color-sentiment-warning-foreground-hover: #fff;
}
@mixin dark {
--color-background-disabled: #111827;
--color-background-panel: #111827;
--color-border-default: #374151;
--color-border-disabled: #d1d5db;
--color-foreground-default: #f9fafb;
--color-foreground-disabled: #d1d5db;
--color-sentiment-negative-background-active: #991b1b;
--color-sentiment-negative-background-default: #450a0a;
--color-sentiment-negative-background-hover: #7f1d1d;
--color-sentiment-negative-base-active: #b91c1c;
--color-sentiment-negative-base-default: #ef4444;
--color-sentiment-negative-base-hover: #dc2626;
--color-sentiment-negative-foreground-active: #fff;
--color-sentiment-negative-foreground-default: #1f0a0a;
--color-sentiment-negative-foreground-hover: #fef2f2;
--color-sentiment-positive-background-active: #166534;
--color-sentiment-positive-background-default: #052e16;
--color-sentiment-positive-background-hover: #14532d;
--color-sentiment-positive-base-active: #15803d;
--color-sentiment-positive-base-default: #22c55e;
--color-sentiment-positive-base-hover: #16a34a;
--color-sentiment-positive-foreground-active: #fff;
--color-sentiment-positive-foreground-default: #052e16;
--color-sentiment-positive-foreground-hover: #f0fdf4;
--color-sentiment-primary-background-active: #1d4ed8;
--color-sentiment-primary-background-default: #172554;
--color-sentiment-primary-background-hover: #1e3a8a;
--color-sentiment-primary-base-active: #1d4ed8;
--color-sentiment-primary-base-default: #3b82f6;
--color-sentiment-primary-base-hover: #2563eb;
--color-sentiment-primary-foreground-active: #fff;
--color-sentiment-primary-foreground-default: #08111f;
--color-sentiment-primary-foreground-hover: #f8fafc;
--color-sentiment-warning-background-active: #92400e;
--color-sentiment-warning-background-default: #451a03;
--color-sentiment-warning-background-hover: #78350f;
--color-sentiment-warning-base-active: #b45309;
--color-sentiment-warning-base-default: #f59e0b;
--color-sentiment-warning-base-hover: #d97706;
--color-sentiment-warning-foreground-active: #fff;
--color-sentiment-warning-foreground-default: #1c1917;
--color-sentiment-warning-foreground-hover: #fffbeb;
}