Vimal Design System

VDS — Enterprise
Design Language

A complete, token-driven design system powering consistent, accessible, and scalable SaaS interfaces. Built with precision, documented for teams.

48+

Components

120+

Design Tokens

AA

WCAG Rating

v1.0

Stable Release

Color Token

Primary 500

#4F7CFF

--color-primary-500

Typography

Display/XL

Inter · 36px · 800 · -0.5px

Spacing Scale

xs — 4px

sm — 8px

md — 16px

lg — 24px

Section 02

Design Principles

Six guiding values that inform every decision — from token naming to interaction patterns.

01 — CLARITY

Obvious over clever

Every UI element communicates its purpose without explanation. Hierarchy, contrast, and whitespace do the work.

02 — SYSTEMS

Tokens, not values

Design decisions live in tokens. Change a token, change the system — not individual instances spread across files.

03 — ALIGNMENT

Grid-driven precision

Everything lives on a 4px base grid. Spacing, sizing, and layout follow mathematical rhythm — not eyeballed estimates.

04 — SIMPLICITY

Remove, don't add

Complexity is always wrong. The simplest solution that meets the requirement is the correct one. Earn every element on screen.

05 — ACCESSIBILITY

Inclusive by default

WCAG AA contrast, keyboard navigation, and semantic HTML aren't optional extras — they're built into every component from day one.

06 — AI-FIRST

Designed with AI

AI tools accelerate ideation, generate variants, and validate patterns — but design judgment stays human. Speed without quality is waste.

Section 03

Logo System

The VD monogram in three variants — each engineered for context. Never stretch, rotate, or recolor.

VD

PRIMARY · Dark BG

Gradient fill on dark surfaces

VD

LIGHT BG Variant

Use on white/light backgrounds

VD

OUTLINE Variant

Low-emphasis, subtle contexts

Clear Space & Sizing Rules

Minimum Size

24×24px — Never render below this threshold. On digital screens use ≥32px for legibility.

Clear Space

Maintain minimum clear space of 0.5× logo width on all sides. No text or graphics in this zone.

Never Do

Don't stretch · Don't add drop shadows · Don't recolor outside palette · Don't use on busy backgrounds

Section 04

Color System

A semantic, token-driven palette. Use role names — never raw hex values — in production code.

Primary — Blue

100

200

300

400

500 ★

600

700

800

900

Semantic Color Tokens

Token

Value

Usage

--color-primary

#4F7CFF

CTAs, links, active states

--color-secondary

#7C4DFF

Gradients, accents, highlights

--color-info

#00D4FF

Informational, data viz

--color-success

#22C55E

Success, availability, positive

--color-warning

#F59E0B

Warnings, pending states

--color-danger

#EF4444

Errors, destructive actions

--color-bg-base

#030712

Page background, canvas

--color-bg-elevated

#0F172A

Cards, panels, overlays

--color-text-primary

#F8FAFC

Headings, primary labels

--color-text-secondary

#94A3B8

Body copy, descriptions

Contrast Ratios

#F8FAFC on #030712

17.8:1 AAA

#94A3B8 on #030712

7.2:1 AAA

#4F7CFF on #030712

5.1:1 AA

#475569 on #030712

3.1:1 Decorative

Gradient Palette

primary-gradient

blue-cyan

purple-pink

green-cyan

Section 05

Typography System

Inter for all UI text. JetBrains Mono for code, data, and technical labels. Strict scale — no one-offs.

Type Scale

Display XL

The quick brown fox

48/800/-1.5px

Display LG

The quick brown fox

36/800/-0.8px

Heading H1

The quick brown fox

28/700/-0.5px

Heading H2

The quick brown fox jumps

22/700/-0.3px

Heading H3

The quick brown fox jumps over

18/600/-0.2px

Body LG

The quick brown fox jumps over the lazy dog and more text to show

16/400/1.7lh

Body MD

The quick brown fox jumps over the lazy dog and more text to show

14/400/1.65lh

Body SM

The quick brown fox jumps over the lazy dog and more text to show

13/400/1.6lh

Caption

Label / Caption / Tag text

11/500/0.3ls

Code

const token = '--color-primary-500';

13/400/mono

Font Families

SANS-SERIF — UI

Inter

Google Fonts · Variable · 100–900

MONOSPACE — CODE

JetBrains Mono

Google Fonts · Ligatures on

Font Weights Used

Light — 300 Decorative only

Regular — 400 Body copy

Medium — 500 Labels, captions

Semibold — 600 Subheadings, nav

Bold — 700 Headings

Extrabold — 800 Display/Hero

Section 06

Spacing & Grid

4px base unit. All spacing values are multiples of 4. No arbitrary values — ever.

Spacing Scale

--space-1

4px — xs, icon nudges, fine adjustments

--space-2

8px — sm, gap between inline elements

--space-3

12px — form label → input gap

--space-4

16px — base padding, card inner gap

--space-6

24px — standard card padding

--space-8

32px — section inner spacing

--space-12

48px — between page sections

--space-18

72px — major section padding

Grid System

Desktop ≥1280px

12 cols · 24px gap · 80px margin

Tablet 768–1279px

8 cols · 16px gap · 40px margin

Mobile <768px

4 cols · 12px gap · 16px margin

Section 07

Design Tokens

Single source of truth. Tokens live in CSS custom properties and Tailwind config — keeping design and code in sync.

CSS Custom Properties

/* tokens.css */
:root {
  /* Color */
  --color-primary-500: #4F7CFF;
  --color-primary-600: #3861E8;
  --color-secondary-500: #7C4DFF;
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;

  /* Background */
  --bg-base: #030712;
  --bg-surface: #0A0F1E;
  --bg-elevated: #0F172A;
  --bg-glass: rgba(15,23,42,.72);

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadow */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-glow-blue:
    0 8px 32px rgba(79,124,255,.25);
}
      

Tailwind Config Extension

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#4F7CFF',
          600: '#3861E8',
        },
        secondary: {
          500: '#7C4DFF',
        },
        surface: '#0F172A',
        canvas: '#030712',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui'],
        mono: ['JetBrains Mono'],
      },
      borderRadius: {
        DEFAULT: '10px',
        lg: '16px',
        xl: '24px',
      },
      boxShadow: {
        glow: '0 8px 32px rgba(79,124,255,.25)',
        card: '0 4px 16px rgba(0,0,0,.4)',
      },
      animation: {
        'fade-up': 'fadeUp .5s ease forwards',
        float: 'float 4s ease-in-out infinite',
      },
    },
  },
}
      

Section 08

Button System

Six variants × three sizes × multiple states. All keyboard accessible with visible focus rings.

Button Variants

Size Scale

SM

7px/14px · 12px

MD (Default)

10px/20px · 14px

LG

13px/28px · 16px

<!-- Primary -->
<button class="btn btn-primary">Get Started</button>

<!-- Loading state -->
<button class="btn btn-primary btn-loading"
         aria-busy="true" disabled>Saving</button>

<!-- Icon only -->
<button class="btn btn-icon"
         aria-label="Settings">
  <svg .../>
</button>
    

Section 09

Form System

Consistent form controls with clear validation states. All inputs are keyboard navigable with proper ARIA labeling.

Input States

Default Input

Focus State (click to see)

Error State

Please enter a valid email address.

Success State

Looks good!

With Hint

Your public handle on the platform.

Other Controls

Select

Textarea

Checkboxes

UX Research System Design Prototyping

Radio Group

Designer Developer

Section 10

Card System

Modular card components for metrics, dashboards, case studies, and notifications.

Total Revenue

$2.4M

+18.2% vs last quarter

Weekly Sessions

18,420

sessions this week

Deploy successful

Production build v2.4.1 deployed to Vercel in 34s.

2 minutes ago

Case Study

Enterprise ERP Redesign

Redesigned the core workflow module for 12,000+ daily users — reducing task completion time by 34%.

34%

Time saved

Figma Laravel 12K+ users

AI-Assisted

Beta

Smart Layout Generator

Generates responsive grid layouts from wireframe descriptions using Claude AI.

Section 11

Navigation System

Desktop navbar, tabs, sidebar, breadcrumbs, and mobile menu — all sharing a consistent glass-dark language.

VD.

About Services Work Experience

Desktop Navbar — glass scrolled state

Tab Navigation

Breadcrumbs

Portfolio Case Studies ERP Redesign

Section 12

Data Visualization

SVG-based charts, KPI cards, and data tables — following the same color token system.

Monthly Deliverables

Jan – Jul 2025

+24%

Skills Utilization

% of project time

UX Design

72%

Frontend

58%

Strategy

45%

AI Tooling

38%

Data Table

Project	Type	Impact	Status
ERP Redesign	UX / Product	−34% task time	Shipped
Design System	Systems	120+ tokens	Active
AI Dashboard	Full-stack	In progress	Building

Section 13

Iconography System

Lucide Icons — 1.5px stroke, consistent 24px grid. Scaled at 14/16/20/24/32px touch targets.

layout-dashboard

palette

type

cpu

zap

layers

settings-2

bar-chart-3

code-2

git-branch

sparkles

shield-check

Size Scale

14px

16px

20px

24px

32px

Color Roles

Success / Confirm

Warning / Caution

Error / Danger

Info / Neutral

Section 14

Motion System

Purposeful animation that communicates state changes without distraction. Every motion has a reason.

Easing Curves

ease-out-spring

cubic-bezier(.16, 1, .3, 1)

Entrances, slide-ins, modals

ease-out-back

cubic-bezier(.34, 1.4, .64, 1)

Sliding indicators, tooltips

ease-in-out

cubic-bezier(.4, 0, .2, 1)

Layout shifts, transitions

linear

linear

Looping animations, spinners

Duration Scale

instant

Hover, focus ring changes

100ms

fast

Dropdown open, tooltip

180ms

base

Most micro-interactions

250ms

relaxed

Page enters, panel slides

380ms

slow

Hero reveals, scroll animations

500ms

Live Motion Demos

float

4s ease-in-out infinite

pulse-glow

2s ease-in-out infinite

spin

1.5s linear infinite

Section 15

Shadow & Elevation

Five elevation levels communicate depth and hierarchy without relying on light source metaphors.

0

None

Inline, flat elements

1

Low

Cards, inputs

2

Medium

Dropdowns, popovers

3

High

Featured cards, CTAs

4

Modal

Dialogs, overlays

Section 16

Accessibility System

WCAG 2.1 AA compliance built into every component. Not a checklist — a design constraint from day one.

Focus Management

Visible focus ring

2px solid #4F7CFF, 2px offset

Touch targets

Minimum 44×44px for all interactive elements on touch devices.

Skip navigation

Skip-to-main link appears on keyboard focus — hidden from mouse users.

ARIA Patterns

<!-- Dialog -->
<div role="dialog"
     aria-modal="true"
     aria-labelledby="dialog-title">
  <h2 id="dialog-title">...</h2>
</div>

<!-- Loading button -->
<button
  aria-busy="true"
  aria-label="Saving changes">
  Saving...
</button>

<!-- Nav -->
<nav aria-label="Main navigation">
  <a aria-current="page">Home</a>
</nav>
      

Section 17

AI-Assisted Workflow

Seven-phase process from discovery to deploy — with AI acceleration at every stage.

01

Discovery

Research, AI brief

02

UX Strategy

IA, flows, jobs

03

Wireframe

Figma, AI variants

04

AI Gen

Claude, Copilot

05

Dev

Build, test

06

QA

A11y, perf, review

07

Deploy

Ship to prod

AI Tools Used at Each Phase

Research

ChatGPT-4 for user interview synthesis, pattern detection

Design

Figma AI + Midjourney for visual reference generation

Development

Claude Code + GitHub Copilot for component generation

QA

Claude for automated accessibility audits and review

Section 18

Component Library

Badges, alerts, modals, tooltips, accordions — all composable from the same token foundation.

Badges & Status

Default Active Pending Error AI-Assisted Available

Info

This component is part of the VDS component library.

Success

Your design tokens have been exported successfully.

Warning

Deprecated token used. Update to --color-primary-500.

Error

Contrast ratio below WCAG AA minimum. Use a lighter foreground.

Accordion

A design token is a named variable that stores a design decision — like a color, spacing value, or font size — so it can be reused consistently across a product's design and code.

Each component follows the BEM-inspired pattern: Base → Variant → State. Tokens are applied at the base level and overridden by variant and state modifiers.

VDS v1.0 is stable and actively used across Epicor products serving 12,000+ users daily. It is continuously refined based on real-world usage patterns.

Section 19

Responsive Design

Mobile-first. Every layout adapts through defined breakpoints — no arbitrary media queries.

Breakpoint System

Name

Min-width

Usage

xs 320px

Small phones — single column

sm 640px

Large phones — 4-col grid

md 768px

Tablets — 2-col grid, sidebar visible

lg 1024px

Desktop — 3-col layout unlocked

xl 1280px

Wide desktop — 12-col, max-width container

Responsive Typography Clamp

/* Scale smoothly between breakpoints */
.hero-title {
  font-size: clamp(28px, 4vw, 52px);
}
.section-title {
  font-size: clamp(22px, 3.5vw, 36px);
}
.body-text {
  font-size: clamp(14px, 1.5vw, 16px);
}
    

Section 20

Implementation Guidelines

Naming conventions, component architecture, and Tailwind strategy for teams building on VDS.

File Structure

src/
├── tokens/
│   ├── colors.css
│   ├── typography.css
│   └── spacing.css
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.module.css
│   │   └── Button.stories.tsx
│   ├── Card/
│   └── Form/
├── patterns/
│   ├── PageLayout.tsx
│   └── DataTable.tsx
└── utils/
    └── cn.ts
      

Naming Convention

/* CSS custom properties */
--{category}-{variant}-{scale}
/* e.g. */
--color-primary-500: #4F7CFF;
--space-4: 16px;
--radius-md: 10px;
--shadow-glow-blue: ...;

/* BEM for CSS classes */
.card                /* block */
.card__title         /* element */
.card--featured      /* modifier */
.card--featured.is-loading /* state */
      

Dos & Don'ts

DO

Use semantic token names, not raw values

Compose from primitive components upward

Test keyboard navigation in every PR

Use clamp() for fluid typography

Add aria-label to all icon-only buttons

DON'T

Hardcode hex values in component CSS

Skip hover/focus states on interactions

Use arbitrary spacing values (e.g. 13px)

Mix icon libraries in the same product

Create new animation durations ad-hoc

VDS — EnterpriseDesign Language

Design Principles

Obvious over clever

Tokens, not values

Grid-driven precision

Remove, don't add

Inclusive by default

Designed with AI

Logo System

Clear Space & Sizing Rules

Color System

Primary — Blue

Semantic Color Tokens

Contrast Ratios

Gradient Palette

Typography System

Type Scale

Font Families

Font Weights Used

Spacing & Grid

Spacing Scale

Grid System

Design Tokens

CSS Custom Properties

Tailwind Config Extension

Button System

Button Variants

Size Scale

Form System

Input States

Other Controls

Card System

Enterprise ERP Redesign

Navigation System

Tab Navigation

Breadcrumbs

Data Visualization

Data Table

Iconography System

Size Scale

Color Roles

Motion System

Easing Curves

Duration Scale

Live Motion Demos

Shadow & Elevation

Accessibility System

Focus Management

ARIA Patterns

AI-Assisted Workflow

AI Tools Used at Each Phase

Component Library

Badges & Status

Accordion

Responsive Design

Breakpoint System

Responsive Typography Clamp

Implementation Guidelines

File Structure

Naming Convention

Dos & Don'ts

Design systems built forscalable SaaS experiences.

VDS — Enterprise
Design Language

Design systems built for
scalable SaaS experiences.