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

{
"winter-cs-light": {
  "Accent Colors": {
    "primary": {
      "value": "#0096eb",
      "type": "color"
    },
    "secondary": {
      "value": "#094367",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#ffffff",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#094367",
      "type": "color"
    },
    "step-2": {
      "value": "#f1f1f1",
      "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": "#d84836",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#0096eb",
      "type": "color"
    },
    "border": {
      "value": "#0096eb",
      "type": "color"
    },
    "disabled": {
      "value": "#e6f5fd",
      "type": "color"
    },
    "focused": {
      "value": "#0071b0",
      "type": "color"
    },
    "hover": {
      "value": "#0087d4",
      "type": "color"
    },
    "pressed": {
      "value": "#0078bc",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#094367",
      "type": "color"
    },
    "border": {
      "value": "#094367",
      "type": "color"
    },
    "disabled": {
      "value": "#e6ecf0",
      "type": "color"
    },
    "focused": {
      "value": "#07324d",
      "type": "color"
    },
    "hover": {
      "value": "#083c5d",
      "type": "color"
    },
    "pressed": {
      "value": "#073652",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#4a6490",
      "type": "color"
    },
    "border": {
      "value": "#4e6997",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(74, 100, 144, 0.4)",
      "type": "color"
    },
    "focused": {
      "value": "#6882b1",
      "type": "color"
    },
    "hover": {
      "value": "#3d5276",
      "type": "color"
    },
    "pressed": {
      "value": "#2b3a54",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#fbf5e2",
      "type": "color"
    },
    "four": {
      "value": "#fcf5f5",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ef6f6c",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#ebbe52",
      "type": "color"
    },
    "two": {
      "value": "#ffe8e7",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#eeeeee",
      "type": "color"
    },
    "border-strong": {
      "value": "#0096eb",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#0096eb",
      "type": "color"
    },
    "text": {
      "value": "#094367",
      "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": "#ffdab6",
      "type": "color"
    },
    "border": {
      "value": "#f2c097",
      "type": "color"
    },
    "text": {
      "value": "#e78b3e",
      "type": "color"
    }
  }
},
"winter-cs-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#0096eb",
      "type": "color"
    },
    "secondary": {
      "value": "#04293f",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#04293f",
      "type": "color"
    },
    "code": {
      "value": "#eaeaea",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#073652",
      "type": "color"
    },
    "step-2": {
      "value": "#07324d",
      "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": "#d84836",
      "type": "color"
    }
  },
  "CTA Primary Colors": {
    "base": {
      "value": "#0096eb",
      "type": "color"
    },
    "border": {
      "value": "#0096eb",
      "type": "color"
    },
    "disabled": {
      "value": "#e6f5fd",
      "type": "color"
    },
    "focused": {
      "value": "#0071b0",
      "type": "color"
    },
    "hover": {
      "value": "#0087d4",
      "type": "color"
    },
    "pressed": {
      "value": "#0078bc",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Secondary Colors": {
    "base": {
      "value": "#04293f",
      "type": "color"
    },
    "border": {
      "value": "#094367",
      "type": "color"
    },
    "disabled": {
      "value": "#e6ecf0",
      "type": "color"
    },
    "focused": {
      "value": "#07324d",
      "type": "color"
    },
    "hover": {
      "value": "#083c5d",
      "type": "color"
    },
    "pressed": {
      "value": "#073652",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "CTA Tertiary Colors": {
    "base": {
      "value": "#4a6490",
      "type": "color"
    },
    "border": {
      "value": "#4e6997",
      "type": "color"
    },
    "disabled": {
      "value": "rgba(74, 100, 144, 0.4)",
      "type": "color"
    },
    "focused": {
      "value": "#6882b1",
      "type": "color"
    },
    "hover": {
      "value": "#3d5276",
      "type": "color"
    },
    "pressed": {
      "value": "#2b3a54",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Custom Colors": {
    "eight": {
      "value": "#d554b3",
      "type": "color"
    },
    "five": {
      "value": "#fbf5e2",
      "type": "color"
    },
    "four": {
      "value": "#083c5d",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#ef6f6c",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#ebbe52",
      "type": "color"
    },
    "two": {
      "value": "#083c5d",
      "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": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#04293f",
      "type": "color"
    },
    "border-strong": {
      "value": "#eeeeee",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#0096eb",
      "type": "color"
    },
    "text": {
      "value": "#ffffff",
      "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": "#ffdab6",
      "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:

#04293f

light:

#eeeeee

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#04293f

light:

#eeeeee

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#eeeeee

light:

#0096eb

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#eeeeee

light:

#0096eb

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#ffffff

light:

#094367

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#ffffff

light:

#094367

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#393939

light:

#393939

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#393939

light:

#393939

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.six

for

custom six

Background Colors

Below are background color definitions we use.

.base

.step-1

.step-2

.overlay

.code

$inherited.colors.custom.one

dark:

#04293f

light:

#ffffff

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#04293f

light:

#ffffff

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#073652

light:

#094367

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#073652

light:

#094367

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#07324D

light:

#F1F1F1

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#07324D

light:

#F1F1F1

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#000000

light:

#000000

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#000000

light:

#000000

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#eaeaea

light:

#eaeaea

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#eaeaea

light:

#eaeaea

we use

$inherited.colors.custom.five

for

custom five

CTA Primary Colors

Below are cta primary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#0087D4

light:

#0087D4

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#0087D4

light:

#0087D4

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#0078BC

light:

#0078BC

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#0078BC

light:

#0078BC

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#E6F5FD

light:

#E6F5FD

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#E6F5FD

light:

#E6F5FD

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#0071B0

light:

#0071B0

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#0071B0

light:

#0071B0

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#0096EB

light:

#0096EB

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#0096EB

light:

#0096EB

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Secondary Colors

Below are cta secondary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#04293f

light:

#094367

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#04293f

light:

#094367

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#083c5d

light:

#083c5d

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#083c5d

light:

#083c5d

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#073652

light:

#073652

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#073652

light:

#073652

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#e6ecf0

light:

#e6ecf0

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#e6ecf0

light:

#e6ecf0

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#07324d

light:

#07324d

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#07324d

light:

#07324d

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#094367

light:

#094367

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#094367

light:

#094367

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

CTA Tertiary Colors

Below are cta tertiary color definitions we use.

.base

.hover

.pressed

.disabled

.focused

.border

.text

$inherited.colors.custom.one

dark:

#4A6490

light:

#4A6490

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#4A6490

light:

#4A6490

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#3d5276

light:

#3d5276

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#3d5276

light:

#3d5276

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#2b3a54

light:

#2b3a54

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#2b3a54

light:

#2b3a54

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

rgba(74, 100, 144, 0.4)

light:

rgba(74, 100, 144, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

rgba(74, 100, 144, 0.4)

light:

rgba(74, 100, 144, 0.4)

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#6882b1

light:

#6882b1

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#6882b1

light:

#6882b1

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#4e6997

light:

#4e6997

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#4e6997

light:

#4e6997

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#ffffff

light:

#ffffff

we use

$inherited.colors.custom.seven

for

custom seven

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

$inherited.colors.custom.one

dark:

#f1bdb6

light:

#f1bdb6

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#f9e4e1

light:

#f9e4e1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#f9e4e1

light:

#f9e4e1

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#d46a63

light:

#d46a63

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#d46a63

light:

#d46a63

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.four

dark:

#faeceb

light:

#faeceb

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.four

dark:

#faeceb

light:

#faeceb

we use

$inherited.colors.custom.four

for

custom four

$inherited.colors.custom.five

dark:

#d97973

light:

#d97973

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.five

dark:

#d97973

light:

#d97973

we use

$inherited.colors.custom.five

for

custom five

$inherited.colors.custom.six

dark:

#E9968C

light:

#e9968c

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.six

dark:

#E9968C

light:

#e9968c

we use

$inherited.colors.custom.six

for

custom six

$inherited.colors.custom.seven

dark:

#d84836

light:

#d84836

we use

$inherited.colors.custom.seven

for

custom seven

$inherited.colors.custom.seven

dark:

#d84836

light:

#d84836

we use

$inherited.colors.custom.seven

for

custom seven

Accent Colors

Below are accent color definitions we use.

.primary

.secondary

.tertiary

$inherited.colors.custom.one

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.one

dark:

#0096eb

light:

#0096eb

we use

$inherited.colors.custom.one

for

custom one

$inherited.colors.custom.two

dark:

#04293f

light:

#094367

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.two

dark:

#04293f

light:

#094367

we use

$inherited.colors.custom.two

for

custom two

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

$inherited.colors.custom.three

dark:

#c5cbd7

light:

#c5cbd7

we use

$inherited.colors.custom.three

for

custom three

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