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
jq -r '.flavors.walnut.colors.orange.hex' subway-seat.jsonjq -r '.flavors.tunnel.colors.orange.hex' subway-seat.jsonjq -r '.flavors.enamel.colors.orange.hex' subway-seat.jsonjq -r '.flavors.moquette.colors.orange.hex' subway-seat.jsonjq -r '.flavors.deep.colors.orange.hex' subway-seat.jsonjq -r '.flavors.portland.colors.orange.hex' subway-seat.jsonjq -r '.flavors.guimard.colors.orange.hex' subway-seat.jsonjq -r '.flavors.catacombes.colors.orange.hex' subway-seat.jsonjq -r '.flavors.carrelage.colors.orange.hex' subway-seat.jsonThe files
Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)Download all (.zip)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.jsonin 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.