Skip to content
Subway SeatSubway SeatSubway Seat
← All ports

Palettes & formats

Palette JSON

The whole palette as data: every flavor and role in hex, RGB and HSL, with names, uses, ANSI order, diff tints and syntax roles. subway-seat.tokens.json is the same in W3C design-token form for Tokens Studio and Style Dictionary.

Showing WalnutTunnelEnamelMoquetteDeep LevelPortlandGuimardCatacombesCarrelage. Switch flavors with the bullets up top.

Palette JSON Report a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this portReport a problem with this port

Turn it on

In any script or tool that reads JSON
jq -r '.flavors.walnut.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.tunnel.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.enamel.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.moquette.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.deep.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.portland.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.guimard.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.catacombes.colors.orange.hex' subway-seat.json
In any script or tool that reads JSON
jq -r '.flavors.carrelage.colors.orange.hex' subway-seat.json

One set of files covers all three flavors.

subway-seat.jsonread it from any script or tool
{
  "name": "Subway Seat",
  "homepage": "https://github.com/oddurs/subway-seat",
  "roles": [
    {
      "id": "crust",
      "name": "Blackout",
      "group": "ground",
      "use": "grooves and borders between panes"
    },
    {
      "id": "mantle",
      "name": "Espresso",
      "group": "ground",
      "use": "chrome: sidebars, title and status bars"
    },
    {
      "id": "base",
      "name": "Paneling",
      "group": "ground",
      "use": "the editor and terminal ground"
    },
    {
      "id": "surface0",
      "name": "Coppertone",
      "group": "ground",
      "use": "the current line, inputs, popovers"
    },
    {
      "id": "surface1",
      "name": "Saddle",
      "group": "ground",
      "use": "raised controls, terminal black"
    },
    {
      "id": "surface2",
      "name": "Corduroy",
      "group": "ground",
      "use": "selection"
    },
    {
      "id": "overlay0",
      "name": "Pecan",
      "group": "ground",
      "use": "gutters, whitespace, indent guides"
    },
    {
      "id": "overlay1",
      "name": "Cardboard",
      "group": "ground",
      "use": "comments, line numbers, bright black"
    },
    {
      "id": "overlay2",
      "name": "Burlap",
      "group": "ground",
      "use": "punctuation, muted labels"
    },
    {
      "id": "subtext0",
      "name": "Khaki",
      "group": "text",
      "use": "placeholders, quiet labels"
    },
    {
      "id": "subtext1",
      "name": "Almond",
      "group": "text",
      "use": "sidebar and secondary text"
    },
    {
      "id": "text",
      "name": "Parchment",
      "group": "text",
      "use": "body text, variables"
    },
    {
      "id": "text_hi",
      "name": "Ivory",
      "group": "text",
      "use": "headings, the active line number, bold"
    },
    {
      "id": "yellow",
      "name": "Harvest gold",
      "group": "accent",
      "use": "functions, commands, the cursor"
    },
    {
      "id": "yellow_hi",
      "name": "Broadway yellow",
      "group": "accent",
      "use": "bright yellow, emphasis on gold"
    },
    {
      "id": "orange",
      "name": "Burnt orange",
      "group": "accent",
      "use": "keywords, tags, the Claude spinner"
    },
    {
      "id": "orange_hi",
      "name": "Sixth Avenue",
      "group": "accent",
      "use": "bright magenta, the Claude spinner shimmer"
    },
    {
      "id": "red",
      "name": "Redbird",
      "group": "accent",
      "use": "errors, terminal red"
    },
    {
      "id": "red_hi",
      "name": "Redbird bright",
      "group": "accent",
      "use": "numbers, constants, deletions"
    },
    {
      "id": "green",
      "name": "Avocado",
      "group": "accent",
      "use": "strings, additions"
    },
    {
      "id": "green_hi",
      "name": "Avocado bright",
      "group": "accent",
      "use": "bright green"
    },
    {
      "id": "sage",
      "name": "Seafoam tile",
      "group": "accent",
      "use": "types, classes, options"
    },
    {
      "id": "sage_hi",
      "name": "Seafoam bright",
      "group": "accent",
      "use": "bright cyan"
    },
    {
      "id": "denim",
      "name": "Faded denim",
      "group": "accent",
      "use": "links and info, the only cool color"
    },
    {
      "id": "denim_hi",

Showing 150 of 4,628 lines.

subway-seat.tokens.jsonsave as tokens/subway-seat.tokens.json
in your project, as a Style Dictionary source; Tokens Studio loads it with Load from file
{
  "walnut": {
    "crust": {
      "$type": "color",
      "$value": "#20160E",
      "$description": "Blackout"
    },
    "mantle": {
      "$type": "color",
      "$value": "#2A1D13",
      "$description": "Espresso"
    },
    "base": {
      "$type": "color",
      "$value": "#362619",
      "$description": "Paneling"
    },
    "surface0": {
      "$type": "color",
      "$value": "#43301F",
      "$description": "Coppertone"
    },
    "surface1": {
      "$type": "color",
      "$value": "#513B27",
      "$description": "Saddle"
    },
    "surface2": {
      "$type": "color",
      "$value": "#634932",
      "$description": "Corduroy"
    },
    "overlay0": {
      "$type": "color",
      "$value": "#7B6047",
      "$description": "Pecan"
    },
    "overlay1": {
      "$type": "color",
      "$value": "#967B5C",
      "$description": "Cardboard"
    },
    "overlay2": {
      "$type": "color",
      "$value": "#AE9575",
      "$description": "Burlap"
    },
    "subtext0": {
      "$type": "color",
      "$value": "#C4AE8C",
      "$description": "Khaki"
    },
    "subtext1": {
      "$type": "color",
      "$value": "#D9C6A3",
      "$description": "Almond"
    },
    "text": {
      "$type": "color",
      "$value": "#EDDCBC",
      "$description": "Parchment"
    },
    "text-hi": {
      "$type": "color",
      "$value": "#F8ECD4",
      "$description": "Ivory"
    },
    "yellow": {
      "$type": "color",
      "$value": "#F3BF45",
      "$description": "Harvest gold"
    },
    "yellow-hi": {
      "$type": "color",
      "$value": "#FFD36B",
      "$description": "Broadway yellow"
    },
    "orange": {
      "$type": "color",
      "$value": "#EC7F31",
      "$description": "Burnt orange"
    },
    "orange-hi": {
      "$type": "color",
      "$value": "#FF9D55",
      "$description": "Sixth Avenue"
    },
    "red": {
      "$type": "color",
      "$value": "#E05C45",
      "$description": "Redbird"
    },
    "red-hi": {
      "$type": "color",
      "$value": "#FF8373",
      "$description": "Redbird bright"
    },
    "green": {
      "$type": "color",
      "$value": "#ADB956",
      "$description": "Avocado"
    },
    "green-hi": {
      "$type": "color",
      "$value": "#BFCB63",
      "$description": "Avocado bright"
    },
    "sage": {
      "$type": "color",
      "$value": "#86AD95",
      "$description": "Seafoam tile"
    },
    "sage-hi": {
      "$type": "color",
      "$value": "#A5C9B0",
      "$description": "Seafoam bright"
    },
    "denim": {
      "$type": "color",
      "$value": "#7F9BAE",
      "$description": "Faded denim"
    },
    "denim-hi": {
      "$type": "color",
      "$value": "#9DB6C6",
      "$description": "Denim bright"
    },
    "clay": {
      "$type": "color",
      "$value": "#F4A87E",
      "$description": "Terracotta"
    },
    "diff": {
      "add": {
        "$type": "color",
        "$value": "#3F3A1E"
      },
      "add-emph": {
        "$type": "color",
        "$value": "#504D26"
      },
      "add-dim": {
        "$type": "color",
        "$value": "#342D18"
      },
      "del": {
        "$type": "color",
        "$value": "#52281C"
      },
      "del-emph": {

Showing 150 of 1,496 lines.