# Design styles

> 6 design-style recipes of @codeatlasdev/ui, each a live page rendered in its own style. A recipe is one call: `designStyle("<id>")`. Page: https://ui.codeatlas.com.br/styles/. Index: https://ui.codeatlas.com.br/llms.txt

How to read it: a recipe is a proposal built from the library's design knobs, not a measurement of any named visual language. Accessibility claims name their source and strength; none says a style performs better. Method: https://ui.codeatlas.com.br/llms/concepts/evidence.txt

## Swiss

A grid, hairlines, square corners and no shadows: order and legibility first.

- Recipe: `designStyle("swiss")`. File: https://ui.codeatlas.com.br/llms/styles/swiss.txt. Page: https://ui.codeatlas.com.br/styles/swiss/.
- Fits: Tools, documentation, admin screens, reports and anything dense where people scan and compare. It tends to fit teams that want the interface to disappear behind the content.
- Avoid when: A product that has to be remembered for its look, a children's or entertainment audience, or a screen where one hero moment has to carry emotion.
- Accessibility to check: Hairlines can fall below the contrast a control needs; Tight, uppercase labels get hard to read when a user widens the spacing.

## Editorial

A serif display face, a long line and plenty of space: reading comes first.

- Recipe: `designStyle("editorial")`. File: https://ui.codeatlas.com.br/llms/styles/editorial.txt. Page: https://ui.codeatlas.com.br/styles/editorial/.
- Fits: Content-led products: publications, documentation, case studies, portfolios, reports and pricing or product pages that tell a story before they sell.
- Avoid when: Dense operational tools, small-screen data entry, or anywhere a user scans for a value rather than reads.
- Accessibility to check: Airy spacing and a wide display scale can break at large text sizes; A quiet page can hide the one action that matters.

## Brutalism

Thick strokes, hard offset shadows, flat fills and loud type.

- Recipe: `designStyle("brutalism")`. File: https://ui.codeatlas.com.br/llms/styles/brutalism.txt. Page: https://ui.codeatlas.com.br/styles/brutalism/.
- Fits: Creator tools, campaigns, portfolios, onboarding and landing moments where being remembered matters more than long-session comfort.
- Avoid when: Dense data entry, finance and health screens, and any product used for hours a day.
- Accessibility to check: Saturated fills with white or black text can miss the contrast ratio; Constant strong stimulation is tiring in long sessions; A hard shadow can be the only cue for a pressed button.

## Sketchbook

A journal on grid paper: serif display, square outlined cards, hand-drawn marks.

- Recipe: `designStyle("sketchbook")`. File: https://ui.codeatlas.com.br/llms/styles/sketchbook.txt. Page: https://ui.codeatlas.com.br/styles/sketchbook/.
- Fits: Developer tools, documentation, learning products, portfolios and products for people who make things, where warmth and structure should coexist.
- Avoid when: Formal institutions, finance, or any context where a hand-made look would read as unserious.
- Accessibility to check: A busy background pattern can reduce how readable text over it is; Decorative marks must not carry meaning.

## Glassmorphism

Translucent, blurred layers over a colourful backdrop, with thin rims and soft shadows.

- Recipe: `designStyle("glassmorphism")`. File: https://ui.codeatlas.com.br/llms/styles/glassmorphism.txt. Page: https://ui.codeatlas.com.br/styles/glassmorphism/.
- Fits: Media, dashboards over a hero visual, landing pages and overlays: a few floating layers over rich content.
- Avoid when: Dense tables, long text, low-end devices, or any screen where legibility cannot be guaranteed over the backdrop.
- Accessibility to check: Text contrast depends on what is behind the panel, so it changes as content scrolls; A faint rim may not be enough to identify a control; Platform guidance treats glass as a separate control layer, not as a surface for content.

## Terminal

Monospace everywhere, square cells, outlined panels and instant motion.

- Recipe: `designStyle("terminal")`. File: https://ui.codeatlas.com.br/llms/styles/terminal.txt. Page: https://ui.codeatlas.com.br/styles/terminal/.
- Fits: Developer tools, logs, consoles, infrastructure dashboards and documentation for engineers.
- Avoid when: Consumer onboarding, content for general audiences, or anywhere people are not used to reading fixed-width text.
- Accessibility to check: Compact density can push targets below the minimum pointer size; Removing all motion is safe, but do not remove state feedback with it.