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
@import url("subway-seat.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("subway-seat-tunnel.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("subway-seat-enamel.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("london-moquette.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("london-deep-level.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("london-portland.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("paris-guimard.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@import url("paris-catacombes.css");
body {
background: var(--ss-base);
color: var(--ss-text);
}
.scrim {
background: rgb(var(--ss-crust-rgb) / 0.8);
}@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.
@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. */The 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)subway-seat.csssave as styles/subway-seat.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.cssin 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.