Skip to content

Subway SeatSubway SeatSubway Seat

Palettes & formats

Sass

A $ss-* variable for every role and for the diff tints ($ss-diff-add, $ss-diff-del-emph, …), and a $subway-seat map of the same. The names match across flavors, so switching is a one-word change to the @use.

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

Sass Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port Report a problem with this port

Turn it on

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "subway-seat" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "subway-seat-tunnel" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "subway-seat-enamel" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "london-moquette" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "london-deep-level" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "london-portland" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "paris-guimard" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "paris-catacombes" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

In any stylesheet, with the partial on your load path

@use "sass:map";
@use "paris-carrelage" as *;

body {
  background: $ss-base;
  color: map.get($subway-seat, "text");
}

The files

_subway-seat.scsssave as styles/_subway-seat.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Subway Seat: Walnut paneling and orange bucket seats. The original.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #20160E; // Blackout
$ss-mantle:        #2A1D13; // Espresso
$ss-base:          #362619; // Paneling
$ss-surface0:      #43301F; // Coppertone
$ss-surface1:      #513B27; // Saddle
$ss-surface2:      #634932; // Corduroy
$ss-overlay0:      #7B6047; // Pecan
$ss-overlay1:      #967B5C; // Cardboard
$ss-overlay2:      #AE9575; // Burlap
$ss-subtext0:      #C4AE8C; // Khaki
$ss-subtext1:      #D9C6A3; // Almond
$ss-text:          #EDDCBC; // Parchment
$ss-text-hi:       #F8ECD4; // Ivory
$ss-yellow:        #F3BF45; // Harvest gold
$ss-yellow-hi:     #FFD36B; // Broadway yellow
$ss-orange:        #EC7F31; // Burnt orange
$ss-orange-hi:     #FF9D55; // Sixth Avenue
$ss-red:           #E05C45; // Redbird
$ss-red-hi:        #FF8373; // Redbird bright
$ss-green:         #ADB956; // Avocado
$ss-green-hi:      #BFCB63; // Avocado bright
$ss-sage:          #86AD95; // Seafoam tile
$ss-sage-hi:       #A5C9B0; // Seafoam bright
$ss-denim:         #7F9BAE; // Faded denim
$ss-denim-hi:      #9DB6C6; // Denim bright
$ss-clay:          #F4A87E; // Terracotta
$ss-diff-add:      #3F3A1E;
$ss-diff-add-emph: #504D26;
$ss-diff-add-dim:  #342D18;
$ss-diff-del:      #52281C;
$ss-diff-del-emph: #6D3224;
$ss-diff-del-dim:  #412217;
$ss-diff-chg:      #423117;
$ss-diff-chg-emph: #57421C;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_subway-seat-tunnel.scsssave as styles/_subway-seat-tunnel.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Subway Seat Tunnel: The late local after midnight: espresso-deep, same warm lights.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #140D07; // Blackout
$ss-mantle:        #1B120A; // Espresso
$ss-base:          #24180E; // Paneling
$ss-surface0:      #302115; // Coppertone
$ss-surface1:      #3D2C1D; // Saddle
$ss-surface2:      #4F3927; // Corduroy
$ss-overlay0:      #745B45; // Pecan
$ss-overlay1:      #917759; // Cardboard
$ss-overlay2:      #AA9171; // Burlap
$ss-subtext0:      #C0AA88; // Khaki
$ss-subtext1:      #D6C3A0; // Almond
$ss-text:          #E9D8B6; // Parchment
$ss-text-hi:       #F6EAD1; // Ivory
$ss-yellow:        #F3BF45; // Harvest gold
$ss-yellow-hi:     #FFD36B; // Broadway yellow
$ss-orange:        #EC7F31; // Burnt orange
$ss-orange-hi:     #FF9D55; // Sixth Avenue
$ss-red:           #E05C45; // Redbird
$ss-red-hi:        #FF8373; // Redbird bright
$ss-green:         #ADB956; // Avocado
$ss-green-hi:      #BFCB63; // Avocado bright
$ss-sage:          #86AD95; // Seafoam tile
$ss-sage-hi:       #A5C9B0; // Seafoam bright
$ss-denim:         #7F9BAE; // Faded denim
$ss-denim-hi:      #9DB6C6; // Denim bright
$ss-clay:          #F4A87E; // Terracotta
$ss-diff-add:      #363318;
$ss-diff-add-emph: #484722;
$ss-diff-add-dim:  #292512;
$ss-diff-del:      #492217;
$ss-diff-del-emph: #662D20;
$ss-diff-del-dim:  #371A12;
$ss-diff-chg:      #382911;
$ss-diff-chg-emph: #4E3B17;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_subway-seat-enamel.scsssave as styles/_subway-seat-enamel.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Subway Seat Enamel: Cream enamel panels in the morning sun. The light one.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #E4D8C0; // Enamel crust
$ss-mantle:        #EEE4D0; // Enamel mantle
$ss-base:          #F8EFDF; // Enamel base
$ss-surface0:      #DBCDB3; // Enamel surface0
$ss-surface1:      #CBB898; // Enamel surface1
$ss-surface2:      #BAA380; // Enamel surface2
$ss-overlay0:      #A58D6D; // Enamel overlay0
$ss-overlay1:      #8C7254; // Enamel overlay1
$ss-overlay2:      #735C44; // Enamel overlay2
$ss-subtext0:      #654F3B; // Enamel subtext0
$ss-subtext1:      #54402F; // Enamel subtext1
$ss-text:          #3E2C1E; // Enamel text
$ss-text-hi:       #2A1D13; // Enamel text hi
$ss-yellow:        #976608; // Harvest gold
$ss-yellow-hi:     #A9720A; // Broadway yellow
$ss-orange:        #A04800; // Burnt orange
$ss-orange-hi:     #BA4D0A; // Sixth Avenue
$ss-red:           #992418; // Redbird
$ss-red-hi:        #BF4233; // Redbird bright
$ss-green:         #66740F; // Avocado
$ss-green-hi:      #697813; // Avocado bright
$ss-sage:          #3E7157; // Seafoam tile
$ss-sage-hi:       #4C8367; // Seafoam bright
$ss-denim:         #3F6480; // Faded denim
$ss-denim-hi:      #517791; // Denim bright
$ss-clay:          #843811; // Terracotta
$ss-diff-add:      #D7DBC1;
$ss-diff-add-emph: #C2C79F;
$ss-diff-add-dim:  #E7E9D9;
$ss-diff-del:      #EBD3D1;
$ss-diff-del-emph: #DEB9B5;
$ss-diff-del-dim:  #F3E5E3;
$ss-diff-chg:      #E4D7BF;
$ss-diff-chg-emph: #DECEB0;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_london-moquette.scsssave as styles/_london-moquette.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// London Moquette: The seat you're sitting on. Corporate Blue, turned right down.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #121826; // Blackout
$ss-mantle:        #172032; // Espresso
$ss-base:          #1E2941; // Paneling
$ss-surface0:      #263451; // Coppertone
$ss-surface1:      #303F61; // Saddle
$ss-surface2:      #3D4F72; // Corduroy
$ss-overlay0:      #576685; // Pecan
$ss-overlay1:      #73819C; // Cardboard
$ss-overlay2:      #8F9AB0; // Burlap
$ss-subtext0:      #A9B2C4; // Khaki
$ss-subtext1:      #C1C9D8; // Almond
$ss-text:          #D8DEEA; // Parchment
$ss-text-hi:       #E9EDF5; // Ivory
$ss-yellow:        #F2C03F; // Harvest gold
$ss-yellow-hi:     #FFD36C; // Broadway yellow
$ss-orange:        #DE8946; // Burnt orange
$ss-orange-hi:     #E5AA7F; // Sixth Avenue
$ss-red:           #DB6052; // Redbird
$ss-red-hi:        #FE8474; // Redbird bright
$ss-green:         #77C581; // Avocado
$ss-green-hi:      #9AD2A0; // Avocado bright
$ss-sage:          #54B4B5; // Seafoam tile
$ss-sage-hi:       #72D1D3; // Seafoam bright
$ss-denim:         #7595DA; // Faded denim
$ss-denim-hi:      #8BB0FF; // Denim bright
$ss-clay:          #AE9EDC; // Terracotta
$ss-diff-add:      #283E3A;
$ss-diff-add-emph: #345345;
$ss-diff-add-dim:  #203033;
$ss-diff-del:      #462B31;
$ss-diff-del-emph: #623538;
$ss-diff-del-dim:  #34242D;
$ss-diff-chg:      #36332A;
$ss-diff-chg-emph: #4C442C;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_london-deep-level.scsssave as styles/_london-deep-level.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// London Deep Level: Below the cut-and-cover lines. The ground drops; the signals don't.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #0A0E18; // Blackout
$ss-mantle:        #0D1421; // Espresso
$ss-base:          #121A2D; // Paneling
$ss-surface0:      #1A243A; // Coppertone
$ss-surface1:      #232F49; // Saddle
$ss-surface2:      #303E5B; // Corduroy
$ss-overlay0:      #53617D; // Pecan
$ss-overlay1:      #6F7C97; // Cardboard
$ss-overlay2:      #8B96AC; // Burlap
$ss-subtext0:      #A5AEC0; // Khaki
$ss-subtext1:      #BEC6D5; // Almond
$ss-text:          #D4DAE7; // Parchment
$ss-text-hi:       #E7EBF3; // Ivory
$ss-yellow:        #F2C03F; // Harvest gold
$ss-yellow-hi:     #FFD36C; // Broadway yellow
$ss-orange:        #DE8946; // Burnt orange
$ss-orange-hi:     #E5AA7F; // Sixth Avenue
$ss-red:           #DB6052; // Redbird
$ss-red-hi:        #FE8474; // Redbird bright
$ss-green:         #77C581; // Avocado
$ss-green-hi:      #9AD2A0; // Avocado bright
$ss-sage:          #54B4B5; // Seafoam tile
$ss-sage-hi:       #72D1D3; // Seafoam bright
$ss-denim:         #7595DA; // Faded denim
$ss-denim-hi:      #8BB0FF; // Denim bright
$ss-clay:          #AE9EDC; // Terracotta
$ss-diff-add:      #22362F;
$ss-diff-add-emph: #2F4C3C;
$ss-diff-add-dim:  #192827;
$ss-diff-del:      #402327;
$ss-diff-del-emph: #5E2F2F;
$ss-diff-del-dim:  #2E1C22;
$ss-diff-chg:      #2F2A1E;
$ss-diff-chg-emph: #463C22;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_london-portland.scsssave as styles/_london-portland.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// London Portland: Holden's Portland stone. Links are the exact Corporate Blue.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #CCDAF2; // Portland crust
$ss-mantle:        #DCE5F7; // Portland mantle
$ss-base:          #E8F0FF; // Portland base
$ss-surface0:      #BFCFF1; // Portland surface0
$ss-surface1:      #A8BBE2; // Portland surface1
$ss-surface2:      #93A7CF; // Portland surface2
$ss-overlay0:      #8192B4; // Portland overlay0
$ss-overlay1:      #697794; // Portland overlay1
$ss-overlay2:      #556179; // Portland overlay2
$ss-subtext0:      #4A5469; // Portland subtext0
$ss-subtext1:      #3C4557; // Portland subtext1
$ss-text:          #293040; // Portland text
$ss-text-hi:       #1B202B; // Portland text hi
$ss-yellow:        #8D6C08; // Harvest gold
$ss-yellow-hi:     #9B770A; // Broadway yellow
$ss-orange:        #A54300; // Burnt orange
$ss-orange-hi:     #AC5A00; // Sixth Avenue
$ss-red:           #9B211A; // Redbird
$ss-red-hi:        #CC2E25; // Redbird bright
$ss-green:         #0D8131; // Avocado
$ss-green-hi:      #008730; // Avocado bright
$ss-sage:          #007376; // Seafoam tile
$ss-sage-hi:       #008688; // Seafoam bright
$ss-denim:         #0019A8; // Faded denim
$ss-denim-hi:      #4A6EBD; // Denim bright
$ss-clay:          #755FA9; // Terracotta
$ss-diff-add:      #C0DEC9;
$ss-diff-add-emph: #9ECDAD;
$ss-diff-add-dim:  #D8EBDE;
$ss-diff-del:      #EBD3D1;
$ss-diff-del-emph: #DFB8B6;
$ss-diff-del-dim:  #F3E4E4;
$ss-diff-chg:      #E1D9BF;
$ss-diff-chg-emph: #DBD0B0;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_paris-guimard.scsssave as styles/_paris-guimard.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Paris Guimard: Cast iron off a Metro entrance, which is nearly black. Brass leads.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #131A17; // Blackout
$ss-mantle:        #18241D; // Espresso
$ss-base:          #1E2E26; // Paneling
$ss-surface0:      #263930; // Coppertone
$ss-surface1:      #30463B; // Saddle
$ss-surface2:      #3E554A; // Corduroy
$ss-overlay0:      #586B61; // Pecan
$ss-overlay1:      #74857C; // Cardboard
$ss-overlay2:      #909E96; // Burlap
$ss-subtext0:      #A9B5AE; // Khaki
$ss-subtext1:      #C2CBC5; // Almond
$ss-text:          #D9E1DB; // Parchment
$ss-text-hi:       #E9EEEC; // Ivory
$ss-yellow:        #F1BF4B; // Harvest gold
$ss-yellow-hi:     #FFD57A; // Broadway yellow
$ss-orange:        #CA9245; // Burnt orange
$ss-orange-hi:     #DFAA61; // Sixth Avenue
$ss-red:           #C7665B; // Redbird
$ss-red-hi:        #E7877B; // Redbird bright
$ss-green:         #70CAA9; // Avocado
$ss-green-hi:      #89DEBE; // Avocado bright
$ss-sage:          #549B9F; // Seafoam tile
$ss-sage-hi:       #70B5B9; // Seafoam bright
$ss-denim:         #709BC8; // Faded denim
$ss-denim-hi:      #8DB6E2; // Denim bright
$ss-clay:          #FAB49C; // Terracotta
$ss-diff-add:      #274137;
$ss-diff-add-emph: #335649;
$ss-diff-add-dim:  #20332B;
$ss-diff-del:      #422E29;
$ss-diff-del-emph: #5B3832;
$ss-diff-del-dim:  #322723;
$ss-diff-chg:      #37341F;
$ss-diff-chg-emph: #4D4525;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_paris-catacombes.scsssave as styles/_paris-catacombes.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Paris Catacombes: Under the quarries: the same green with the lights turned down.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #0A100D; // Blackout
$ss-mantle:        #0D1711; // Espresso
$ss-base:          #121E19; // Paneling
$ss-surface0:      #1A2921; // Coppertone
$ss-surface1:      #24342C; // Saddle
$ss-surface2:      #31433A; // Corduroy
$ss-overlay0:      #54655C; // Pecan
$ss-overlay1:      #708178; // Cardboard
$ss-overlay2:      #8C9A92; // Burlap
$ss-subtext0:      #A5B1AA; // Khaki
$ss-subtext1:      #BFC8C2; // Almond
$ss-text:          #D4DDD7; // Parchment
$ss-text-hi:       #E7ECEA; // Ivory
$ss-yellow:        #F1BF4B; // Harvest gold
$ss-yellow-hi:     #FFD57A; // Broadway yellow
$ss-orange:        #CA9245; // Burnt orange
$ss-orange-hi:     #DFAA61; // Sixth Avenue
$ss-red:           #C7665B; // Redbird
$ss-red-hi:        #E7877B; // Redbird bright
$ss-green:         #70CAA9; // Avocado
$ss-green-hi:      #89DEBE; // Avocado bright
$ss-sage:          #549B9F; // Seafoam tile
$ss-sage-hi:       #70B5B9; // Seafoam bright
$ss-denim:         #709BC8; // Faded denim
$ss-denim-hi:      #8DB6E2; // Denim bright
$ss-clay:          #FAB49C; // Terracotta
$ss-diff-add:      #20392F;
$ss-diff-add-emph: #2D4F42;
$ss-diff-add-dim:  #182A23;
$ss-diff-del:      #3B2621;
$ss-diff-del-emph: #56322C;
$ss-diff-del-dim:  #2A1F1A;
$ss-diff-chg:      #2F2C17;
$ss-diff-chg-emph: #463E1D;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);

_paris-carrelage.scsssave as styles/_paris-carrelage.scss
in your project, on your Sass load path

// Subway Seat — generated from palette.py by build.py. Edit the palette, not this file.
// Paris Carrelage: Bevelled white tile under a vaulted platform. The light one.
// Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs.

$ss-crust:         #D5DBDA; // Carrelage crust
$ss-mantle:        #E1E6E5; // Carrelage mantle
$ss-base:          #EEF2F1; // Carrelage base
$ss-surface0:      #C6D2CF; // Carrelage surface0
$ss-surface1:      #B0BFBB; // Carrelage surface1
$ss-surface2:      #99ABA6; // Carrelage surface2
$ss-overlay0:      #859792; // Carrelage overlay0
$ss-overlay1:      #6C7C76; // Carrelage overlay1
$ss-overlay2:      #56645F; // Carrelage overlay2
$ss-subtext0:      #4A5752; // Carrelage subtext0
$ss-subtext1:      #3B4742; // Carrelage subtext1
$ss-text:          #27342F; // Carrelage text
$ss-text-hi:       #19221E; // Carrelage text hi
$ss-yellow:        #916D07; // Harvest gold
$ss-yellow-hi:     #A07A12; // Broadway yellow
$ss-orange:        #764C00; // Burnt orange
$ss-orange-hi:     #885A00; // Sixth Avenue
$ss-red:           #88251E; // Redbird
$ss-red-hi:        #AC3B32; // Redbird bright
$ss-green:         #218366; // Avocado
$ss-green-hi:      #278D6E; // Avocado bright
$ss-sage:          #006267; // Seafoam tile
$ss-sage-hi:       #027479; // Seafoam bright
$ss-denim:         #25629B; // Faded denim
$ss-denim-hi:      #3D75AD; // Denim bright
$ss-clay:          #B36B51; // Terracotta
$ss-diff-add:      #C5DFD7;
$ss-diff-add-emph: #A6CDC2;
$ss-diff-add-dim:  #DBEBE7;
$ss-diff-del:      #E7D3D2;
$ss-diff-del-emph: #D9B9B7;
$ss-diff-del-dim:  #F1E5E4;
$ss-diff-chg:      #E2D9BF;
$ss-diff-chg-emph: #DCD0B0;

$subway-seat: (
  "crust": $ss-crust,
  "mantle": $ss-mantle,
  "base": $ss-base,
  "surface0": $ss-surface0,
  "surface1": $ss-surface1,
  "surface2": $ss-surface2,
  "overlay0": $ss-overlay0,
  "overlay1": $ss-overlay1,
  "overlay2": $ss-overlay2,
  "subtext0": $ss-subtext0,
  "subtext1": $ss-subtext1,
  "text": $ss-text,
  "text-hi": $ss-text-hi,
  "yellow": $ss-yellow,
  "yellow-hi": $ss-yellow-hi,
  "orange": $ss-orange,
  "orange-hi": $ss-orange-hi,
  "red": $ss-red,
  "red-hi": $ss-red-hi,
  "green": $ss-green,
  "green-hi": $ss-green-hi,
  "sage": $ss-sage,
  "sage-hi": $ss-sage-hi,
  "denim": $ss-denim,
  "denim-hi": $ss-denim-hi,
  "clay": $ss-clay,
  "diff-add": $ss-diff-add,
  "diff-add-emph": $ss-diff-add-emph,
  "diff-add-dim": $ss-diff-add-dim,
  "diff-del": $ss-diff-del,
  "diff-del-emph": $ss-diff-del-emph,
  "diff-del-dim": $ss-diff-del-dim,
  "diff-chg": $ss-diff-chg,
  "diff-chg-emph": $ss-diff-chg-emph,
);