A single source of truth for Zentru's Bauhaus visual system — primary red/blue/yellow on off-white and ink, sharp corners, heavy borders, geometric sans typography. Use these tokens for every new screen.
The system is intentionally restricted: three primaries, two neutrals, one type pair, zero radius. If a screen needs more, the screen is wrong, not the system.
Never write text-white or bg-[#000]. Use semantic Tailwind classes wired to src/styles.css.
All radius variables are 0px. Don't override with rounded-* on shipped UI.
Default border is border-2 border-ink. Shadows are reserved; structure carries the weight.
Five core colors, mapped onto semantic roles. Use the role (primary, accent, destructive) in components; the core names exist for one-off Bauhaus compositions.
#FBFAF7--bauhaus-paperoklch(0.985 0.003 85)#000000--bauhaus-inkoklch(0 0 0)#0000FF--bauhaus-blueoklch(0.452 0.313 264.05)#FFD700--bauhaus-yellowoklch(0.879 0.171 91.79)#C84A2C--bauhaus-redoklch(0.55 0.18 27)--background= --bauhaus-paper--foreground= --bauhaus-ink--primary= --bauhaus-blue--secondaryoklch(0.93 0.005 85)--mutedoklch(0.93 0.005 85)--accent= --bauhaus-yellow--destructive= --bauhaus-red--cardoklch(1 0 0)Display = Space Grotesk for headlines and brand voice. Body = IBM Plex Sans for prose and UI. Mono = IBM Plex Mono for eyebrows, code, ledger figures.
font-display text-7xl font-boldfont-display text-4xl font-boldfont-display text-2xl font-semiboldtext-lg text-muted-foregroundtext-basetext-sm text-muted-foregroundfont-mono text-xs uppercase tracking-[0.25em]Space Grotesk · 500 / 600 / 700
IBM Plex Sans · 400 / 500 / 600
IBM Plex Mono · 400 / 500
Tailwind's default 4 px scale. Prefer 4, 8, 12, 16, 24, 32, 48, 64. Section padding is typically py-16 to py-24.
p-1 · gap-1 · m-1p-2 · gap-2 · m-2p-3 · gap-3 · m-3p-4 · gap-4 · m-4p-6 · gap-6 · m-6p-8 · gap-8 · m-8p-12 · gap-12 · m-12p-16 · gap-16 · m-16Borders carry the visual weight that shadows would carry elsewhere. The radius scale is overridden to 0 across the board.
border-2 border-inkborder-4 border-inkborder-2 border-dashedAvoid shadow-* utilities except for popovers and modals. Never combine rounded-* with the design system on shipped UI.
One icon library: lucide-react. Icons inherit color from the parent (currentColor) and use a 2 px stroke at 24 px by default. Bump to 32 px for hero metrics; drop to 16 px inside dense rows.
16px20px24px32px1.522.5import { ShieldCheck } from "lucide-react"import { FileText } from "lucide-react"import { Coins } from "lucide-react"import { Scale } from "lucide-react"import { Lock } from "lucide-react"import { ArrowRight } from "lucide-react"Use shadcn primitives from src/components/ui/*. They already consume the semantic tokens — do not re-skin them with raw colors.
Cards default to bg-card with a 2 px ink border. Wrap them in a section with py-16 spacing.
rounded-lg, rounded-full on cards).text-[#0000FF]).bg-primary, bg-accent, bg-card first.border-2 border-ink for structure.font-mono uppercase eyebrows above section headlines.ArrowRight from lucide.LEGAL DISCLAIMER: Zentru is a decentralized administrative software suite. Zentru does not solicit deposits from the public, does not hold or custody client fiat funds, and is not a chartered bankinginstitution, trust company, or licensed money services business (MSB) under the Bank Secrecy Act.
NO LEGAL ADVICE. Zentru is a document assistant and software tool-kit under W. Va. Code §30-2-4; not a law firm; consult a WV-licensed attorney and CPA before relying on any output of this platform.