Bauhaus · מערכת עיצוב DESIGN.md | Agent Skills IL | Skills IL

civic · quiet · authoritative · editorial

Bauhaus

White City modernism. One accent only, otherwise ruthlessly flat.

✓ lint-clean✓ WCAG AAv0.1.0Frank Ruhl LibrePublic SansHeebo

Install

npx skills-il add-design baniyan

Live preview · Kitchen sink

Native preview. Accessibility toggles affect the page chrome only, not the preview.

Bauhaus · Modernism · Quiet

Built to stay

A system that is flat on purpose, with typography that holds a reader at the top of the page and a single accent used carefully. Choose Bauhaus for surfaces that should feel permanent, not trendy.

Palette

accent

#A13A2A

primary

#1A1A18

surface

#F3EEE3

on-accent

#F3EEE3

on-primary

#F3EEE3

on-surface

#1A1A18

surface-container

#EAE3D2

Type scale

Display

Bauhaus

Headline large

Design systems for Hebrew

Headline medium

Typography with intent

Body large

Opening paragraph with generous leading for Hebrew reading.

Body medium

The text that carries most of the page.

Body small

Metadata, captions, footnotes.

All capsCategory · Tag · Reply

Components

Email address

We use this only to confirm your signup.

Sample card

Surface-container background, 1 pixel seam, 4 pixel radius, no shadow. It sits on the page without shouting.

Overview

Architectural minimalism meets journalistic gravitas. The UI evokes a premium matte finish, a contemporary gallery wall, the White City's stucco facades at noon. Use Bauhaus for civic platforms, editorial products, government services, and any surface that needs to feel permanent instead of trendy.

Typography

Two families, chosen to survive the Hebrew to Latin handoff without kerning damage. - **Display and headlines** pair Public Sans (Latin) with Frank Ruhl Libre (Hebrew). Both have a high x-height and matching optical weight so the system survives the script handoff without kerning damage. - **Body** uses Heebo for both locales. Heebo is a single family with excellent Hebrew and Latin glyphs, avoiding the cost of loading a second body family. Leading runs generous (1.55 to 1.6 for body) to accommodate Hebrew descenders without tightening Latin lines.

Do's and Don'ts

Do pair headlines with generous whitespace and hold the reader at the top. Do let the accent rest. One CTA per viewport. Do use all-caps labels sparingly, only for category chips and overlines. Don't add a secondary accent. Demote actions instead. Don't use shadows, gradients, or glass. This system is flat by definition. Don't reach for emoji or illustration for decoration. Let the type carry the mood.

Localization notes

Stacked font families put Latin first in DESIGN.md and Hebrew first in DESIGN_HE.md, so each locale renders in its native script without browser glyph substitution. - **Digits**: use the Latin digit set for prices, dates, and phone numbers in both locales. Wrap mixed-language runs in `<bdi>` or set `unicode-bidi: plaintext` so "1,200 ₪" stays readable inside RTL flow. - **Nikkud**: Bauhaus is not designed to carry nikkud. If niqqud is required for religious or educational content, switch to the Kodesh system or override line-height to 1.9. - **Punctuation**: prefer Hebrew gershayim (״) and geresh (׳) over ASCII double/single quotes in HE copy. ASCII stays in EN. - **OpenType**: no special features required. Public Sans and Frank Ruhl ligate automatically at display sizes.

FAQ

When should I use Bauhaus?

What exactly is a DESIGN.md file?

DESIGN.md is a Google Labs format for describing a visual identity to coding agents. The file has YAML front matter with design tokens (colors, typography, components) plus prose explaining the rationale. Coding agents like Claude Code or Cursor read the file and produce UI that matches the system.

How do I install the system in a project?

Run `npx skills-il add-design <slug>` at the root of your project, and the CLI writes DESIGN.md and DESIGN_HE.md. You can also copy the content directly from the page or paste the pre-built agent prompt from the "Agent prompt" tab.

How does the system handle Hebrew and RTL?

Two files ship in parallel: DESIGN.md leads with Latin fonts, DESIGN_HE.md leads with Hebrew fonts. Every other token is identical, so an agent can pick the variant appropriate to each component. The Localization section documents the specifics (digit direction, nikkud, punctuation swaps).