Zentru
Internal · Design System v1

Brand style guide.

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.

01 — Foundations

Bauhaus, by conviction

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.

Principle
Tokens, not hexes

Never write text-white or bg-[#000]. Use semantic Tailwind classes wired to src/styles.css.

Principle
Sharp corners

All radius variables are 0px. Don't override with rounded-* on shipped UI.

Principle
Heavy ink borders

Default border is border-2 border-ink. Shadows are reserved; structure carries the weight.

02 — Color

Palette & semantic tokens

Five core colors, mapped onto semantic roles. Use the role (primary, accent, destructive) in components; the core names exist for one-off Bauhaus compositions.

Core palette

Bauhaus Paper
#FBFAF7
--bauhaus-paper
oklch(0.985 0.003 85)
Page background. Warm off-white.
Bauhaus Ink
#000000
--bauhaus-ink
oklch(0 0 0)
Foreground text, borders, rules.
Bauhaus Blue
#0000FF
--bauhaus-blue
oklch(0.452 0.313 264.05)
Primary. CTAs, eyebrows, focused links.
Bauhaus Yellow
#FFD700
--bauhaus-yellow
oklch(0.879 0.171 91.79)
Accent, highlight, focus ring. Use sparingly.
Bauhaus Red
#C84A2C
--bauhaus-red
oklch(0.55 0.18 27)
Destructive only. Never decorative.

Semantic tokens

background
--background
= --bauhaus-paper
Page surface.
foreground
--foreground
= --bauhaus-ink
Body text on background.
primary
--primary
= --bauhaus-blue
Primary actions.
secondary
--secondary
oklch(0.93 0.005 85)
Quiet surface, secondary buttons.
muted
--muted
oklch(0.93 0.005 85)
Subdued zones, table headers.
accent
--accent
= --bauhaus-yellow
Highlight blocks, badges.
destructive
--destructive
= --bauhaus-red
Delete / dangerous actions.
card
--card
oklch(1 0 0)
Elevated card surface.
03 — Typography

Space Grotesk · IBM Plex Sans · IBM Plex Mono

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.

Display / H1
font-display text-7xl font-bold
The quick brown fox jumps over $1,000.00
Display / H2
font-display text-4xl font-bold
The quick brown fox jumps over $1,000.00
Display / H3
font-display text-2xl font-semibold
The quick brown fox jumps over $1,000.00
Body / Lead
text-lg text-muted-foreground
The quick brown fox jumps over $1,000.00
Body / Base
text-base
The quick brown fox jumps over $1,000.00
Body / Small
text-sm text-muted-foreground
The quick brown fox jumps over $1,000.00
Eyebrow / Mono
font-mono text-xs uppercase tracking-[0.25em]
The quick brown fox jumps over $1,000.00
Display
font-display
Aa Bb 0123

Space Grotesk · 500 / 600 / 700

Body
font-sans (default)
Aa Bb 0123

IBM Plex Sans · 400 / 500 / 600

Mono
font-mono
Aa Bb 0123

IBM Plex Mono · 400 / 500

04 — Spacing

4 px base scale

Tailwind's default 4 px scale. Prefer 4, 8, 12, 16, 24, 32, 48, 64. Section padding is typically py-16 to py-24.

4px
p-1 · gap-1 · m-1
8px
p-2 · gap-2 · m-2
12px
p-3 · gap-3 · m-3
16px
p-4 · gap-4 · m-4
24px
p-6 · gap-6 · m-6
32px
p-8 · gap-8 · m-8
48px
p-12 · gap-12 · m-12
64px
p-16 · gap-16 · m-16
05 — Borders & shape

2 px ink, zero radius

Borders carry the visual weight that shadows would carry elsewhere. The radius scale is overridden to 0 across the board.

Default
border-2 border-ink
Emphasis
border-4 border-ink
Pending
border-2 border-dashed

Avoid shadow-* utilities except for popovers and modals. Never combine rounded-* with the design system on shipped UI.

06 — Iconography

lucide-react, currentColor

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.

Sizes
16px
20px
24px
32px
Stroke weight
1.5
2
2.5
ShieldCheck
import { ShieldCheck } from "lucide-react"
FileText
import { FileText } from "lucide-react"
Coins
import { Coins } from "lucide-react"
Scale
import { Scale } from "lucide-react"
Lock
import { Lock } from "lucide-react"
ArrowRight
import { ArrowRight } from "lucide-react"
07 — Components

Building blocks

Use shadcn primitives from src/components/ui/*. They already consume the semantic tokens — do not re-skin them with raw colors.

Buttons
Badges
Default
Secondary
Outline
Destructive
Input
Card

Cards default to bg-card with a 2 px ink border. Wrap them in a section with py-16 spacing.

08 — Don'ts

What breaks the system

Don't
  • Generic purple-on-white SaaS gradients.
  • Soft drop shadows in place of borders.
  • Rounded corners (rounded-lg, rounded-full on cards).
  • Raw hex values in JSX (text-[#0000FF]).
  • Mixing more than one icon library.
  • Using red for anything other than destructive actions.
Do
  • Reach for bg-primary, bg-accent, bg-card first.
  • Lean on border-2 border-ink for structure.
  • Use font-mono uppercase eyebrows above section headlines.
  • Keep yellow as a highlight, not a fill for big surfaces.
  • Pair every CTA with a clear ArrowRight from lucide.

NO LEGAL ADVICE. Zentru is a document assistant and software tool-kit under W. Va. Code §30-2-4. We are not a law firm and do not provide legal or tax advice. Generated documents must be reviewed by a WV-licensed attorney before they carry legal effect. Consult a licensed attorney and CPA before relying on any output of this platform.