Overview

Lerbb Design System

A unified visual language for every Lerbb product — Docs, Account, Notes, and beyond. Built on CSS custom properties (design tokens), the Inter typeface, and a four-colour brand palette. Designed for consistency, accessibility, and dark-first aesthetics.

✦

AI / Vibe-coding guide: Every design decision in Lerbb UI is encoded as a CSS custom property. Start any component by pasting the :root token block (see CSS Variables). All colours, spacing, radius, shadow and motion values are referenced by token — never hardcode #4C8DFF, always write var(--accent). The sidebar shows every available section. Ask your AI assistant to "implement a Lerbb-style button using the design tokens from this doc" and it will produce consistent output.

🎨

4 brand colours

Blue, Green, Amber, Violet — with light and dark variants

🌙

Dark-first

Dark is the default theme. Light mode is fully supported via data-theme="light"

⚡

CSS tokens

Every decision is a CSS variable. Theme switching with zero JS

🔤

Inter typeface

One font family, one weight axis. Clean and highly legible

Foundations

Brand Principles

Everything we build expresses four core values. These aren't aspirational — they are constraints that shape every design decision.

🔒

Private by default

Encryption indicators are visible, not buried. Security isn't a feature — it's the foundation.

⚡

Effortless speed

Every interaction should feel immediate. Optimistic UI, instant feedback, no perceived latency.

✦

Honest clarity

No dark patterns. Copy is direct. Destructive actions require confirmation. Storage limits are visible.

🌈

Accessible for all

WCAG AA minimum contrast everywhere. Keyboard navigable. Touch targets ≥ 44×44px.

AI-Friendly

LLM / Vibe-Coding Guide

This design system is structured so AI assistants can build consistent Lerbb UI with a single context paste. Here's how to get the best results.

💡

Quick start: Copy the entire :root { … } CSS token block from this page and paste it at the top of your prompt. Then describe the component you want: "Build a Lerbb-style sign-in card using these design tokens, dark theme, Inter font."

Prompting patterns that work

// Pattern 1 — Reference tokens by name
"Use var(--accent) for the primary button, var(--surface) for the card background,
 var(--radius-xl) for card corners, and var(--shadow-md) for elevation."

// Pattern 2 — Describe Lerbb component semantics
"Build a Lerbb section-card with a section-header row, row items with row-left/row-value
 structure, and btn-edit buttons on the right side."

// Pattern 3 — Specify theme context
"The component should work in both dark (default) and light ([data-theme='light']) modes.
 Use only CSS custom properties for all colour references."

// Pattern 4 — Request the full token set in output
"When you write CSS, use Lerbb design tokens. List any new tokens you introduce
 so I can add them to the :root block."
  

What this doc provides for LLMs

Section	What AI gets from it
Design Tokens	Machine-readable CSS variable names, values, and purpose
Component demos	HTML structure + class naming conventions to replicate
Code snippets	Copy-pasteable CSS + React component stubs
Do/Don't examples	Guardrails that prevent common mistakes
Content style	Voice, tone, and copy patterns for microcopy generation

Foundations

Colour Palette

Four brand colours, each with a full range of tints and semantics. All colours are defined as CSS custom properties and automatically adapt between dark and light themes.

Brand colours

Blue

#4C8DFF / var(--blue)

Green

#38B27B / var(--green)

Amber

#DFA62A / var(--amber)

Violet

#7A6FF0 / var(--violet)

Colour ramps (hover for hex)

Blue

Green

Amber

Violet

Semantic colours

Token	Dark value	Light value	Usage
`--danger`	#f28b82	#c5221f	Errors, destructive actions
`--success`	#38B27B	#2a8a5e	Confirmations, verified states
`--warning`	#DFA62A	#B07D10	Warnings, storage usage alerts
`--accent`	#4C8DFF	#4C8DFF	Primary interactive colour

Foundations

Dark Mode Colours

Dark is the default theme for all Lerbb apps. Apply data-theme="light" on the root element to switch. Never use hardcoded colour values — always use tokens.

✓ Do

Use var(--bg), var(--surface), var(--text)

✗ Don't

Hardcode #1a1c1e or #e3e5e8 — they won't adapt to light mode

Token	Dark	Light	Purpose
`--bg`	#1a1c1e	#eef2f8	Page / outermost background
`--bg-alt`	#1f2124	#e6ecf5	Alternate background for stripes
`--surface`	#26292d	#ffffff	Card, modal, panel background
`--surface2`	#2e3135	#eef2f8	Input fields, inner card areas
`--surface3`	#363a3e	#e3e8f0	Hover states, active pills
`--border`	rgba(255,255,255,.08)	rgba(0,0,0,.08)	Default border
`--text`	#e3e5e8	#1a1c1e	Primary body text
`--text-muted`	#8f9399	#5f6368	Secondary / helper text
`--text-dim`	#b5b9bf	#3c4043	Labels, metadata

Foundations

Typography Scale

Lerbb uses Inter exclusively. It is loaded from rsms.me/inter/inter.css which enables variable font features. One family, full weight axis, zero cognitive overhead.

/* Load Inter — required in every Lerbb page */
<link rel="preconnect" href="https://rsms.me/" />
<link href="https://rsms.me/inter/inter.css" rel="stylesheet" />

/* Apply globally */
:root {
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
  

Display — 2.4rem / 700 / -0.04em

The quick brown fox

H1 — 2rem / 700 / -0.04em

Page title heading

H2 — 1.5rem / 600 / -0.03em

Section heading level 2

H3 — 1.1rem / 600 / -0.02em

Sub-section heading

Body — 1rem / 400 / normal / 1.7 lh

Regular body text. Lerbb uses 1rem (16px) at 1.7 line-height for comfortable reading in long-form content areas such as documents, settings pages, and help text.

Small — 0.875rem / 400 / normal

Small body text for secondary descriptions, timestamps, and labels

Micro — 0.72rem / 700 / +0.06em — uppercase labels

Section label · Field label · Menu category

Code — 0.85rem / 400 — SF Mono / Fira Code / Menlo

var(--accent) = #4C8DFF

Letter-spacing rules

Style	letter-spacing	Notes
Display / H1	-0.04em	Tight — creates weight at large sizes
H2 / H3	-0.02em to -0.03em	Slightly tight
Body	normal (0)	Never touch body letter-spacing
ALL CAPS labels	+0.06em to +0.1em	Always add tracking to uppercase text
Monospace	normal	Never adjust mono tracking

Foundations

Spacing Scale

A 4px base grid. All spacing values are multiples of 4. Use the token names in CSS — never magic pixel values.

--space-14pxIcon gap, micro insets

--space-28pxTight row gap, badge padding

--space-312pxInner card padding (compact)

--space-416pxStandard row gap

--space-520pxCard padding (default)

--space-624pxSection padding, modal body gap

--space-832pxPage gutter, section margin

--space-1040pxSection separator

--space-1248pxPage top padding

--space-1664pxMajor section gap

Foundations

Border Radius Scale

--radius-sm6px

Chips, small badges

--radius-md10px

Buttons, inputs

--radius-lg14px

Inline forms, dropdowns

--radius-xl18px

Cards, modals

--radius-2xl24px

Sign-in card, plan card

--radius-full999px

Pills, toggles, avatars

Foundations

Shadows

Lerbb uses shadows sparingly. In dark mode, depth is achieved via surface layering, not heavy shadows. Shadows are most visible in light mode.

--shadow-sm Cards, nav

--shadow-md Hovered cards, modals

--shadow-lg Popovers, dropdowns

--shadow-focus Focus ring on inputs

Token	Value
`--shadow-sm`	0 1px 4px rgba(0,0,0,.25)
`--shadow-md`	0 4px 16px rgba(0,0,0,.35)
`--shadow-lg`	0 8px 32px rgba(0,0,0,.45)
`--shadow-focus`	0 0 0 3px rgba(76,141,255,.35)

Foundations

Gradients & Glass Effects

Brand spinner gradient

The four-quadrant conic spinner is a core Lerbb brand element. It appears on loading screens and async states across all apps.

Page spinner (36–44px)

Inline spinner (14px)

/* Lerbb conic spinner — uses all 4 brand colours */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  background: conic-gradient(
    #4C8DFF 0deg 90deg,
    #38B27B 90deg 180deg,
    #DFA62A 180deg 270deg,
    #7A6FF0 270deg 360deg
  );
  animation: spin .8s linear infinite;
  -webkit-mask: radial-gradient(
    farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)
  );
}
@keyframes spin { to { transform: rotate(360deg); } }
  

Glass / Blur effect (use sparingly)

/* Backdrop blur — modal overlays only */
.modal-overlay {
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.6);
}
/* ⚠ Only use blur on modal overlays. Never on cards or sidebars. */
  

Foundations

Motion & Animation

Lerbb animations are fast, purposeful, and non-distracting. Every transition serves feedback or orientation — never decoration.

Token	Value	Use
`--dur-fast`	.12s	Hover states, button active
`--dur-base`	.18s	Most UI transitions (default)
`--dur-slow`	.3s	Page transitions, modal open/close
`--ease`	cubic-bezier(.4,0,.2,1)	Standard easing (Material-style)
`--ease-out`	cubic-bezier(0,0,.2,1)	Enter / reveal
`--ease-in`	cubic-bezier(.4,0,1,1)	Exit / dismiss

Standard animation keyframes

/* fadeUp — page entry, card open */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* fadeIn — overlay, tooltip */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* shimmer — skeleton loader */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
  

⚠

Respect reduced motion: Wrap all animations in @media (prefers-reduced-motion: no-preference) { … } so users who've opted out of motion don't experience them.

Foundations

Icons

Lerbb uses Font Awesome 6 solid and brand icons. All icons must be the same weight (solid or brand) within a context. Never mix outlined and filled styles.

fa-house

fa-shield-halved

fa-key

fa-user

fa-cloud

fa-lock

fa-triangle-exclamation

fa-circle-check

Context	Size	Notes
Nav / sidebar	0.9rem	Used in `.ni` span, 20px wide slot
Button icon (leading)	0.75rem	Set at `font-size:.75rem`
Inline / badge icon	0.7–0.8rem	Vertically centred with text
Feature icon (card)	1rem	In 44×44px coloured rounded container
Empty state icon	2–2.5rem	Opacity 0.4

Design Tokens

Complete Token Reference

The full :root block. Copy this into any project to immediately access all Lerbb design tokens.

:root {
  /* ── Brand Colours ── */
  --blue:       #4C8DFF;
  --blue-dim:    rgba(76,141,255,.13);
  --blue-dark:   #2a6de0;
  --green:       #38B27B;
  --green-dim:   rgba(56,178,123,.12);
  --amber:       #DFA62A;
  --amber-dim:   rgba(223,166,42,.12);
  --violet:      #7A6FF0;
  --violet-dim:  rgba(122,111,240,.12);

  /* ── Semantic Colours (Dark — default) ── */
  --bg:           #1a1c1e;
  --bg-alt:       #1f2124;
  --surface:      #26292d;
  --surface2:     #2e3135;
  --surface3:     #363a3e;
  --border:       rgba(255,255,255,.08);
  --border-mid:   rgba(255,255,255,.14);
  --text:         #e3e5e8;
  --text-muted:   #8f9399;
  --text-dim:     #b5b9bf;
  --accent:       #4C8DFF;
  --accent-hover: #6fa3ff;
  --accent-dim:   rgba(76,141,255,.13);
  --danger:       #f28b82;
  --danger-dim:   rgba(242,139,130,.1);
  --success:      #38B27B;
  --success-dim:  rgba(56,178,123,.12);
  --warning:      #DFA62A;
  --warning-dim:  rgba(223,166,42,.12);

  /* ── Spacing ── */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Border Radius ── */
  --radius-sm: 6px;   --radius-md: 10px;
  --radius-lg: 14px;  --radius-xl: 18px;
  --radius-2xl: 24px; --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 4px rgba(0,0,0,.25);
  --shadow-md:    0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.45);
  --shadow-focus: 0 0 0 3px rgba(76,141,255,.35);

  /* ── Motion ── */
  --ease:      cubic-bezier(.4,0,.2,1);
  --ease-out:  cubic-bezier(0,0,.2,1);
  --ease-in:   cubic-bezier(.4,0,1,1);
  --dur-fast:  .12s;
  --dur-base:  .18s;
  --dur-slow:  .3s;

  /* ── Z-Index ── */
  --z-base: 0;     --z-raised: 10;
  --z-overlay: 100; --z-modal: 200;
  --z-toast: 300;   --z-max: 400;

  /* ── Typography ── */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono","Fira Code","Menlo",monospace;
}

[data-theme="light"] {
  --bg:           #eef2f8;
  --bg-alt:       #e6ecf5;
  --surface:      #ffffff;
  --surface2:     #eef2f8;
  --surface3:     #e3e8f0;
  --border:       rgba(0,0,0,.08);
  --text:         #1a1c1e;
  --text-muted:   #5f6368;
  --danger:       #c5221f;
  --warning:      #B07D10;
  --success:      #2a8a5e;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.1);
  --shadow-md:    0 4px 20px rgba(0,0,0,.12);
}
    

Z-Index Tokens

Token	Value	Usage
`--z-base`	0	Default document flow
`--z-raised`	10	Sticky table headers, raised cards
`--z-overlay`	100	Topnav, sidebar, fixed UI
`--z-modal`	200	Modals, drawers, sheets
`--z-toast`	300	Toast notifications
`--z-max`	400	Critical alerts, onboarding overlays

Core Components

Buttons

All interactive affordances. Buttons communicate priority through visual weight. Use primary sparingly — one per screen section.

Variants

Sizes

With icons

Disabled state

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--radius-md);
  padding: 9px 18px; font-size: .875rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
    box-shadow var(--dur-base), transform .1s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 12px rgba(76,141,255,.4);
}
.btn-secondary {
  background: transparent; border: 1px solid var(--border);
  color: var(--text);
}
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
    

✓ Do

Use "Save" for committing a form. Use "Delete" for removal. Keep button text under 3 words.

✗ Don't

Don't use "Click here", "Submit", or "OK". Don't place two primary buttons side by side.

Core Components

Text Fields

Display name

Email address

We'll send a verification email.

Password

Password must be at least 6 characters.

Search

💡

Always pair an input with a <label>. Labels use uppercase micro-text style: font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em.

Core Components

Checkboxes, Radios & Toggles

Email notifications enabled Marketing updates

Free plan Pro plan

Dark mode Email notifications

Core Components

Tabs

Tab content goes here…

💡

The tab strip uses background: var(--surface2) as the track, with the active tab using background: var(--surface3). Use a 3px internal padding and gap.

Core Components

Cards

Documents

Create and edit documents

Security

Manage login methods

Password

Change your password

Section card pattern

Used extensively in the Account portal. A card with a header row and data rows.

Profile

Display name

Alex Johnson

Email address

alex@example.com

Core Components

Modals

⚠

Destructive modal rules: Always show what is being deleted by name. Use a red danger button. Require a text confirmation for irreversible account-level actions (e.g. type "DELETE").

Core Components

Toasts

Avatar saved!

Couldn't save — try again.

Link copied!

/* Toast — fixed bottom-centre, pill shape */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface3);
  border-radius: var(--radius-full);
  padding: 10px 20px;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: var(--z-toast);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
  

Toasts auto-dismiss after 2200ms. Never use toasts for errors that require user action — use inline validation instead. Max 1 visible at a time.

Core Components

Tooltips

Core Components

Badges & Chips

Active Verified ⚠ Storage warning ✕ Error ✦ New

Linked Not verified Limit reached

Core Components

Avatars

Lerbb uses generated avatars from avatars.lerbb.services/{style}/{seed}. Two styles: shapes and thumbs. Avatars are always round.

A

BJ

CK

LD

A

B

C

Core Components

Progress Bars

Uploading…64%

Storage used82%

Storage critical95%

Core Components

Skeleton Loaders

Use skeletons when content will load within 2–3 seconds. Mirror the shape of the content that will appear — this reduces layout shift.

Core Components

Empty States

No documents yet

Create your first document to get started. Documents are saved automatically.

✓

Empty state must include: An icon at ~40% opacity, a clear heading, 1–2 sentences of context, and a single primary action button.

Core Components

Navbars & Sidebars

The topnav is always position: sticky; top: 0; z-index: var(--z-overlay). The sidebar is sticky within its scroll container. Mobile nav uses a fixed bottom bar with 4 icons.

Token	Value	Usage
`--sidebar-w`	248–260px	Standard sidebar width
`--nav-top`	60px	Topnav height

Lerbb-Specific

File Cards

Used in Lerbb Docs home view. The preview area renders document content at reduced scale. A hover menu reveals the 3-dot action button.

Project Brief Q3

The objective of this document is to outline the key goals and deliverables for Q3 including product launch timeline and resource allocation.

Project Brief Q3

2h ago

Meeting Notes — May

Attendees: Alex, Sam, Jordan. Discussed sprint velocity, blocking issues, and roadmap prioritisation for next quarter.

Meeting Notes — May

Yesterday

Lerbb-Specific

Storage Usage Bar

Storage used 2.3 GB / 5 GB

Free plan

Storage used 4.1 GB / 5 GB

⚠ Running low — consider upgrading

Usage %	Bar colour	Warning shown
0–69%	--success (green)	None
70–89%	--warning (amber)	Inline warning text
90–100%	--danger (red)	Inline warning + top banner

Lerbb-Specific

Upload Dropzone

Drop files here or click to browse

.html, .docx, .txt, .md — up to 10 MB

Lerbb-Specific

Share Sheet

Lerbb-Specific

Auth Sign-in Box

lerbb.

Sign in to your account

Email address

Password

or continue with

Lerbb-Specific

Plan / Pricing Cards

Free

$0/mo

5 GB storage

Custom domain

Priority support

Tier Badges

Free ✦ Plus ⚡ Pro 👑 Ultimate ∞ Infinity End-to-end encrypted

UX Rules

Loading, Error & Success States

Loading states

Duration	Pattern
< 300ms	No indicator — too fast to notice
300ms – 2s	Spinner on the button / element itself (inline spinner)
2s – 5s	Skeleton loader in the content area
> 5s	Full-page spinner + progress text

Error states

💡

Inline errors appear below the specific field (never as a toast). Page-level errors use a banner above content. Network errors use a toast with a retry option. Always explain what went wrong and what the user can do next.

Offline state

You're offline. Changes will save when reconnected.

UX Rules

Form Validation

Rule	Detail
Validate on blur	Validate when the user leaves a field, not while typing
Re-validate on input	Once a field has an error, clear it as the user types
Error placement	Below the input, in `--danger` colour, font-size .75rem
Required fields	Mark with * in the label, explain above the form
Button state	Disable save button while form has active errors
Success confirmation	Show inline success text below the field, then auto-collapse after 3s

UX Rules

Destructive Action Confirmation

Action level	Confirmation pattern
Low-risk delete (e.g. remove a document)	Modal with item name shown, single "Delete" button
Medium-risk (e.g. sign out all devices)	Modal + password confirmation
High-risk (e.g. delete account)	Modal + type "DELETE" + password confirmation

✓ Do

Name the thing being deleted. "Delete 'Project Brief Q3'?" not "Delete document?".

✗ Don't

Never auto-delete without a confirmation. Never make destructive buttons the default/focused element.

UX Rules

Accessibility

Rule	Detail
Colour contrast	WCAG AA: 4.5:1 for body, 3:1 for large text. All brand colours pass.
Focus ring	Always visible. Use `box-shadow: var(--shadow-focus)` — never remove outline without a replacement
Skip links	Add `<a href="#main">Skip to content</a>` as first focusable element
Labels	Every input must have an associated `<label for=…>`
ARIA	Use semantic HTML first. Add ARIA only where semantics are insufficient
Keyboard nav	Tab order follows visual order. Escape closes modals. Enter submits forms
Screen readers	Icons that carry meaning get `aria-label`. Decorative icons get `aria-hidden="true"`
Reduced motion	Wrap animations in `@media (prefers-reduced-motion: no-preference)`

UX Rules

Mobile & Touch

Rule	Detail
Touch targets	Minimum 44×44px for any interactive element
Mobile nav	Sidebar hidden on <768px. Fixed bottom nav with 4 icons replaces it
Tap highlight	`-webkit-tap-highlight-color: transparent` on all interactive elements
Text select	Disable user-select on UI chrome, enable on content (inputs, document text)
Overscroll	`overscroll-behavior: none` on body to prevent pull-to-refresh in PWA
Safe areas	Use `env(safe-area-inset-*)` for PWA padding on notched devices
Viewport lock	`user-scalable=no` in meta viewport for app-like PWA feel

Content Style

Voice & Tone

Direct

Say what you mean. No filler words, no passive voice. "Save" not "Please save your changes."

Friendly, not casual

Warm and approachable. Never slang. "Something went wrong" not "Uh oh! 😅"

Transparent

Tell users what's happening. "Your data is encrypted before it leaves your device."

Action-oriented

Button labels are verbs. Error messages tell users what to do next.

Content Style

Button & Error Copy

Button wording

Context	Use	Avoid
Save form data	Save	Submit, OK, Confirm
Create new	New document, Add member	Create, Make
Delete	Delete	Remove, Erase
Cancel action	Cancel	No, Never mind, Close
Navigate away	Go back, Return	Back
Authentication	Sign in, Sign out	Login, Logout, Log in
Subscription	Upgrade to Pro	Buy, Purchase

Error message patterns

Error type	Pattern	Example
Wrong password	State the problem + hint	"Incorrect password. Try again or reset it."
Network failure	What happened + what to do	"Couldn't save — check your connection and try again."
Validation	Specific, not generic	"Password must be at least 6 characters." not "Invalid input"
Permission denied	Explain the restriction	"You don't have permission to edit this document."
Not found	Name the thing + offer help	"Document not found. It may have been deleted."

Content Style

Capitalisation Rules

Element	Rule	Example
Page titles	Title case	Personal Info, Security & Login
Section headers	Title case	Login Methods, Account Details
Field labels	Title case (ALL CAPS in CSS)	DISPLAY NAME, EMAIL ADDRESS
Button text	Title case for 1–2 words, sentence case for 3+	Save / Sign in / Upgrade to Pro
Body / help text	Sentence case	We'll send a verification email.
Error messages	Sentence case	Incorrect password. Try again.
Toast messages	Sentence case	Email address updated!
Product names	Lerbb, Lerbb Docs, Lerbb Account	Always capitalised as shown

Documentation

CSS Variables — Quick Reference

A compact cheatsheet of the most frequently used tokens. Perfect for pasting into an AI prompt.

✦

For AI prompting: Paste this entire block at the top of your request: "Use these Lerbb CSS variables for all styling: [paste block]. Do not hardcode any colours, spacing, or radius values."

/* Lerbb Design System — Token Cheatsheet */
/* Colours */
--blue:#4C8DFF  --blue-dim:rgba(76,141,255,.13)  --blue-dark:#2a6de0
--green:#38B27B  --green-dim:rgba(56,178,123,.12)
--amber:#DFA62A  --amber-dim:rgba(223,166,42,.12)
--violet:#7A6FF0  --violet-dim:rgba(122,111,240,.12)
/* Semantic */
--bg:#1a1c1e  --bg-alt:#1f2124
--surface:#26292d  --surface2:#2e3135  --surface3:#363a3e
--border:rgba(255,255,255,.08)  --border-mid:rgba(255,255,255,.14)
--text:#e3e5e8  --text-muted:#8f9399  --text-dim:#b5b9bf
--accent:#4C8DFF  --accent-hover:#6fa3ff  --accent-dim:rgba(76,141,255,.13)
--danger:#f28b82  --danger-dim:rgba(242,139,130,.1)
--success:#38B27B  --success-dim:rgba(56,178,123,.12)
--warning:#DFA62A  --warning-dim:rgba(223,166,42,.12)
/* Spacing */
--space-1:4px  --space-2:8px  --space-3:12px  --space-4:16px
--space-5:20px  --space-6:24px  --space-8:32px  --space-10:40px
/* Radius */
--radius-sm:6px  --radius-md:10px  --radius-lg:14px
--radius-xl:18px  --radius-2xl:24px  --radius-full:999px
/* Shadow */
--shadow-sm:0 1px 4px rgba(0,0,0,.25)
--shadow-md:0 4px 16px rgba(0,0,0,.35)
--shadow-focus:0 0 0 3px rgba(76,141,255,.35)
/* Motion */
--ease:cubic-bezier(.4,0,.2,1)  --dur-fast:.12s  --dur-base:.18s  --dur-slow:.3s
/* Z-index */
--z-overlay:100  --z-modal:200  --z-toast:300
/* Font */
--font-sans:"Inter",system-ui,sans-serif  --font-mono:"SF Mono","Fira Code","Menlo",monospace
    

Documentation

Tailwind Config

For projects using Tailwind CSS v3/v4 — map Lerbb tokens into the theme config.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        lerbb: {
          blue: '#4C8DFF',
          green: '#38B27B',
          amber: '#DFA62A',
          violet: '#7A6FF0',
          bg: '#1a1c1e',
          surface: '#26292d',
          text: '#e3e5e8',
        }
      },
      borderRadius: {
        sm: '6px', md: '10px',
        lg: '14px', xl: '18px',
        '2xl': '24px',
      },
      boxShadow: {
        sm: '0 1px 4px rgba(0,0,0,.25)',
        md: '0 4px 16px rgba(0,0,0,.35)',
        focus: '0 0 0 3px rgba(76,141,255,.35)',
      },
      transitionTimingFunction: {
        lerbb: 'cubic-bezier(.4,0,.2,1)',
      },
    }
  }
}
    

Documentation

React Component Stubs

Copy-ready component shells. These expect the :root token block to be defined globally.

Button

// LerbbButton.jsx
export function LerbbButton({
  variant = 'primary', size = 'default',
  disabled, children, onClick, className = ''
}) {
  const base = 'btn';
  const v = `btn-${variant}`;
  const s = size === 'sm' ? 'btn-sm' : size === 'lg' ? 'btn-lg' : '';
  return (
    <button
      className={`${base} ${v} ${s} ${className}`}
      disabled={disabled}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// Usage:
<LerbbButton variant="primary" size="sm" onClick={handleSave}>
  Save
</LerbbButton>
  

Toast hook

// useLerbbToast.js
import { useCallback, useRef } from 'react';

export function useLerbbToast() {
  const timerRef = useRef(null);
  const showToast = useCallback((msg, duration = 2200) => {
    const el = document.getElementById('lerbb-toast');
    if (!el) return;
    el.textContent = msg;
    el.classList.add('show');
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(
      () => el.classList.remove('show'), duration
    );
  }, []);
  return { showToast };
}
  

Documentation

Changelog

Version	Date	Changes
v1.0	May 2026	Initial release. Full token system, core components, Lerbb-specific components, UX rules, content guide, React stubs, Tailwind config.

✓

Updating tokens: All design tokens live in the single :root { … } block. Bumping a token value propagates instantly across every component without touching component code. This is intentional — the design system is managed at the token layer.

Lerbb Design System

Brand Principles

Private by default

Effortless speed

Honest clarity

Accessible for all

LLM / Vibe-Coding Guide

Prompting patterns that work

What this doc provides for LLMs

Colour Palette

Brand colours

Colour ramps (hover for hex)

Semantic colours

Dark Mode Colours

Typography Scale

Letter-spacing rules

Spacing Scale

Border Radius Scale

Shadows

Gradients & Glass Effects

Brand spinner gradient

Glass / Blur effect (use sparingly)

Motion & Animation

Standard animation keyframes

Icons

Complete Token Reference

Z-Index Tokens

Buttons

Variants

Sizes

With icons

Disabled state

Text Fields

Checkboxes, Radios & Toggles

Tabs

Cards

Documents

Security

Password

Section card pattern

Modals

Delete document?

Toasts

Tooltips

Badges & Chips

Avatars

Progress Bars

Skeleton Loaders

Empty States

No documents yet

Navbars & Sidebars

File Cards

Storage Usage Bar

Upload Dropzone

Share Sheet

Share document

Auth Sign-in Box

Plan / Pricing Cards

Tier Badges

Loading, Error & Success States

Loading states

Error states

Offline state

Form Validation

Destructive Action Confirmation

Accessibility

Mobile & Touch

Voice & Tone

Button & Error Copy

Button wording

Error message patterns

Capitalisation Rules

CSS Variables — Quick Reference

Tailwind Config

React Component Stubs

Button

Toast hook

Changelog