Design System
Style Guide for VeriWorkly Design System
A complete design system guide for VeriWorkly including UI components, colors, typography, and layouts.
Colors
Background
#F5F4EF
--background
Primary page background
Foreground
#171717
--foreground
Main text color
Accent (Blue)
#2563EB
--accent
Primary action color
Card
#FFFFFF
--card
Component surfaces
Muted
#5F5C54
--muted
Secondary text and details
Border
rgba(23, 23, 23, 0.12)
--border
Subtle dividers
Destructive
#DC2626
--destructive
Error and danger states
Accent FG
#F8FBFF
--accent-foreground
Text on accent background
Typography
Display
Heading 1 (Hero)
text-4xl sm:text-5xl md:text-6xl / font-semibold / tracking-tight
Section Header
Heading 2 (Section)
text-3xl / font-semibold / tracking-tight
Component Header
Heading 3 (Card Title)
text-xl / font-semibold / tracking-tight
Body Text
The quick brown fox jumps over the lazy dog. This is the primary body text used for descriptions and long-form content. It prioritizes readability and proper line spacing.
text-base leading-8 md:text-lg
Font Stack
Primary font token: --font-geist-sans
Monospace token: --font-geist-mono
Configured through @veriworkly/ui font variables and consumed by each app.
Components
Buttons
Badges
Interactive Elements
Status Icons
Brand Assets
Primary Logo
Use the standard square mark across product surfaces. Keep clear spacing and avoid color manipulation.
Visual Effects & Patterns
Surface Grid
Our signature background pattern used for major layouts and landing sections.
Premium Shadows
We use deep, soft shadows to create elevation and focus on premium components.
Gradients
Subtle gradients are applied to backgrounds and card surfaces to add depth.
Page Background (Radial)
Inner Depth (Linear)
Layout & Spacing
Our layout follows a modular grid system. We use standard Next.js Container components with consistent padding and gap values.
Shadow: [0_30px_90px_-50px_rgba(0,0,0,0.45)]