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