Loading
Preparing your experience
Please wait while we fetch the latest data and prepare the page for you.
Navigation
Loading
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.
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
Display
text-4xl sm:text-5xl md:text-6xl / font-semibold / tracking-tight
Section Header
text-3xl / font-semibold / tracking-tight
Component Header
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.
Primary Logo
Use the standard square mark across product surfaces. Keep clear spacing and avoid color manipulation.

Logo path
/veriworkly-logo.png
Design references
Theme tokens live in @veriworkly/ui styles.
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)
Inner Depth (Linear)
Our layout follows a modular grid system. We use standard Next.js Container components with consistent padding and gap values.