# Low-Tech Web Design (ロー・テック・ウェブ)

> The style starts where Kris De Decker and his collaborators moved Low-tech Magazine onto a solar powered server in 2018 and published how they had built it. Images drop to black and white with four levels of grey, not one web font is loaded, and the height of the colored field behind the page reports how much charge the battery has left. Data weight becomes the first constraint on the layout.

- IndexStyle No.535 — https://indexstyle.org/styles/low-tech-web
- Kind: Style · Family: UI Expression · Era: 2018–
- Mood: Calm, Rebellion, Technology
- Color cues: #FFF5D1 / #162DAB / #D11305 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- Photographs are reduced to black and white with four levels of grey, the dot grain left plainly visible
- The height of the colored field behind the page shows remaining battery charge and falls at night or in bad weather
- No web font is loaded at all, so text arrives in a monospace or the browser's own default
- Each content category paints the page a fixed color, blue #162DAB, red #D11305, or green #006951

## Best used for

- Building an article page an order of magnitude lighter without giving up its photographs, for readers on thin power and thin bandwidth
- Reporting a system's state, such as remaining charge or uptime, through the look of the page itself rather than a readout

## Composition recipe

- Typography & lettering: Load no web font; set in a monospace or whatever the browser already has, and hold the text to a single column around 33rem wide.
- Layout & structure: One column running down the page with no decorative frames; images may exceed the text column in size as long as they weigh less than the original file.
- Material & texture: Convert images to four level black and white dither and add color afterwards with a CSS filter per category, then tie the height of a background field to the power supply.

## What to avoid

Copying the dithered look by running a filter over full resolution photographs leaves the payload untouched, producing a heavy page that only looks light.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] Photographs are reduced to black and white with four levels of grey, the dot grain left plainly visible
- [ ] The height of the colored field behind the page shows remaining battery charge and falls at night or in bad weather
- [ ] No web font is loaded at all, so text arrives in a monospace or the browser's own default
- [ ] Each content category paints the page a fixed color, blue #162DAB, red #D11305, or green #006951
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Solarpunk (ソーラーパンク)** — Refuses to oppose nature and technology, painting a bright future that is tended by hand. → https://indexstyle.org/styles/solarpunk
- **Risograph (リソグラフ)** — Keeps the per-color plates and their happy misregistration, giving each copy its own body heat. → https://indexstyle.org/styles/risograph

## Further study

- 2018年のHow to Build a Low-tech Website?本文（4階調のディザと静的生成の記述）
- 同サイトのCSS変数（地の#FFF5D1と分類ごとの青・赤・緑）
- ディザ表示と元画像を切り替えるトグルで、同じ写真の重さの差を確かめる

## Reference works

- LOW←TECH MAGAZINE — How to Build a Low-tech Website? (2018, Kris De Decker, 一次資料) — https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/

## Source of record

- LOW←TECH MAGAZINE — How to Build a Low-tech Website? (2018, Kris De Decker, 一次資料) — https://solar.lowtechmagazine.com/2018/09/how-to-build-a-low-tech-website/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/low-tech-web
- Image-generation prompt (legally clean): https://indexstyle.org/styles/low-tech-web/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)