No. 12 · Editorial & content · Rate it
Raster
Swiss grid system — black, white, one red, giant grotesk numerals and a visible 12-column grid
The International Typographic Style rebuilt for the web: pure white, black rules, one signal red, a strict 12-column grid you can reveal with a keystroke, flush-left headlines set huge and tight, label/content splits, geometric poster compositions and square controls. Everything aligns; nothing is decorated. The operations dashboard uses the same discipline: giant numerals, timed-entry slot grids, ruled tables and straight-line charts.
Best for
- Museums, galleries, festivals and cultural programs
- Architecture, design and type studios
- Schedules, timetables and transit information
- Operations dashboards that must read at a glance
Not ideal for
- Warm, emotional consumer brands
- Playful products for kids
- Products that need lots of imagery and color
Signature moves
- A visible 12-column grid overlay toggled with G
- Display type 56–168px, weight 700, tracking −0.045em, flush-left
- Label column (3) beside content column (9) under a 2px black rule
- Giant red numerals for dates and key figures
- Geometric posters: discs and bars in red, black and white
- Square, rule-based controls; red underline tabs; no radius, no shadow
Try it with another brand color
Opens the demo with only --brand changed. The style should still read as Raster.
Install this skill
/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install raster@tastefolionpx skills add tastefolio/tastefolio.github.io --skill rastercurl -L https://tastefolio.github.io/downloads/raster.zip -o raster.zip
unzip raster.zip -d .claude/skills/Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/raster/SKILL.md for every UI change."Files
Rate this style
Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.