Skip to content
Subway SeatSubway SeatSubway Seat
← All ports

Palettes & formats

CSS variables

Every role as a custom property, with an -rgb triplet beside it for transparency, and the diff tints as --ss-diff-* (line and word grounds for added, removed and changed text). subway-seat-flavors.css holds all three, switched by data-theme or the system light/dark setting.

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

CSS variables 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 your stylesheet
@import url("subway-seat.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("subway-seat-tunnel.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("subway-seat-enamel.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("london-moquette.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("london-deep-level.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("london-portland.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("paris-guimard.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("paris-catacombes.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}
In your stylesheet
@import url("paris-carrelage.css");

body {
  background: var(--ss-base);
  color: var(--ss-text);
}

.scrim {
  background: rgb(var(--ss-crust-rgb) / 0.8);
}

Follow light and dark

One setting that changes with your system’s light and dark mode, no switching by hand.

In your stylesheet
@import url("subway-seat-flavors.css");

/* Enamel when the system is light, Walnut when it's dark;
   data-theme="walnut" | "tunnel" | "enamel" on <html> picks one instead. */
subway-seat.csssave as styles/subway-seat.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #C4AE8C; /* Khaki */
  --ss-subtext1: #D9C6A3; /* Almond */
  --ss-text: #EDDCBC; /* Parchment */
  --ss-text-hi: #F8ECD4; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 32 22 14;
  --ss-mantle-rgb: 42 29 19;
  --ss-base-rgb: 54 38 25;
  --ss-surface0-rgb: 67 48 31;
  --ss-surface1-rgb: 81 59 39;
  --ss-surface2-rgb: 99 73 50;
  --ss-overlay0-rgb: 123 96 71;
  --ss-overlay1-rgb: 150 123 92;
  --ss-overlay2-rgb: 174 149 117;
  --ss-subtext0-rgb: 196 174 140;
  --ss-subtext1-rgb: 217 198 163;
  --ss-text-rgb: 237 220 188;
  --ss-text-hi-rgb: 248 236 212;
  --ss-yellow-rgb: 243 191 69;
  --ss-yellow-hi-rgb: 255 211 107;
  --ss-orange-rgb: 236 127 49;
  --ss-orange-hi-rgb: 255 157 85;
  --ss-red-rgb: 224 92 69;
  --ss-red-hi-rgb: 255 131 115;
  --ss-green-rgb: 173 185 86;
  --ss-green-hi-rgb: 191 203 99;
  --ss-sage-rgb: 134 173 149;
  --ss-sage-hi-rgb: 165 201 176;
  --ss-denim-rgb: 127 155 174;
  --ss-denim-hi-rgb: 157 182 198;
  --ss-clay-rgb: 244 168 126;
}
subway-seat-tunnel.csssave as styles/subway-seat-tunnel.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #C0AA88; /* Khaki */
  --ss-subtext1: #D6C3A0; /* Almond */
  --ss-text: #E9D8B6; /* Parchment */
  --ss-text-hi: #F6EAD1; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 20 13 7;
  --ss-mantle-rgb: 27 18 10;
  --ss-base-rgb: 36 24 14;
  --ss-surface0-rgb: 48 33 21;
  --ss-surface1-rgb: 61 44 29;
  --ss-surface2-rgb: 79 57 39;
  --ss-overlay0-rgb: 116 91 69;
  --ss-overlay1-rgb: 145 119 89;
  --ss-overlay2-rgb: 170 145 113;
  --ss-subtext0-rgb: 192 170 136;
  --ss-subtext1-rgb: 214 195 160;
  --ss-text-rgb: 233 216 182;
  --ss-text-hi-rgb: 246 234 209;
  --ss-yellow-rgb: 243 191 69;
  --ss-yellow-hi-rgb: 255 211 107;
  --ss-orange-rgb: 236 127 49;
  --ss-orange-hi-rgb: 255 157 85;
  --ss-red-rgb: 224 92 69;
  --ss-red-hi-rgb: 255 131 115;
  --ss-green-rgb: 173 185 86;
  --ss-green-hi-rgb: 191 203 99;
  --ss-sage-rgb: 134 173 149;
  --ss-sage-hi-rgb: 165 201 176;
  --ss-denim-rgb: 127 155 174;
  --ss-denim-hi-rgb: 157 182 198;
  --ss-clay-rgb: 244 168 126;
}
subway-seat-enamel.csssave as styles/subway-seat-enamel.css
in your project
/* 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. */

:root {
  color-scheme: light;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #654F3B; /* Enamel subtext0 */
  --ss-subtext1: #54402F; /* Enamel subtext1 */
  --ss-text: #3E2C1E; /* Enamel text */
  --ss-text-hi: #2A1D13; /* Enamel text hi */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 228 216 192;
  --ss-mantle-rgb: 238 228 208;
  --ss-base-rgb: 248 239 223;
  --ss-surface0-rgb: 219 205 179;
  --ss-surface1-rgb: 203 184 152;
  --ss-surface2-rgb: 186 163 128;
  --ss-overlay0-rgb: 165 141 109;
  --ss-overlay1-rgb: 140 114 84;
  --ss-overlay2-rgb: 115 92 68;
  --ss-subtext0-rgb: 101 79 59;
  --ss-subtext1-rgb: 84 64 47;
  --ss-text-rgb: 62 44 30;
  --ss-text-hi-rgb: 42 29 19;
  --ss-yellow-rgb: 151 102 8;
  --ss-yellow-hi-rgb: 169 114 10;
  --ss-orange-rgb: 160 72 0;
  --ss-orange-hi-rgb: 186 77 10;
  --ss-red-rgb: 153 36 24;
  --ss-red-hi-rgb: 191 66 51;
  --ss-green-rgb: 102 116 15;
  --ss-green-hi-rgb: 105 120 19;
  --ss-sage-rgb: 62 113 87;
  --ss-sage-hi-rgb: 76 131 103;
  --ss-denim-rgb: 63 100 128;
  --ss-denim-hi-rgb: 81 119 145;
  --ss-clay-rgb: 132 56 17;
}
london-moquette.csssave as styles/london-moquette.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #A9B2C4; /* Khaki */
  --ss-subtext1: #C1C9D8; /* Almond */
  --ss-text: #D8DEEA; /* Parchment */
  --ss-text-hi: #E9EDF5; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 18 24 38;
  --ss-mantle-rgb: 23 32 50;
  --ss-base-rgb: 30 41 65;
  --ss-surface0-rgb: 38 52 81;
  --ss-surface1-rgb: 48 63 97;
  --ss-surface2-rgb: 61 79 114;
  --ss-overlay0-rgb: 87 102 133;
  --ss-overlay1-rgb: 115 129 156;
  --ss-overlay2-rgb: 143 154 176;
  --ss-subtext0-rgb: 169 178 196;
  --ss-subtext1-rgb: 193 201 216;
  --ss-text-rgb: 216 222 234;
  --ss-text-hi-rgb: 233 237 245;
  --ss-yellow-rgb: 242 192 63;
  --ss-yellow-hi-rgb: 255 211 108;
  --ss-orange-rgb: 222 137 70;
  --ss-orange-hi-rgb: 229 170 127;
  --ss-red-rgb: 219 96 82;
  --ss-red-hi-rgb: 254 132 116;
  --ss-green-rgb: 119 197 129;
  --ss-green-hi-rgb: 154 210 160;
  --ss-sage-rgb: 84 180 181;
  --ss-sage-hi-rgb: 114 209 211;
  --ss-denim-rgb: 117 149 218;
  --ss-denim-hi-rgb: 139 176 255;
  --ss-clay-rgb: 174 158 220;
}
london-deep-level.csssave as styles/london-deep-level.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #A5AEC0; /* Khaki */
  --ss-subtext1: #BEC6D5; /* Almond */
  --ss-text: #D4DAE7; /* Parchment */
  --ss-text-hi: #E7EBF3; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 10 14 24;
  --ss-mantle-rgb: 13 20 33;
  --ss-base-rgb: 18 26 45;
  --ss-surface0-rgb: 26 36 58;
  --ss-surface1-rgb: 35 47 73;
  --ss-surface2-rgb: 48 62 91;
  --ss-overlay0-rgb: 83 97 125;
  --ss-overlay1-rgb: 111 124 151;
  --ss-overlay2-rgb: 139 150 172;
  --ss-subtext0-rgb: 165 174 192;
  --ss-subtext1-rgb: 190 198 213;
  --ss-text-rgb: 212 218 231;
  --ss-text-hi-rgb: 231 235 243;
  --ss-yellow-rgb: 242 192 63;
  --ss-yellow-hi-rgb: 255 211 108;
  --ss-orange-rgb: 222 137 70;
  --ss-orange-hi-rgb: 229 170 127;
  --ss-red-rgb: 219 96 82;
  --ss-red-hi-rgb: 254 132 116;
  --ss-green-rgb: 119 197 129;
  --ss-green-hi-rgb: 154 210 160;
  --ss-sage-rgb: 84 180 181;
  --ss-sage-hi-rgb: 114 209 211;
  --ss-denim-rgb: 117 149 218;
  --ss-denim-hi-rgb: 139 176 255;
  --ss-clay-rgb: 174 158 220;
}
london-portland.csssave as styles/london-portland.css
in your project
/* 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. */

:root {
  color-scheme: light;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #4A5469; /* Portland subtext0 */
  --ss-subtext1: #3C4557; /* Portland subtext1 */
  --ss-text: #293040; /* Portland text */
  --ss-text-hi: #1B202B; /* Portland text hi */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 204 218 242;
  --ss-mantle-rgb: 220 229 247;
  --ss-base-rgb: 232 240 255;
  --ss-surface0-rgb: 191 207 241;
  --ss-surface1-rgb: 168 187 226;
  --ss-surface2-rgb: 147 167 207;
  --ss-overlay0-rgb: 129 146 180;
  --ss-overlay1-rgb: 105 119 148;
  --ss-overlay2-rgb: 85 97 121;
  --ss-subtext0-rgb: 74 84 105;
  --ss-subtext1-rgb: 60 69 87;
  --ss-text-rgb: 41 48 64;
  --ss-text-hi-rgb: 27 32 43;
  --ss-yellow-rgb: 141 108 8;
  --ss-yellow-hi-rgb: 155 119 10;
  --ss-orange-rgb: 165 67 0;
  --ss-orange-hi-rgb: 172 90 0;
  --ss-red-rgb: 155 33 26;
  --ss-red-hi-rgb: 204 46 37;
  --ss-green-rgb: 13 129 49;
  --ss-green-hi-rgb: 0 135 48;
  --ss-sage-rgb: 0 115 118;
  --ss-sage-hi-rgb: 0 134 136;
  --ss-denim-rgb: 0 25 168;
  --ss-denim-hi-rgb: 74 110 189;
  --ss-clay-rgb: 117 95 169;
}
paris-guimard.csssave as styles/paris-guimard.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #A9B5AE; /* Khaki */
  --ss-subtext1: #C2CBC5; /* Almond */
  --ss-text: #D9E1DB; /* Parchment */
  --ss-text-hi: #E9EEEC; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 19 26 23;
  --ss-mantle-rgb: 24 36 29;
  --ss-base-rgb: 30 46 38;
  --ss-surface0-rgb: 38 57 48;
  --ss-surface1-rgb: 48 70 59;
  --ss-surface2-rgb: 62 85 74;
  --ss-overlay0-rgb: 88 107 97;
  --ss-overlay1-rgb: 116 133 124;
  --ss-overlay2-rgb: 144 158 150;
  --ss-subtext0-rgb: 169 181 174;
  --ss-subtext1-rgb: 194 203 197;
  --ss-text-rgb: 217 225 219;
  --ss-text-hi-rgb: 233 238 236;
  --ss-yellow-rgb: 241 191 75;
  --ss-yellow-hi-rgb: 255 213 122;
  --ss-orange-rgb: 202 146 69;
  --ss-orange-hi-rgb: 223 170 97;
  --ss-red-rgb: 199 102 91;
  --ss-red-hi-rgb: 231 135 123;
  --ss-green-rgb: 112 202 169;
  --ss-green-hi-rgb: 137 222 190;
  --ss-sage-rgb: 84 155 159;
  --ss-sage-hi-rgb: 112 181 185;
  --ss-denim-rgb: 112 155 200;
  --ss-denim-hi-rgb: 141 182 226;
  --ss-clay-rgb: 250 180 156;
}
paris-catacombes.csssave as styles/paris-catacombes.css
in your project
/* 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. */

:root {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #A5B1AA; /* Khaki */
  --ss-subtext1: #BFC8C2; /* Almond */
  --ss-text: #D4DDD7; /* Parchment */
  --ss-text-hi: #E7ECEA; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 10 16 13;
  --ss-mantle-rgb: 13 23 17;
  --ss-base-rgb: 18 30 25;
  --ss-surface0-rgb: 26 41 33;
  --ss-surface1-rgb: 36 52 44;
  --ss-surface2-rgb: 49 67 58;
  --ss-overlay0-rgb: 84 101 92;
  --ss-overlay1-rgb: 112 129 120;
  --ss-overlay2-rgb: 140 154 146;
  --ss-subtext0-rgb: 165 177 170;
  --ss-subtext1-rgb: 191 200 194;
  --ss-text-rgb: 212 221 215;
  --ss-text-hi-rgb: 231 236 234;
  --ss-yellow-rgb: 241 191 75;
  --ss-yellow-hi-rgb: 255 213 122;
  --ss-orange-rgb: 202 146 69;
  --ss-orange-hi-rgb: 223 170 97;
  --ss-red-rgb: 199 102 91;
  --ss-red-hi-rgb: 231 135 123;
  --ss-green-rgb: 112 202 169;
  --ss-green-hi-rgb: 137 222 190;
  --ss-sage-rgb: 84 155 159;
  --ss-sage-hi-rgb: 112 181 185;
  --ss-denim-rgb: 112 155 200;
  --ss-denim-hi-rgb: 141 182 226;
  --ss-clay-rgb: 250 180 156;
}
paris-carrelage.csssave as styles/paris-carrelage.css
in your project
/* 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. */

:root {
  color-scheme: light;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #4A5752; /* Carrelage subtext0 */
  --ss-subtext1: #3B4742; /* Carrelage subtext1 */
  --ss-text: #27342F; /* Carrelage text */
  --ss-text-hi: #19221E; /* Carrelage text hi */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 213 219 218;
  --ss-mantle-rgb: 225 230 229;
  --ss-base-rgb: 238 242 241;
  --ss-surface0-rgb: 198 210 207;
  --ss-surface1-rgb: 176 191 187;
  --ss-surface2-rgb: 153 171 166;
  --ss-overlay0-rgb: 133 151 146;
  --ss-overlay1-rgb: 108 124 118;
  --ss-overlay2-rgb: 86 100 95;
  --ss-subtext0-rgb: 74 87 82;
  --ss-subtext1-rgb: 59 71 66;
  --ss-text-rgb: 39 52 47;
  --ss-text-hi-rgb: 25 34 30;
  --ss-yellow-rgb: 145 109 7;
  --ss-yellow-hi-rgb: 160 122 18;
  --ss-orange-rgb: 118 76 0;
  --ss-orange-hi-rgb: 136 90 0;
  --ss-red-rgb: 136 37 30;
  --ss-red-hi-rgb: 172 59 50;
  --ss-green-rgb: 33 131 102;
  --ss-green-hi-rgb: 39 141 110;
  --ss-sage-rgb: 0 98 103;
  --ss-sage-hi-rgb: 2 116 121;
  --ss-denim-rgb: 37 98 155;
  --ss-denim-hi-rgb: 61 117 173;
  --ss-clay-rgb: 179 107 81;
}

This one is shared by all three flavors.

subway-seat-flavors.csssave as styles/subway-seat-flavors.css
in your project
/* Subway Seat — generated from palette.py by build.py. Edit the palette, not this file. */

/* All flavors. Set data-theme="walnut" | "tunnel" | "enamel" on <html> (or any element),
   or leave it off to follow the system: dark → Subway Seat, light → Subway Seat Enamel. */

:root,
[data-theme="walnut"] {
  color-scheme: dark;

  /* Ground */
  --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 */

  /* Text */
  --ss-subtext0: #C4AE8C; /* Khaki */
  --ss-subtext1: #D9C6A3; /* Almond */
  --ss-text: #EDDCBC; /* Parchment */
  --ss-text-hi: #F8ECD4; /* Ivory */

  /* Accents */
  --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 */

  /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
  --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;

  /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
  --ss-crust-rgb: 32 22 14;
  --ss-mantle-rgb: 42 29 19;
  --ss-base-rgb: 54 38 25;
  --ss-surface0-rgb: 67 48 31;
  --ss-surface1-rgb: 81 59 39;
  --ss-surface2-rgb: 99 73 50;
  --ss-overlay0-rgb: 123 96 71;
  --ss-overlay1-rgb: 150 123 92;
  --ss-overlay2-rgb: 174 149 117;
  --ss-subtext0-rgb: 196 174 140;
  --ss-subtext1-rgb: 217 198 163;
  --ss-text-rgb: 237 220 188;
  --ss-text-hi-rgb: 248 236 212;
  --ss-yellow-rgb: 243 191 69;
  --ss-yellow-hi-rgb: 255 211 107;
  --ss-orange-rgb: 236 127 49;
  --ss-orange-hi-rgb: 255 157 85;
  --ss-red-rgb: 224 92 69;
  --ss-red-hi-rgb: 255 131 115;
  --ss-green-rgb: 173 185 86;
  --ss-green-hi-rgb: 191 203 99;
  --ss-sage-rgb: 134 173 149;
  --ss-sage-hi-rgb: 165 201 176;
  --ss-denim-rgb: 127 155 174;
  --ss-denim-hi-rgb: 157 182 198;
  --ss-clay-rgb: 244 168 126;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    /* Ground */
    --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 */

    /* Text */
    --ss-subtext0: #654F3B; /* Enamel subtext0 */
    --ss-subtext1: #54402F; /* Enamel subtext1 */
    --ss-text: #3E2C1E; /* Enamel text */
    --ss-text-hi: #2A1D13; /* Enamel text hi */

    /* Accents */
    --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 */

    /* Diff grounds: -add/-del/-chg for lines, -emph for changed words, -dim for faded diffs */
    --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;

    /* RGB triplets, for rgb(var(--ss-base-rgb) / 0.5) */
    --ss-crust-rgb: 228 216 192;
    --ss-mantle-rgb: 238 228 208;
    --ss-base-rgb: 248 239 223;
    --ss-surface0-rgb: 219 205 179;
    --ss-surface1-rgb: 203 184 152;
    --ss-surface2-rgb: 186 163 128;
    --ss-overlay0-rgb: 165 141 109;
    --ss-overlay1-rgb: 140 114 84;
    --ss-overlay2-rgb: 115 92 68;
    --ss-subtext0-rgb: 101 79 59;
    --ss-subtext1-rgb: 84 64 47;
    --ss-text-rgb: 62 44 30;
    --ss-text-hi-rgb: 42 29 19;
    --ss-yellow-rgb: 151 102 8;
    --ss-yellow-hi-rgb: 169 114 10;
    --ss-orange-rgb: 160 72 0;
    --ss-orange-hi-rgb: 186 77 10;
    --ss-red-rgb: 153 36 24;
    --ss-red-hi-rgb: 191 66 51;
    --ss-green-rgb: 102 116 15;
    --ss-green-hi-rgb: 105 120 19;
    --ss-sage-rgb: 62 113 87;
    --ss-sage-hi-rgb: 76 131 103;

Showing 150 of 747 lines.