Styling

CSS Variables

All shared design tokens live in packages/style/tokens.css (@arbe/style). Use what’s there — don’t invent new variables or hard-code values that overlap with existing ones.

Glyphs

The app uses Berkeley Mono, which includes custom-drawn glyphs well beyond basic ASCII. Use the real Unicode characters rather than ASCII approximations or icon libraries when any of these fit.

Punctuation and symbols

. , : ; … ! ¡ ? ¿ · • * # / \ - — standard punctuation

@ & ¶ § © ® ™ ° ′ ″ | ¦ † ‡ ℮ ¢ — reference marks, legal, units

¤ $ € ₺ ₽ ₹ £ ¥ — currency

≡ + − × ÷ = ≠ > < ≥ ≤ ± ≈ ~ ¬ ^ ∞ ∫ ∏ ∑ √ ∂ µ % — math and operators

‰ ◌ ◊ � — per-mille, combining dotted circle, lozenge, replacement character

Quotes, brackets, dashes

– — ‐ _ — en dash, em dash, hyphen, underscore

( ) { } [ ] — brackets

" " ' ' « » ‹ › " ' — proper typographic quotes and guillemets

‚ „ — low quotes (used in some European languages)

Arrows

↑ ↗ → ↘ ↓ ↙ ← ↖ ↔ ↕ — eight compass directions plus bidirectional

Box drawing and block elements

Full set of fractional blocks, shading, and quadrant characters:

▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▀ ▔ — vertical fractional blocks and upper/lower halves

▏ ▎ ▍ ▌ ▋ ▊ ▉ ▐ ▕ — horizontal fractional blocks

▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟ — quadrant combinations

░ ▒ ▓ — light, medium, heavy shade

■ ▲ ▶ ▼ ◀ △ ▷ ▽ ◁ — filled and outlined geometric shapes

Single-line box drawing (┌ ─ ┐ │ └ ┴ ┘ ┬ ┼ ┤ ├), double-line (╔ ═ ╗ ║ ╚ ╩ ╝ ╦ ╬ ╣ ╠), and diagonal (╲ ╱ ╳).

Usage in the app

Table zebra stripes use ░ (light shade) as a ::after pseudo-element on alternating rows at low opacity — a stippled texture instead of a flat background color. Disclosure toggles (mutations payload expand/collapse) use ▶/▼. Breadcrumb separators use ╱ (box-drawing diagonal). Message separators use a centered · (middot) between items. Navigation back-links use ←. The → arrow appears on forward-pointing links (“What is this? →”). Always use … (U+2026) over ... for ellipsis.

Guidelines

• Component styles go in the component’s <style> block, not in style.css.
• style.css is for resets, base elements, and shared utility classes only.
• No CSS framework or utility-class library.

Forms

Use form > fieldset > label + input markup. Generate unique IDs with $props.id() for label for/input id pairing.