134 lines
4.1 KiB
Markdown
134 lines
4.1 KiB
Markdown
---
|
||
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.
|