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
{
"dark-flame-cs-light": {
  "Accent Colors": {
    "primary": {
      "value": "#ef8435",
      "type": "color"
    },
    "secondary": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#ffffff",
      "type": "color"
    },
    "code": {
      "value": "#f5f5f5",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#fdfaf1",
      "type": "color"
    },
    "step-2": {
      "value": "#fbf3dc",
      "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": "#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": "#512403",
      "type": "color"
    }
  },
  "CTA Secondary 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"
    }
  },
  "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": "#fdfaf1",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#4aa35c",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#ebbe52",
      "type": "color"
    },
    "two": {
      "value": "#5c2860",
      "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": "#f0ece2",
      "type": "color"
    },
    "border-strong": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#ef8435",
      "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"
    }
  }
},
"dark-flame-cs-dark": {
  "Accent Colors": {
    "primary": {
      "value": "#ef8435",
      "type": "color"
    },
    "secondary": {
      "value": "#ebe8e5",
      "type": "color"
    },
    "tertiary": {
      "value": "#c5cbd7",
      "type": "color"
    }
  },
  "Background Colors": {
    "base": {
      "value": "#000000",
      "type": "color"
    },
    "code": {
      "value": "#21222c",
      "type": "color"
    },
    "overlay": {
      "value": "#000000",
      "type": "color"
    },
    "step-1": {
      "value": "#111111",
      "type": "color"
    },
    "step-2": {
      "value": "#2b2b2b",
      "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": "#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": "#512403",
      "type": "color"
    }
  },
  "CTA Secondary 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"
    }
  },
  "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": "#222222",
      "type": "color"
    },
    "four": {
      "value": "#111111",
      "type": "color"
    },
    "nine": {
      "value": "#ec8943",
      "type": "color"
    },
    "one": {
      "value": "#4aa35c",
      "type": "color"
    },
    "seven": {
      "value": "#7564be",
      "type": "color"
    },
    "six": {
      "value": "#ef8dd6",
      "type": "color"
    },
    "ten": {
      "value": "#da7a4a",
      "type": "color"
    },
    "three": {
      "value": "#ebbe52",
      "type": "color"
    },
    "two": {
      "value": "#5c2860",
      "type": "color"
    }
  },
  "Error Colors": {
    "base": {
      "value": "#4f2a25c9",
      "type": "color"
    },
    "border": {
      "value": "#e9968c",
      "type": "color"
    },
    "text": {
      "value": "#d84836",
      "type": "color"
    }
  },
  "Info Colors": {
    "base": {
      "value": "#233a5dc7",
      "type": "color"
    },
    "border": {
      "value": "#7eacf1",
      "type": "color"
    },
    "text": {
      "value": "#5290ec",
      "type": "color"
    }
  },
  "Standalone Colors": {
    "border": {
      "value": "#434547",
      "type": "color"
    },
    "border-strong": {
      "value": "#333333",
      "type": "color"
    },
    "scrim": {
      "value": "#393939",
      "type": "color"
    },
    "shadow": {
      "value": "#ef8435",
      "type": "color"
    },
    "text": {
      "value": "#d9d9d9",
      "type": "color"
    },
    "text-strong": {
      "value": "#ffffff",
      "type": "color"
    }
  },
  "Success Colors": {
    "base": {
      "value": "#033a1bb8",
      "type": "color"
    },
    "border": {
      "value": "#95d0af",
      "type": "color"
    },
    "text": {
      "value": "#159f52",
      "type": "color"
    }
  },
  "Warning Colors": {
    "base": {
      "value": "#3b2c1ee6",
      "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:
#434547
light:
#f0ece2
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#434547
light:
#f0ece2
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#333333
light:
#D9D9D9
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#333333
light:
#D9D9D9
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#D9D9D9
light:
#707070
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#D9D9D9
light:
#707070
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#FFFFFF
light:
#333333
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#FFFFFF
light:
#333333
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:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#EF8435
light:
#EF8435
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:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#000000
light:
#FFFFFF
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#111111
light:
#FDFAF1
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#2b2b2b
light:
#fbf3dc
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#2b2b2b
light:
#fbf3dc
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:
#21222c
light:
#f5f5f5
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#21222c
light:
#f5f5f5
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:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#D77730
light:
#D77730
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#D77730
light:
#D77730
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#BF6A2A
light:
#BF6A2A
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#BF6A2A
light:
#BF6A2A
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#FAD9C0
light:
#FAD9C0
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#FAD9C0
light:
#FAD9C0
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#B36328
light:
#B36328
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#B36328
light:
#B36328
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#F3A063
light:
#F3A063
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#F3A063
light:
#F3A063
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#512403
light:
#512403
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#512403
light:
#512403
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:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#D4D1CE
light:
#D4D1CE
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#D4D1CE
light:
#D4D1CE
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.three
dark:
#BCBAB7
light:
#BCBAB7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.three
dark:
#BCBAB7
light:
#BCBAB7
we use
$inherited.colors.custom.three
for
custom three
$inherited.colors.custom.four
dark:
#F9F8F7
light:
#F9F8F7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.four
dark:
#F9F8F7
light:
#F9F8F7
we use
$inherited.colors.custom.four
for
custom four
$inherited.colors.custom.five
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.five
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.five
for
custom five
$inherited.colors.custom.six
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.six
dark:
#B0AEAC
light:
#B0AEAC
we use
$inherited.colors.custom.six
for
custom six
$inherited.colors.custom.seven
dark:
#333333
light:
#333333
we use
$inherited.colors.custom.seven
for
custom seven
$inherited.colors.custom.seven
dark:
#333333
light:
#333333
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:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#EF8435
light:
#EF8435
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.two
dark:
#EBE8E5
light:
#EBE8E5
we use
$inherited.colors.custom.two
for
custom two
$inherited.colors.custom.two
dark:
#EBE8E5
light:
#EBE8E5
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:
#4f2a25c9
light:
#F9E4E1
we use
$inherited.colors.custom.one
for
custom one
$inherited.colors.custom.one
dark:
#4f2a25c9