ChessTexas

Design reference

The four designs

Each look has a number. Say the number and I will know exactly which one you mean. Every card below is rendered in its own palette, so this page shows all four at once whatever the site is currently set to.

Switch with the circle in the bottom-left corner of any page, or press D (Shift+D to go back). A link ending ?design=3 opens the site in that look for whoever you send it to.

1

Editorial

White ground, black ink, one monospace family doing everything, and small caps labels wrapped in brackets.

Type: System monospace (SF Mono, Menlo, Consolas).
Use it for: The default. Dense listings, directories, anything that has to look precise rather than warm.

Label See the site in it

2

Ink

The same typography inverted onto near-black. The footer band flips to light, so the page reads as one long negative.

Type: System monospace, as Editorial.
Use it for: Evening reading, projected screens, and anything you want to feel like a terminal without the cliché.

Label See the site in it

3

Grid

International typographic style: neutral grotesque, off-white stock, one red used sparingly, headlines set tight and heavy.

Type: Helvetica Neue / Inter / system sans.
Use it for: Landing pages and anything that needs to feel confident at a glance. The loudest of the four.

Label See the site in it

4

Journal

Warm paper stock, serif display, a longer measure and softer rules. Labels stay monospace for contrast.

Type: Iowan Old Style / Palatino / Georgia, with a mono label face.
Use it for: Long prose — a guide, an explainer, a puzzle write-up you actually want read to the end.

Label See the site in it

Taking one somewhere else

The stylesheet is token-driven: the blocks below are the entire definition of a look. Nothing else in style.css hard-codes a color, a typeface or a radius — every rule reads a custom property. To port a design into another site, paste its block at the top of that site's CSS and write the rules against the same token names.

The full token list, with what each one controls, is in the comment at the head of public/style.css in the ChessTexas repo.

1 · Editorial — data-theme="mono"

:root {
  color-scheme: light;
  --bg:        #ffffff;
  --bg2:       #fafafa;
  --hover:     #f4f4f4;
  --line:      #dcdcdc;
  --rule:      #000000;      /* the emphatic hairline that opens a section */
  --ink:       #000000;
  --ink2:      #3a3a3a;
  --muted:     #8c8c8c;
  --accent:    #000000;

  --foot-bg:   #000000;
  --foot-ink:  #ffffff;
  --foot-mut:  #9a9a9a;
  --foot-line: #2a2a2a;

  --font:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --display:   var(--font);
  --label:     var(--font);

  --body-size:   13px;
  --body-lh:     1.75;
  --body-track:  .01em;

  --h1-size:   clamp(2.1rem, 5.2vw, 4.2rem);
  --h1-track:  -.03em;
  --h1-weight: 400;
  --h1-lh:     1.15;
  --h2-size:   clamp(1.05rem, 1.6vw, 1.3rem);
  --h2-weight: 400;
  --h2-track:  -.01em;

  --lbl-case:  uppercase;
  --lbl-track: .18em;
  --lbl-size:  .68rem;
  --lbl-weight:400;
  --br-o:      "[";
  --br-c:      "]";

  --r:         0px;
  --w:         1360px;
  --gap:       80px;         /* rhythm between major bands */
}

2 · Ink — data-theme="ink"

[data-theme="ink"] {
  color-scheme: dark;
  --bg:        #0b0b0c;
  --bg2:       #121213;
  --hover:     #17171a;
  --line:      #2e2e32;
  --rule:      #f2f2f2;
  --ink:       #f2f2f2;
  --ink2:      #c2c2c6;
  --muted:     #7c7c84;
  --accent:    #f2f2f2;

  --foot-bg:   #f2f2f2;
  --foot-ink:  #0b0b0c;
  --foot-mut:  #5e5e66;
  --foot-line: #d2d2d6;
}

3 · Grid — data-theme="swiss"

[data-theme="swiss"] {
  color-scheme: light;
  --bg:        #f4f4f1;
  --bg2:       #ecece8;
  --hover:     #e6e6e1;
  --line:      #d2d2cc;
  --rule:      #111111;
  --ink:       #111111;
  --ink2:      #3d3d3a;
  --muted:     #86867e;
  --accent:    #d8261c;

  --foot-bg:   #111111;
  --foot-ink:  #f4f4f1;
  --foot-mut:  #94948c;
  --foot-line: #333330;

  --font:      "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, Arial, sans-serif;
  --display:   var(--font);
  --label:     var(--font);

  --body-size:   14.5px;
  --body-lh:     1.65;
  --body-track:  0;

  --h1-size:   clamp(2.4rem, 6.4vw, 5.4rem);
  --h1-track:  -.045em;
  --h1-weight: 700;
  --h1-lh:     .96;
  --h2-size:   clamp(1.1rem, 1.8vw, 1.5rem);
  --h2-weight: 700;
  --h2-track:  -.02em;

  --lbl-case:  uppercase;
  --lbl-track: .1em;
  --lbl-size:  .66rem;
  --lbl-weight:700;
  --br-o:      "";
  --br-c:      "";
}

4 · Journal — data-theme="paper"

[data-theme="paper"] {
  color-scheme: light;
  --bg:        #f7f3ea;
  --bg2:       #f1ece0;
  --hover:     #ece5d6;
  --line:      #ddd3c0;
  --rule:      #1d1a16;
  --ink:       #1d1a16;
  --ink2:      #453f36;
  --muted:     #8a8073;
  --accent:    #93411c;

  --foot-bg:   #1d1a16;
  --foot-ink:  #f7f3ea;
  --foot-mut:  #9b9184;
  --foot-line: #3a352d;

  --font:      "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --display:   var(--font);
  --label:     ui-monospace, SFMono-Regular, Menlo, monospace;

  --body-size:   16px;
  --body-lh:     1.72;
  --body-track:  .002em;

  --h1-size:   clamp(2.4rem, 6vw, 4.8rem);
  --h1-track:  -.02em;
  --h1-weight: 400;
  --h1-lh:     1.06;
  --h2-size:   clamp(1.2rem, 1.9vw, 1.6rem);
  --h2-weight: 400;
  --h2-track:  -.01em;

  --lbl-case:  uppercase;
  --lbl-track: .16em;
  --lbl-size:  .64rem;
  --lbl-weight:400;
  --br-o:      "";
  --br-c:      "";
  --r:         2px;
}
Editorial