botsu.app/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	BOTSU Monochrome	Minimal brutalist black-and-white workspace with adjustable borders, typography, and restrained glass surfaces.	primary secondary tertiary neutral muted line #F5F5F5 #111111 #FFFFFF #050505 #A3A3A3 #3A3A3A	heading body label fontFamily fontSize fontWeight lineHeight letterSpacing Inter 2rem 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 1rem 400 1.5 0em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 0.75rem 600 1.2 0.08em	none default soft 0px 2px 8px	xs sm md lg xl 4px 8px 16px 24px 40px	page muted-label divider button-primary button-secondary surface backgroundColor textColor {colors.neutral} {colors.primary} backgroundColor textColor {colors.neutral} {colors.muted} backgroundColor textColor height {colors.line} {colors.primary} 1px backgroundColor textColor rounded padding {colors.primary} {colors.secondary} {rounded.default} 12px backgroundColor textColor rounded padding {colors.secondary} {colors.primary} {rounded.default} 12px backgroundColor textColor rounded padding {colors.secondary} {colors.primary} {rounded.default} 16px

Overview

BOTSU begins in black and white. Its structure is minimalist and brutalist: visible boundaries, direct hierarchy, compact labels, and almost-square shapes. Glass is a restrained material treatment for layered surfaces, never a visual identity by itself and never applied to text.

The runtime theme is user-adjustable. Safe controls expose border width from 0–4 px, radius from 0–24 px, glass opacity from 0–1, backdrop blur from 0–40 px, a validated six-digit hexadecimal accent, and a finite font list. The default remains 1 px borders, 2 px radius, 0.08 glass opacity, and 12 px blur.

Colors

The dark default uses #050505 as the canvas and #F5F5F5 for text. The light counterpart uses #FAFAFA and #111111. Accent color is sparse and is reserved for focus, active presence, selection, and the single primary action in a region. The initial accent is white so the product remains monochrome.

Semantic success, warning, and critical colors may communicate status, but must not become decorative theme colors. Meaning is always reinforced with an icon or text.

Typography

Inter is the default because Cinny already ships it. Users may switch to the system stack or IBM Plex Mono when that font is available. Typography remains high-contrast and functional; uppercase is limited to short labels.

Layout

Use a visible grid, deliberate alignment, and generous empty space around compact controls. Prefer borders over floating shadows. Do not stack several translucent layers where text or cursors become difficult to read.

Elevation & Depth

A glass surface uses configurable opacity and backdrop blur with one subtle shadow. Browsers without backdrop filtering receive an opaque surface. prefers-reduced-transparency disables glass automatically.

Shapes

The default radius is 2 px. Larger radii are user preference, not the base brand. Interactive targets remain at least 44 px even when their visual shape is compact.

Components

Buttons use explicit borders and a visible :focus-visible outline. Surfaces inherit all adjustable values through --botsu-* CSS custom properties. Avatars and remote cursors may carry accent colors while surrounding chrome stays monochrome.

Do's and Don'ts

• Do keep the default interface black, white, and structurally direct.
• Do preserve WCAG AAA contrast for primary text on the default canvas.
• Do let members tune borders, radius, glass, blur, font, and accent safely.
• Do provide opaque and reduced-motion fallbacks.
• Don't blur text, menus, or cursor labels.
• Don't use accent color on every control.
• Don't hide hierarchy behind shadow-only cards.
• Don't accept arbitrary CSS strings from profile or theme settings.