Site themes, colors, and delightful functions
Since this is my personal space on the web and not tied to any of the companies I run or work within, I'd like to keep the interface and feeling aligned with the Indie Web movement that I've appreciated for close to 30 years.
The ability for anyone to publish on the Internet — visible to all, with minimal hurdles and cost — is truly remarkable. Few things empower people to express their thoughts more than the ability to reach people in all parts of the world.
This site has four distinct themes as briefly described on the start page:
An experiment in style. Set your preferred theme and color, from high fidelity to low.
There are four different themes, each with three different color settings, white, color and black, on this site. You decide which one you prefer with the icons in the top center.
The classic mode, the C, represents the old serif based site with some textures. The font in this theme is Charter, and the whole look is more sophisticated.
The M is the Monospace theme, where the content is displayed using the fixed-width font Commit Mono and gives it the feel of a text-based computer interface.
The S, without serifs, represents the Swiss design-inspired theme set in the Inter font. This plays on the fact that Sweden and Switzerland sometimes get mixed up in global references. So instead of portraying Swedish white, clean minimalism which we are famous for, I chose a grid and type-inspired Swiss design.
The last icon is an 8 representing the 8-bit font used on old IBM PCs. A 286 PC running DOS was my introduction to computers as a kid, and something about that font makes me feel cozy inside.
The idea was to go from a texture intense version, to a cleaner flat design, via the monospaced world, to the old retro DOS-inspired PC of the 80s and 90s.
Features
I've also added a little feature to each theme:
On the Serif theme you can toggle the fine-tuned typographic styles on and off, just to emphasize the importance of typography and how much good typography can improve the experience.
Sans-serif theme: coming soon.
For the Monospaced theme you can select the font from a list of 10 curated open-source typefaces. There are so many good fonts out there and they all kind of look the same, yet each has so much personality that the experience will differ tremendously based on the font choice. I'm fascinated that the small and subtle differences in this constrained format still make such an impact.
For the 8 bit DOS theme you can go all-in on DOS by turning on the EGA simulator, viewing the site in an 80 × 25 character viewport. Use the keyboard to get around!
Serif
Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Serif
Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Serif
Charter — with Bitstream Charter, Sitka Text, and Cambria as fallbacks.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Sans-serif
Inter (variable) — with Helvetica as a system fallback.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Sans-serif
Inter (variable) — with Helvetica as a system fallback.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Sans-serif
Inter (variable) — with Helvetica as a system fallback.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Monospace
Commit Mono (variable) — single size, hierarchy through weight and spacing.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Monospace
Commit Mono (variable) — single size, hierarchy through weight and spacing.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
Monospace
Commit Mono (variable) — single size, hierarchy through weight and spacing.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
8bit
IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
8bit
IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.
8bit
IBM VGA 8×16 — the bitmap font that ran on every PC clone of the late 1980s. Blockzone joins it for box-drawing characters.
The quick brown fox
Pack my box with five dozen liquor jugs. Bold weight, italic style, and an inline link. Numerals 0123456789.