Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
Set phasers on stun
USS Shenandoah - Taken by Dax and Worf to rescue a Cardassian informant from the Dominion.
Normal
Button
Button
Button
Hover
Button
Button
Button
Pressed
Button
Button
Button
Focused
Button
Button
Button
Beep Beep! I am an error !
close
Mission complete.
close
Warning: Borg ship Incoming!
close
All hands on deck! Captain on bridge.
close
How to use Figma tokens JSON
Figma tokens json
{ "saturated-sunset-cs-light": { "Accent Colors": { "primary": { "value": "#a53006", "type": "color" }, "secondary": { "value": "#ef8435", "type": "color" }, "tertiary": { "value": "#ffc136", "type": "color" } }, "Background Colors": { "base": { "value": "#faebd7", "type": "color" }, "code": { "value": "#eaeaea", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#e3bc81", "type": "color" }, "step-2": { "value": "#faad7b", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "disabled": { "value": "#faeceb", "type": "color" }, "focused": { "value": "#d97973", "type": "color" }, "hover": { "value": "#f1bdb6", "type": "color" }, "pressed": { "value": "#d46a63", "type": "color" }, "text": { "value": "#fffbfe", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#a53006", "type": "color" }, "border": { "value": "#a53006", "type": "color" }, "disabled": { "value": "#faad7b", "type": "color" }, "focused": { "value": "#611c03", "type": "color" }, "hover": { "value": "#8c2702", "type": "color" }, "pressed": { "value": "#611c03", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#ef8435", "type": "color" }, "border": { "value": "#f3a063", "type": "color" }, "disabled": { "value": "#fad9c0", "type": "color" }, "focused": { "value": "#b36328", "type": "color" }, "hover": { "value": "#d77730", "type": "color" }, "pressed": { "value": "#bf6a2a", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#ebe8e5", "type": "color" }, "border": { "value": "#b0aeac", "type": "color" }, "disabled": { "value": "#f9f8f7", "type": "color" }, "focused": { "value": "#b0aeac", "type": "color" }, "hover": { "value": "#d4d1ce", "type": "color" }, "pressed": { "value": "#bcbab7", "type": "color" }, "text": { "value": "#333333", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "text": { "value": "#d84836", "type": "color" } }, "Info Colors": { "base": { "value": "#dae7fb", "type": "color" }, "border": { "value": "#dae7fb", "type": "color" }, "text": { "value": "#dae7fb", "type": "color" } }, "Standalone Colors": { "border": { "value": "#222222", "type": "color" }, "border-strong": { "value": "#d9d9d9", "type": "color" }, "scrim": { "value": "#393939", "type": "color" }, "shadow": { "value": "#6f0100", "type": "color" }, "text": { "value": "#707070", "type": "color" }, "text-strong": { "value": "#333333", "type": "color" } }, "Success Colors": { "base": { "value": "#dcefe4", "type": "color" }, "border": { "value": "#95d0af", "type": "color" }, "text": { "value": "#3e8d61", "type": "color" } }, "Warning Colors": { "base": { "value": "#fdf7f1", "type": "color" }, "border": { "value": "#f2c097", "type": "color" }, "text": { "value": "#e78b3e", "type": "color" } } }, "saturated-sunset-cs-dark": { "Accent Colors": { "primary": { "value": "#a53006", "type": "color" }, "secondary": { "value": "#ef8435", "type": "color" }, "tertiary": { "value": "#ffc136", "type": "color" } }, "Background Colors": { "base": { "value": "#240002", "type": "color" }, "code": { "value": "#2b303b", "type": "color" }, "overlay": { "value": "rgba(0, 0, 0, 0.8)", "type": "color" }, "step-1": { "value": "#550605", "type": "color" }, "step-2": { "value": "#3e0e11", "type": "color" } }, "CTA Danger Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "disabled": { "value": "#faeceb", "type": "color" }, "focused": { "value": "#d97973", "type": "color" }, "hover": { "value": "#f1bdb6", "type": "color" }, "pressed": { "value": "#d46a63", "type": "color" }, "text": { "value": "#1c1b1f", "type": "color" } }, "CTA Primary Colors": { "base": { "value": "#a53006", "type": "color" }, "border": { "value": "#a53006", "type": "color" }, "disabled": { "value": "#faad7b", "type": "color" }, "focused": { "value": "#611c03", "type": "color" }, "hover": { "value": "#8c2702", "type": "color" }, "pressed": { "value": "#611c03", "type": "color" }, "text": { "value": "#feffff", "type": "color" } }, "CTA Secondary Colors": { "base": { "value": "#ef8435", "type": "color" }, "border": { "value": "#f3a063", "type": "color" }, "disabled": { "value": "#fad9c0", "type": "color" }, "focused": { "value": "#b36328", "type": "color" }, "hover": { "value": "#d77730", "type": "color" }, "pressed": { "value": "#bf6a2a", "type": "color" }, "text": { "value": "#ffffff", "type": "color" } }, "CTA Tertiary Colors": { "base": { "value": "#ebe8e5", "type": "color" }, "border": { "value": "#b0aeac", "type": "color" }, "disabled": { "value": "#f9f8f7", "type": "color" }, "focused": { "value": "#b0aeac", "type": "color" }, "hover": { "value": "#d4d1ce", "type": "color" }, "pressed": { "value": "#bcbab7", "type": "color" }, "text": { "value": "#333333", "type": "color" } }, "Custom Colors": { "eight": { "value": "#d554b3", "type": "color" }, "five": { "value": "#eb57be", "type": "color" }, "four": { "value": "#7a65c7", "type": "color" }, "nine": { "value": "#ec8943", "type": "color" }, "one": { "value": "#ed753a", "type": "color" }, "seven": { "value": "#7564be", "type": "color" }, "six": { "value": "#ef8dd6", "type": "color" }, "ten": { "value": "#da7a4a", "type": "color" }, "three": { "value": "#8fdcf8", "type": "color" }, "two": { "value": "#f3db5f", "type": "color" } }, "Error Colors": { "base": { "value": "#f9e4e1", "type": "color" }, "border": { "value": "#e9968c", "type": "color" }, "text": { "value": "#d84836", "type": "color" } }, "Info Colors": { "base": { "value": "#dae7fb", "type": "color" }, "border": { "value": "#dae7fb", "type": "color" }, "text": { "value": "#dae7fb", "type": "color" } }, "Standalone Colors": { "border": { "value": "#ffffff", "type": "color" }, "border-strong": { "value": "#3e0306", "type": "color" }, "scrim": { "value": "#393939", "type": "color" }, "shadow": { "value": "#6f0100", "type": "color" }, "text": { "value": "#d9d9d9", "type": "color" }, "text-strong": { "value": "#ffffff", "type": "color" } }, "Success Colors": { "base": { "value": "#dcefe4", "type": "color" }, "border": { "value": "#95d0af", "type": "color" }, "text": { "value": "#3e8d61", "type": "color" } }, "Warning Colors": { "base": { "value": "#fdf7f1", "type": "color" }, "border": { "value": "#f2c097", "type": "color" }, "text": { "value": "#e78b3e", "type": "color" } } } }
To learn more about how to use this json with Figma, visit here
Stand Alone Colors
Below are standalone color definitions we use.
.border
.border strong
.text
.text strong
.shadow
.scrim
$inherited.colors.custom.one
dark:
#FFFFFF
light:
#222222
we use
$inherited.colors.custom.one
for
custom one
Background Colors
Below are background color definitions we use.
.base
.step-1
.step-2
.overlay
.code
$inherited.colors.custom.one
dark:
#240002
light:
#faebd7
we use
$inherited.colors.custom.one
for
custom one
CTA Primary Colors
Below are cta primary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#a53006
light:
#a53006
we use
$inherited.colors.custom.one
for
custom one
CTA Secondary Colors
Below are cta secondary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
CTA Tertiary Colors
Below are cta tertiary color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.one
for
custom one
CTA Danger Colors
Below are cta danger color definitions we use.
.base
.hover
.pressed
.disabled
.focused
.border
.text
$inherited.colors.custom.one
dark:
#f1bdb6
light:
#f1bdb6
we use
$inherited.colors.custom.one
for
custom one
Accent Colors
Below are accent color definitions we use.
.primary
.secondary
.tertiary
$inherited.colors.custom.one
dark:
#a53006
light:
#a53006
we use
$inherited.colors.custom.one
for
custom one
Error Colors
Below are error colors definitions we use.
.base
.text
.border
$inherited.colors.custom.one
dark:
#F9E4E1
light:
#F9E4E1
we use
$inherited.colors.custom.one
for
custom one