Loading page content
Loading
Preparing your experience
Please wait while we fetch the latest data and prepare the page for you.
Loading
Preparing your experience
Please wait while we fetch the latest data and prepare the page for you.
Design System
A complete design system guide for VeriWorkly including UI components, colors, typography, and layouts.
Every token carries a light and a dark value, both read from packages/ui/src/styles/themes.css. Each swatch shows the two side by side, composited over the page background of its own theme so that alpha tokens like --border read honestly.
Background
--background
Primary page background. Warm ivory in light, near-black in dark.
Foreground
--foreground
Primary text colour.
Accent
--accent
Links, CTAs, and focus rings. Lifted in dark mode to hold contrast.
Accent Foreground
--accent-foreground
Text and icons placed on an accent fill.
Card
--card
Raised component surfaces, one step off the page background.
Muted
--muted
Secondary text, metadata, and captions.
Border
--border
Dividers and outlines. Always an alpha value, never a solid grey.
Destructive
--destructive
Errors, destructive actions, and failed states.
Success
--success
Completed, valid, and passing states.
Warning
--warning
States that need attention but have not failed.
Muted Foreground
--muted-foreground
Text on a muted fill. Intentionally identical in both themes.
Destructive Foreground
--destructive-foreground
Text on a destructive fill.
Success Foreground
--success-foreground
Text on a success fill.
Warning Foreground
--warning-foreground
Text on a warning fill.
Docs Highlight
--fd-accent
Search and menu highlight, used only by the docs platform.
Geist Sans
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
var(--font-geist-sans)
Interface and body copy.
Geist Mono
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
var(--font-geist-mono)
Labels, metadata, code, and numeric detail.
Display
36 → 48 → 60 px · 600 · −0.025em · 1.0
Page-opening headline. One per page.
text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight
Section
30 px · 600 · −0.025em · 36 px
Section headings.
text-3xl font-semibold tracking-tight
Component
20 px · 600 · −0.025em · 28 px
Card and panel titles.
text-xl font-semibold tracking-tight
Body Large
16 → 18 px · 400 · 0 · 32 px
Lead paragraphs and marketing copy.
text-base leading-8 md:text-lg
Body
14 px · 400 · 0 · 1.625
Descriptions, list items, and dense UI text.
text-sm leading-relaxed
Eyebrow
12 px · 600 · 0.24em · 16 px
Labels above a heading. Always uppercase.
text-xs font-semibold tracking-[0.24em] uppercase
Mono Meta
12 px · 400 · 0 · 16 px
Token names, file paths, dimensions, and code.
font-mono text-xs
Primary carries the accent fill and is limited to one per view. Secondary and ghost are for everything else.
Status badges use a 10% fill and a 25% border of their own token, so the same badge works on both the page and card backgrounds.
Four states, four tokens. Informational states reuse the accent rather than introducing a fifth hue.
Primary Logo
The official VeriWorkly logo mark is rendered as high-resolution PNG image assets on product surfaces, application headers, and media embeds.
Need the full brand kit?
High-resolution logo images, clear-space rules, both palettes, typography, voice guidelines, share cards, and a downloadable .zip.
Our signature background pattern used for major layouts and landing sections.
We use deep, soft shadows to create elevation and focus on premium components.
Subtle gradients are applied to backgrounds and card surfaces to add depth.
Page Background (Radial)
Applied to body globally.
Inner Depth (Linear)
Card surfaces, 145° from --card.
Our layout follows a modular grid system. We use standard Next.js Container components with consistent padding and gap values.
Motion confirms an action; it never announces itself. Anything longer than 250ms on an interaction feels like latency.
ease (default)
Hover and focus colour changes on links, cards, and buttons.
cubic-bezier(0.16, 1, 0.3, 1)
Popovers, dropdowns, and dialogs appearing (animate-scale-in).
ease-in-out
Skeleton loading placeholders (animate-shimmer).
cubic-bezier(0.4, 0, 0.6, 1)
Live and recording indicators (animate-pulse-ring).
Every interactive element needs a visible keyboard focus state. Tab through these rather than clicking them - the ring appears on :focus-visible only, so a mouse click stays quiet.
focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
A global @media (prefers-reduced-motion: reduce) rule collapses every animation and transition to 0.01ms and disables smooth scrolling. You do not need to handle this per component - but never encode meaning in motion alone, because for some readers there will be none.
packages/ui/src/styles/globals.css