Velzon

Overview

Velzon is an enterprise-grade admin dashboard template built for teams who need to transform complex business data into actionable insights. The design philosophy centers on 'Data-Driven Clarity'—a modern, accessible aesthetic that prioritizes information hierarchy and rapid decision-making without sacrificing visual sophistication. The brand personality is professional yet approachable: confident in its capabilities, never condescending, and always focused on the user's goal. The interface uses a clean white canvas (#ffffff) as the foundation, with a vibrant cyan-blue primary accent (#25a0e2) that draws attention to key CTAs and metrics. Supporting colors—teal (#00bd9d) for success states and coral (#f06548) for alerts—create a balanced, intuitive status system. Voice example: 'Your Q4 forecast shows a 23% increase in pipeline value—here's what's driving it.'

Colors

The color system is built on a light, high-contrast foundation optimized for extended screen time and accessibility. Primary (#25a0e2) is the signature accent used exclusively on call-to-action buttons, active navigation states, and key metric highlights—it commands attention without overwhelming the interface. Secondary (#00bd9d) reinforces positive outcomes, success badges, and confirmatory interactions. Tertiary (#f06548) signals warnings, errors, and critical alerts, ensuring users immediately recognize issues. The surface stack ranges from pure white (#ffffff) for primary content areas to progressively darker grays (#f3f6f9 through #adb5bd) for layered containers, dividers, and disabled states. On-surface text (#212529) provides 16:1 contrast against white, ensuring WCAG AAA complianc

Typography

The type system uses Open Sans across all scales, chosen for its exceptional legibility at small sizes and professional neutrality. Display (56px, 700 weight) anchors hero sections and major page titles with -0.02em letter-spacing to tighten the letterforms. Headline-lg (32px, 600 weight) introduces major sections; headline-md (24px, 600 weight) subsections. Title-lg (18px, 600 weight) is used for card headers and metric labels. Body-lg (16px, 400 weight) and body-md (14px, 400 weight) carry primary and secondary content, with 24px and 22px line-heights respectively to ensure comfortable reading. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text and form labels; label-sm (12px, 500 weight, 0.02em tracking) for badges and helper text. On metric cards and data-dense tabl

Layout

Velzon uses a 12-column fluid grid with a maximum container width of 1320px, allowing responsive scaling from mobile to ultra-wide displays. The gutter spacing is consistently 24px (md token), creating a rhythm that feels spacious without wasting real estate. Section separation uses lg spacing (40px) between major content blocks; card-to-card spacing within a section uses md spacing (24px). The sidebar navigation occupies a fixed 250px width on desktop, collapsing to a hamburger menu below 768px. Dashboard cards are arranged in a 4-column grid on desktop (3 columns on tablet, 1 on mobile), each card using md padding (24px) internally. White-space is treated as a design element—never cramped, always intentional. Metric cards (Campaign Sent, Annual Profit, etc.) use consistent 24px padding a

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic layering. Level 1 (Base): flat surfaces with 1px solid borders in surface-container (#e9ebec), no shadow. Level 2 (Standard Cards): 1px border in surface-container plus elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)), creating a gentle lift. Level 3 (Modals/Overlays): 1px border plus elevation.lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)), signaling modal prominence. Hover states on cards transition to elevation.lg over 200ms, providing tactile feedback. Metric cards use elevation.sm (0 1px

Shapes

The shape language is 'Soft-Technical'—rounded corners are present but restrained, signaling approachability without sacrificing professional authority. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px), a subtle curve that feels modern without being playful. Cards and larger containers use the same 8px radius, creating visual consistency. Badges and pills use rounded.full (9999px) to emphasize their discrete, self-contained nature. The sidebar and modal overlays use rounded.lg (1rem / 16px) at their top corners, creating a gentle frame. This hierarchy—8px for primary interactive elements,

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use #25a0e2 background with white text, 14px Open Sans 500 weight, 8px 14.4px padding, and 8px border-radius. On hover, the background darkens to #1e8bc3 over 150ms. On active/pressed, it further darkens to #1a7aad. Secondary buttons use #f3f6f9 background with #212529 text and a 1px #adb5bd border; on hover, the background shifts to #eff2f7. All buttons have a minimum height of 36px and use label-md typography. Avoid button text longer than 3 words; use tooltips for additional context.

Containers & Surfaces Cards are the primary content container. Standard cards use white background (#ffffff), 1px #e9ebec border, 24px padding, 8px border-radius, and elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)).

Do's and Don'ts

**Do**

• Do use primary (#25a0e2) exclusively for primary CTAs and active states—it's the brand's signature and must remain distinctive.
• Do maintain 24px (md) spacing between major content sections and 12px (sm) spacing between related elements within a card.
• Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers to create visual hierarchy without heaviness.
• Do use Open Sans at 14px body-md for primary content and 12px label-sm for helper text to maintain legibility in data-dense layouts.
• Do apply 150ms ease-in-out transitions to all interactive elements (buttons, inputs, cards) for smooth, predictable feedback.
• Do use secondary (#00bd9d) for success states and positive metrics; tertiary (#f06548) for errors and warnings—never mix these roles.

**Don't**

• Don't use primary color (#25a0e2) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't apply shadows stronger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)) on standard cards; excessive depth flattens the visual hierarchy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—inconsistent rounding fragments the aesthetic.
• Don't nest more than 2 levels of cards or containers; use tabs, accordions, or separate pages to manage complexity.
• Don't apply letter-spacing greater than 0.1em on body text; it degrades readability and feels amateurish.
• Don't use colors outside the defined palette for UI elements—custom colors break the system and create accessibility issues.