💡 Built for dreamers, designed for doers. Join 150+ brands powered by Designerz Vault systems.

📦 FOUNDATIONS

Designerz Vault Design Language (DVDL) is built on three core traits: Digital. Energetic. Professional.

These traits define the entire visual system — colors, spacing, typography, components, and interactions.

Color System

Light‑mode palette designed for clarity and modern digital interfaces.

  • Primary: #3A5BFF

  • Secondary: #6A3BFF

  • Accent: #F7C14A

  • Surface: #F9FAFC

  • Text: #1A1A1C

Spacing Scale

Consistent rhythm for layout and components.

  • 4px

  • 8px

  • 12px

  • 16px

  • 24px

  • 32px

  • 48px

Radius Scale

Signature rounded geometry.

  • 6px

  • 12px

  • 20px

  • Full (999px)

Typography

Modern, readable, professional.

  • Display — 48px

  • Heading — 32px

  • Subheading — 24px

  • Body — 16px

  • Small — 14px

  • Caption — 12px

Primary Button

Used for main actions.

Styles:

  • Background: #3A5BFF

  • Text: #FFFFFF

  • Radius: 12px

  • Padding: 12px 20px

  • Font size: 16px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

Secondary Button

Used for supporting actions.

Styles:

  • Background: #6A3BFF

  • Text: #FFFFFF

  • Radius: 12px

  • Padding: 12px 20px

  • Font size: 16px

Outline Button

Used for neutral actions.

Styles:

  • Border: 2px solid #3A5BFF

  • Background: transparent

  • Text: #3A5BFF

  • Radius: 12px

  • Padding: 12px 20px

Ghost Button

Used for low‑priority actions.

Styles:

  • Background: transparent

  • Text: #1A1A1C

  • Padding: 12px 20px

  • Radius: 12px

🗂 CARDS

Cards in the Designerz Vault system are clean, structured, and professional. They use light surfaces, subtle shadows, and consistent spacing.

Base Card

Used for general content blocks.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Padding: 20px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

  • Border: 1px solid #E6E8EB

Elevated Card

Used for emphasis or interactive content.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Padding: 24px

  • Shadow: 0px 4px 12px rgba(0,0,0,0.10)

  • Border: none

Image Card

Used for previews, thumbnails, or product displays.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Overflow: hidden

  • Image height: 180px

  • Text padding: 16px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

Interactive Card

Used for clickable content.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Padding: 20px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

  • Hover: transform: translateY(-2px)

  • Hover shadow: 0px 4px 12px rgba(0,0,0,0.12)

  • Transition: 0.2s ease

Text Input

Used for standard text entry.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 12px 16px

  • Text color: #1A1A1C

  • Font size: 16px

  • Placeholder color: #7C7C80

Focus State:

  • Border: 2px solid #3A5BFF

  • Shadow: 0px 0px 0px 3px rgba(58,91,255,0.15)

Select Input (Dropdown)

Used for choosing from a list.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 12px 16px

  • Text color: #1A1A1C

  • Arrow icon color: #7C7C80

Focus State:

  • Border: 2px solid #3A5BFF

Checkbox

Used for toggling options.

Styles:

  • Size: 20px

  • Border: 2px solid #3A5BFF

  • Radius: 6px

  • Checkmark color: #FFFFFF

  • Background (checked): #3A5BFF

Toggle Switch

Used for on/off controls.

Styles:

  • Track: #E6E8EB

  • Track (active): #3A5BFF

  • Thumb: #FFFFFF

  • Thumb size: 20px

  • Radius: 999px

  • Animation: 0.2s ease

Base Modal

Used for general content, forms, and messages.

Styles:

  • Background: #FFFFFF

  • Radius: 20px

  • Width: 480px

  • Padding: 32px

  • Shadow: 0px 4px 24px rgba(0,0,0,0.12)

  • Border: 1px solid #E6E8EB

Header:

  • Font size: 24px

  • Font weight: 600

  • Margin-bottom: 16px

Body:

  • Font size: 16px

  • Color: #4A4A4D

  • Margin-bottom: 24px

Footer:

  • Gap: 12px

  • Buttons: Primary + Secondary styles

Confirmation Modal

Used for yes/no or accept/decline actions.

Styles:

  • Same as Base Modal

  • Icon size: 48px

  • Icon color: #3A5BFF

  • Text alignment: center

Buttons:

  • Primary: Confirm

  • Outline: Cancel

Alert Modal

Used for warnings or errors.

Styles:

  • Background: #FFFFFF

  • Radius: 20px

  • Padding: 32px

  • Border-left: 6px solid #F5A623 (warning)

  • Border-left: 6px solid #E74C3C (danger)

Text:

  • Heading: #1A1A1C

  • Body: #4A4A4D

Modal Overlay

Used behind all modals.

Styles:

  • Background: rgba(0,0,0,0.4)

  • Blur: 4px

  • Animation: fade-in 0.2s ease

⚠️ ALERTS

Alerts in the Designerz Vault system are clear, readable, and color‑coded for instant recognition. They use strong contrast and consistent spacing.

Success Alert

Used for confirmations and positive actions.

Styles:

  • Background: #E9F9EF

  • Border-left: 6px solid #2ECC71

  • Text color: #1A1A1C

  • Padding: 16px 20px

  • Radius: 12px

  • Icon color: #2ECC71

Warning Alert

Used for caution messages.

Styles:

  • Background: #FFF6E5

  • Border-left: 6px solid #F5A623

  • Text color: #1A1A1C

  • Padding: 16px 20px

  • Radius: 12px

  • Icon color: #F5A623

Error Alert

Used for critical issues.

Styles:

  • Background: #FDECEA

  • Border-left: 6px solid #E74C3C

  • Text color: #1A1A1C

  • Padding: 16px 20px

  • Radius: 12px

  • Icon color: #E74C3C

Info Alert

Used for neutral information.

Styles:

  • Background: #EAF2FF

  • Border-left: 6px solid #3A5BFF

  • Text color: #1A1A1C

  • Padding: 16px 20px

  • Radius: 12px

  • Icon color: #3A5BFF

🏷 BADGES & TAGS

Badges and tags in the Designerz Vault system are compact, readable, and color‑coded. They follow the radius, spacing, and color rules defined in Foundations.

Primary Badge

Used for main labels or statuses.

Styles:

  • Background: #3A5BFF

  • Text color: #FFFFFF

  • Padding: 6px 12px

  • Radius: 999px

  • Font size: 14px

  • Font weight: 500

Secondary Badge

Used for alternate labels.

Styles:

  • Background: #6A3BFF

  • Text color: #FFFFFF

  • Padding: 6px 12px

  • Radius: 999px

  • Font size: 14px

Accent Badge

Used for energetic highlights.

Styles:

  • Background: #F7C14A

  • Text color: #1A1A1C

  • Padding: 6px 12px

  • Radius: 999px

  • Font size: 14px

Neutral Tag

Used for categories or filters.

Styles:

  • Background: #F1F3F6

  • Text color: #1A1A1C

  • Padding: 6px 12px

  • Radius: 12px

  • Font size: 14px

Status Tags

Used for quick status indicators.

Success:

  • Background: #E9F9EF

  • Text: #2ECC71

Warning:

  • Background: #FFF6E5

  • Text: #F5A623

Error:

  • Background: #FDECEA

  • Text: #E74C3C

Info:

  • Background: #EAF2FF

  • Text: #3A5BFF

📊 TABLES

Tables in the Designerz Vault system are clean, structured, and easy to scan. They use clear spacing, subtle borders, and strong typography.

Base Table

Used for general data display.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Width: 100%

  • Font size: 16px

Table Header

Used for column labels.

Styles:

  • Background: #F9FAFC

  • Text color: #1A1A1C

  • Font weight: 600

  • Padding: 16px

  • Border-bottom: 1px solid #E6E8EB

Table Row

Used for data entries.

Styles:

  • Background: #FFFFFF

  • Padding: 16px

  • Text color: #4A4A4D

  • Border-bottom: 1px solid #E6E8EB

Hover State:

  • Background: #F1F3F6

  • Transition: 0.2s ease

Table Row (Selected)

Used for active or highlighted rows.

Styles:

  • Background: #EAF2FF

  • Border-left: 4px solid #3A5BFF

Table Cell

Used for individual data points.

Styles:

  • Padding: 16px

  • Text color: #1A1A1C

Table Actions

Used for edit/delete/view buttons inside rows.

Styles:

  • Icon size: 20px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

👤 AVATARS

Avatars in the Designerz Vault system are simple, clean, and consistent. They use rounded geometry and clear sizing rules.

Avatar Sizes

Used across apps, dashboards, and profiles.

Styles:

  • Small: 32px

  • Medium: 48px

  • Large: 64px

  • Extra Large: 96px

All avatars use:

  • Shape: 999px (full circle)

  • Border: 2px solid #FFFFFF (optional)

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08) (optional)

Image Avatar

Used for user profile photos.

Styles:

  • Object-fit: cover

  • Background: #F1F3F6

  • Fallback icon color: #7C7C80

Initials Avatar

Used when no photo is available.

Styles:

  • Background: #3A5BFF

  • Text color: #FFFFFF

  • Font weight: 600

  • Font size: depends on avatar size

  • Centered text

Status Indicator

Used for online/offline/away.

Styles:

  • Size: 12px

  • Shape: 999px

  • Border: 2px solid #FFFFFF

  • Position: bottom-right of avatar

Colors:

  • Online: #2ECC71

  • Away: #F5A623

  • Offline: #E6E8EB

🔄 LOADERS & SPINNERS

Loaders in the Designerz Vault system are smooth, modern, and minimal. They use brand colors and subtle motion to communicate progress.

Spinner Loader

Used for quick loading states.

Styles:

  • Size: 32px

  • Border: 4px solid #E6E8EB

  • Border-top: 4px solid #3A5BFF

  • Radius: 999px

  • Animation: spin 1s linear infinite

Keyframes:

Code

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

Dots Loader

Used for chat, messaging, or small inline loading.

Styles:

  • Dot size: 8px

  • Dot color: #3A5BFF

  • Gap: 6px

  • Animation: bounce 0.6s infinite alternate

Keyframes:

Code

@keyframes bounce { from { opacity: 0.4; transform: translateY(0); } to { opacity: 1; transform: translateY(-6px); } }

Bar Loader

Used for progress or long operations.

Styles:

  • Height: 6px

  • Background: #E6E8EB

  • Radius: 999px

  • Progress color: #3A5BFF

  • Animation: slide 1.2s infinite

Keyframes:

Code

@keyframes slide { 0% { width: 0%; } 50% { width: 60%; } 100% { width: 100%; } }

Skeleton Loader

Used for content placeholders.

Styles:

  • Background: #F1F3F6

  • Radius: 12px

  • Animation: shimmer 1.5s infinite

Keyframes:

Code

@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }

📝 FORMS

Forms in the Designerz Vault system are clean, structured, and easy to understand. They use consistent spacing, clear labels, and strong validation rules.

Form Structure

Used for all form layouts.

Styles:

  • Gap between fields: 20px

  • Label font size: 14px

  • Label color: #4A4A4D

  • Field width: 100%

  • Section spacing: 32px

Form Label

Used above inputs.

Styles:

  • Font size: 14px

  • Font weight: 500

  • Color: #1A1A1C

  • Margin-bottom: 6px

Helper Text

Used below inputs.

Styles:

  • Font size: 12px

  • Color: #7C7C80

  • Margin-top: 6px

Validation States

Success

  • Border: 2px solid #2ECC71

  • Helper text color: #2ECC71

Warning

  • Border: 2px solid #F5A623

  • Helper text color: #F5A623

Error

  • Border: 2px solid #E74C3C

  • Helper text color: #E74C3C

Form Layout Types

Single Column

Used for mobile or simple forms.

Styles:

  • Width: 100%

  • Gap: 20px

Two Column

Used for desktop or advanced forms.

Styles:

  • Column gap: 24px

  • Field width: 50%

Inline Form

Used for search bars or quick actions.

Styles:

  • Align items: center

  • Gap: 12px

Form Actions

Used at the bottom of forms.

Styles:

  • Gap: 12px

  • Buttons: Primary + Secondary

  • Alignment: right

📋 LISTS

Lists in the Designerz Vault system are clean, structured, and easy to scan. They use consistent spacing, clear typography, and subtle dividers.

Base List

Used for simple vertical lists.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 0

  • Width: 100%

List Item

Used for each row in a list.

Styles:

  • Padding: 16px 20px

  • Text color: #1A1A1C

  • Font size: 16px

  • Border-bottom: 1px solid #E6E8EB

Hover State:

  • Background: #F1F3F6

  • Transition: 0.2s ease

List Item (Active)

Used for selected or highlighted items.

Styles:

  • Background: #EAF2FF

  • Border-left: 4px solid #3A5BFF

  • Font weight: 600

List Item with Icon

Used for settings, menus, or navigation lists.

Styles:

  • Icon size: 20px

  • Icon color: #7C7C80

  • Gap: 12px

  • Align items: center

List Item with Actions

Used for edit/delete/view options.

Styles:

  • Action icon size: 20px

  • Action color: #7C7C80

  • Hover color: #3A5BFF

List Groups

Used for categorized lists.

Styles:

  • Group label font size: 14px

  • Group label color: #7C7C80

  • Group label padding: 12px 20px

  • Group spacing: 8px

🧩 GRIDS

Grids in the Designerz Vault system provide structure, alignment, and responsive layout control. They ensure consistency across pages, sections, and components.

Grid Container

Used to wrap grid layouts.

Styles:

  • Width: 100%

  • Max-width: 1200px

  • Margin: 0 auto

  • Padding: 0 24px

  • Display: grid

  • Gap: 24px

Two‑Column Grid

Used for balanced layouts.

Styles:

  • Grid-template-columns: 1fr 1fr

  • Gap: 24px

Three‑Column Grid

Used for dashboards and content-heavy pages.

Styles:

  • Grid-template-columns: 1fr 1fr 1fr

  • Gap: 24px

Four‑Column Grid

Used for galleries or dense layouts.

Styles:

  • Grid-template-columns: 1fr 1fr 1fr 1fr

  • Gap: 24px

Responsive Behavior

Tablet

  • Two columns

  • Gap: 20px

Mobile

  • One column

  • Gap: 16px

Grid Item

Used for content inside grids.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Padding: 20px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

🌑 SHADOWS

Shadows in the Designerz Vault system are soft, modern, and professional. They create depth without being heavy or distracting.

Shadow Scale

Used across cards, modals, dropdowns, tooltips, and interactive elements.

Shadow 1 — Subtle

Used for small elements (badges, small cards).

Styles:

  • 0px 1px 2px rgba(0,0,0,0.06)

Shadow 2 — Base

Used for cards, list items, and small surfaces.

Styles:

  • 0px 2px 4px rgba(0,0,0,0.08)

Shadow 3 — Elevated

Used for interactive cards, hover states, and dropdowns.

Styles:

  • 0px 4px 12px rgba(0,0,0,0.10)

Shadow 4 — Modal

Used for modals and large elevated surfaces.

Styles:

  • 0px 4px 24px rgba(0,0,0,0.12)

Shadow 5 — Deep

Used for overlays or high‑emphasis elements.

Styles:

  • 0px 8px 32px rgba(0,0,0,0.16)

Shadow Rules

To keep the system consistent:

  • Never mix multiple shadow levels on the same component

  • Use lighter shadows for smaller elements

  • Use deeper shadows for overlays and modals

  • Always pair shadows with proper radius values

  • Avoid harsh or dark shadows — keep everything soft and modern

🎞 MOTION & ANIMATION

Motion in the Designerz Vault system is smooth, subtle, and purposeful. It enhances usability without being distracting.

Motion Principles

All animations follow these rules:

  • Keep motion under 300ms

  • Use ease or ease‑in‑out curves

  • Avoid harsh or sudden movements

  • Motion should communicate meaning (not decoration)

  • Use consistent timing across all components

Fade In

Used for modals, overlays, dropdowns, tooltips.

Styles:

Code

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

Timing: 0.2s ease

Fade Out

Used for closing modals or overlays.

Styles:

Code

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

Timing: 0.2s ease

Slide Up

Used for dropdowns, cards, and small panels.

Styles:

Code

@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

Timing: 0.25s ease

Slide Down

Used for closing dropdowns or panels.

Styles:

Code

@keyframes slideDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(12px); opacity: 0; } }

Timing: 0.25s ease

Scale In

Used for buttons, cards, and interactive elements.

Styles:

Code

@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

Timing: 0.2s ease-out

Hover Lift

Used for interactive cards and buttons.

Styles:

  • Transform: translateY(-2px)

  • Shadow: 0px 4px 12px rgba(0,0,0,0.12)

  • Timing: 0.2s ease

Press Feedback

Used for buttons.

Styles:

  • Transform: scale(0.97)

  • Timing: 0.1s ease-in

🔣 ICONS

Icons in the Designerz Vault system are clean, geometric, and minimal. They follow strict sizing, stroke, and color rules to stay consistent across all components.

Icon Style Rules

All icons follow these system standards:

Styles:

  • Stroke width: 2px

  • Corner radius: soft, geometric

  • Color (default): #1A1A1C

  • Color (muted): #7C7C80

  • Color (brand): #3A5BFF

  • Grid: 24px

  • Padding inside grid: 2px

Icon Sizes

Used across UI components.

Styles:

  • Small: 16px

  • Medium: 20px

  • Large: 24px

  • Extra Large: 32px

Icon Types

Designerz Vault supports these categories:

  • System Icons — settings, search, home, menu, close

  • Navigation Icons — arrows, chevrons, tabs

  • Status Icons — success, warning, error, info

  • Media Icons — play, pause, volume, camera

  • Action Icons — edit, delete, share, download

  • User Icons — profile, avatar, group

Icon Usage Rules

To keep everything consistent:

  • Use muted icons for secondary actions

  • Use brand icons for primary actions

  • Use system icons for universal actions

  • Never mix stroke widths

  • Avoid overly detailed icons

  • Keep icons simple and readable at small sizes

Icon Container

Used when icons appear inside buttons or UI elements.

Styles:

  • Background: transparent

  • Radius: 8px

  • Padding: 6px

  • Hover background: #F1F3F6

  • Transition: 0.2s ease

💬 TOOLTIPS

Tooltips in the Designerz Vault system are clean, readable, and subtle. They appear instantly on hover or focus and follow your motion rules.

Tooltip Container

Used for all tooltip bubbles.

Styles:

  • Background: #1A1A1C

  • Text color: #FFFFFF

  • Font size: 14px

  • Padding: 8px 12px

  • Radius: 8px

  • Max-width: 240px

  • Line-height: 1.4

  • Shadow: 0px 4px 12px rgba(0,0,0,0.12)

  • Animation: fadeIn 0.2s ease

Tooltip Arrow

Used to point toward the target element.

Styles:

  • Size: 8px

  • Shape: triangle

  • Color: #1A1A1C

  • Position: centered on edge

  • Offset: -4px

Tooltip Trigger

Used for hover or focus interactions.

Styles:

  • Cursor: help or pointer

  • Icon size: 16px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

Tooltip Positions

Supported placements:

  • Top

  • Bottom

  • Left

  • Right

Rules:

  • Always maintain 8px spacing from the trigger

  • Arrow always points toward the trigger

  • Tooltip should never block important UI elements

Tooltip Behavior

To keep interactions smooth:

  • Appears on hover or focus

  • Disappears on mouse leave or blur

  • Uses fade‑in and fade‑out motion

  • Avoid long sentences — keep tooltips short and clear

🔔 TOASTS

Toasts in the Designerz Vault system are clean, modern, and unobtrusive. They appear in the corner of the screen and disappear automatically.

Toast Container

Used to hold all active toasts.

Styles:

  • Position: fixed

  • Bottom: 24px

  • Right: 24px

  • Display: flex

  • Flex-direction: column

  • Gap: 12px

  • Z-index: 9999

Toast Base

Used for all toast types.

Styles:

  • Background: #FFFFFF

  • Radius: 12px

  • Padding: 16px 20px

  • Shadow: 0px 4px 12px rgba(0,0,0,0.12)

  • Border-left: 4px solid (color varies by type)

  • Display: flex

  • Align-items: center

  • Gap: 12px

  • Animation: slideUp 0.25s ease

Toast Types

Success

  • Border-left: #2ECC71

  • Icon color: #2ECC71

Warning

  • Border-left: #F5A623

  • Icon color: #F5A623

Error

  • Border-left: #E74C3C

  • Icon color: #E74C3C

Info

  • Border-left: #3A5BFF

  • Icon color: #3A5BFF

Toast Message

Used for the text inside the toast.

Styles:

  • Font size: 16px

  • Color: #1A1A1C

  • Line-height: 1.4

Toast Close Button

Used to manually dismiss a toast.

Styles:

  • Icon size: 16px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

  • Cursor: pointer

  • Transition: 0.2s ease

Toast Behavior

To keep interactions smooth:

  • Appears instantly

  • Auto-dismisses after 3–5 seconds

  • Stacks vertically

  • Uses slide‑up motion

  • Never blocks important UI elements

🗂 CARDS

Cards in the Designerz Vault system are clean, structured, and flexible. They use strong spacing, soft shadows, and clear hierarchy.

Base Card

Used for general content blocks.

Styles:

  • Background: #FFFFFF

  • Radius: 16px

  • Padding: 24px

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

  • Border: 1px solid #E6E8EB

  • Display: flex

  • Flex-direction: column

  • Gap: 16px

Card Header

Used for titles or top content.

Styles:

  • Font size: 20px

  • Font weight: 600

  • Color: #1A1A1C

  • Margin-bottom: 8px

Card Subheader

Used for secondary text.

Styles:

  • Font size: 14px

  • Color: #7C7C80

  • Margin-bottom: 12px

Card Body

Used for main content.

Styles:

  • Font size: 16px

  • Color: #4A4A4D

  • Line-height: 1.5

Card Footer

Used for actions or extra info.

Styles:

  • Display: flex

  • Gap: 12px

  • Margin-top: 12px

Interactive Card

Used for clickable cards.

Styles:

  • Cursor: pointer

  • Transition: 0.2s ease

  • Hover:

    • Transform: translateY(-2px)

    • Shadow: 0px 4px 12px rgba(0,0,0,0.12)

Media Card

Used for images, thumbnails, or previews.

Styles:

  • Image radius: 12px

  • Image height: 180px

  • Object-fit: cover

  • Margin-bottom: 16px

Stat Card

Used for analytics and dashboards.

Styles:

  • Number font size: 32px

  • Number weight: 700

  • Label font size: 14px

  • Label color: #7C7C80

  • Icon size: 24px

  • Icon color: #3A5BFF

📁 ACCORDIONS

Accordions in the Designerz Vault system are smooth, structured, and easy to interact with. They use clear spacing, subtle borders, and your motion rules.

Accordion Container

Used to wrap multiple accordion items.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Overflow: hidden

Accordion Item

Used for each collapsible section.

Styles:

  • Border-bottom: 1px solid #E6E8EB

  • Transition: 0.25s ease

Accordion Header

Used for the clickable title.

Styles:

  • Padding: 16px 20px

  • Font size: 16px

  • Font weight: 600

  • Color: #1A1A1C

  • Display: flex

  • Align-items: center

  • Justify-content: space-between

  • Cursor: pointer

Icon:

  • Size: 20px

  • Color: #7C7C80

  • Rotation when open: 180deg

  • Transition: 0.25s ease

Accordion Content

Used for the expanded section.

Styles:

  • Padding: 0 20px 16px 20px

  • Font size: 15px

  • Color: #4A4A4D

  • Line-height: 1.5

  • Animation: slideDown 0.25s ease

Accordion Behavior

To keep interactions smooth:

  • Only expand on click

  • Collapse when clicking again

  • Support single-open or multi-open modes

  • Use slide‑down and slide‑up animations

  • Keep content short and scannable

🔢 PAGINATION

Pagination in the Designerz Vault system is clean, simple, and easy to interact with. It uses clear spacing, strong contrast, and consistent sizing.

Pagination Container

Used to wrap pagination controls.

Styles:

  • Display: flex

  • Align-items: center

  • Gap: 8px

  • Padding: 16px 0

  • Justify-content: center

Pagination Button

Used for page numbers and arrows.

Styles:

  • Height: 40px

  • Min-width: 40px

  • Padding: 0 12px

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 8px

  • Font size: 16px

  • Color: #1A1A1C

  • Cursor: pointer

  • Transition: 0.2s ease

Hover:

  • Background: #F1F3F6

Pagination Button (Active)

Used for the current page.

Styles:

  • Background: #3A5BFF

  • Color: #FFFFFF

  • Border-color: #3A5BFF

Pagination Ellipsis

Used when skipping large ranges.

Styles:

  • Font size: 16px

  • Color: #7C7C80

  • Padding: 0 8px

Pagination Arrows

Used for next/previous navigation.

Styles:

  • Icon size: 20px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

Pagination Behavior

To keep interactions smooth:

  • Always show current page

  • Show at least one page before/after current

  • Use ellipsis for long ranges

  • Disable arrows when at start/end

  • Keep spacing consistent

🔍 SEARCH BARS

Search bars in the Designerz Vault system are clean, simple, and easy to use. They use clear spacing, strong contrast, and smooth interactions.

Search Bar Container

Used for all search input layouts.

Styles:

  • Width: 100%

  • Max-width: 480px

  • Position: relative

Search Input

Used for typing search queries.

Styles:

  • Height: 48px

  • Width: 100%

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 0 48px 0 16px

  • Font size: 16px

  • Color: #1A1A1C

  • Transition: 0.2s ease

Focus:

  • Border-color: #3A5BFF

  • Shadow: 0px 0px 0px 3px rgba(58,91,255,0.15)

Search Icon

Used inside the input.

Styles:

  • Position: absolute

  • Left: 16px

  • Top: 50%

  • Transform: translateY(-50%)

  • Icon size: 20px

  • Icon color: #7C7C80

Clear Button

Used to clear the search input.

Styles:

  • Position: absolute

  • Right: 16px

  • Top: 50%

  • Transform: translateY(-50%)

  • Icon size: 18px

  • Icon color: #7C7C80

  • Cursor: pointer

  • Hover color: #3A5BFF

Search Suggestions

Used for autocomplete or recommended searches.

Styles:

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Margin-top: 8px

  • Shadow: 0px 4px 12px rgba(0,0,0,0.12)

  • Overflow: hidden

Suggestion Item

  • Padding: 12px 16px

  • Font size: 16px

  • Color: #4A4A4D

  • Cursor: pointer

  • Hover background: #F1F3F6

Search Behavior

To keep interactions smooth:

  • Show suggestions when typing

  • Hide suggestions when input is empty

  • Clear button only appears when text exists

  • Use fade‑in and slide‑up motion

  • Keep suggestions short and scannable

🏷 BADGES

Badges in the Designerz Vault system are small, clean, and highly readable. They use strong color coding and consistent sizing.

Badge Base

Used for all badge types.

Styles:

  • Display: inline-flex

  • Align-items: center

  • Padding: 4px 10px

  • Font size: 13px

  • Font weight: 600

  • Radius: 8px

  • Line-height: 1

  • Gap: 6px

Badge Colors

Primary

  • Background: #3A5BFF

  • Text color: #FFFFFF

Secondary

  • Background: #E6E8EB

  • Text color: #1A1A1C

Success

  • Background: #2ECC71

  • Text color: #FFFFFF

Warning

  • Background: #F5A623

  • Text color: #FFFFFF

Error

  • Background: #E74C3C

  • Text color: #FFFFFF

Info

  • Background: #EAF2FF

  • Text color: #3A5BFF

Badge with Icon

Used for status indicators or category tags.

Styles:

  • Icon size: 14px

  • Icon color: inherit

  • Gap: 6px

Badge Pill

Used for rounded category tags.

Styles:

  • Radius: 999px

  • Padding: 4px 12px

Badge Count

Used for notifications or item counts.

Styles:

  • Min-width: 20px

  • Height: 20px

  • Display: flex

  • Align-items: center

  • Justify-content: center

  • Background: #3A5BFF

  • Text color: #FFFFFF

  • Radius: 999px

  • Font size: 12px

  • Font weight: 700

Badge Behavior

To keep usage consistent:

  • Use bright colors for status

  • Use muted colors for categories

  • Keep text short (1–2 words)

  • Avoid long sentences

  • Use pill badges for tags

  • Use count badges for notifications

💠 CHIPS

Chips in the Designerz Vault system are lightweight, interactive, and clean. They’re used for filters, selections, tags, and quick actions.

Chip Base

Used for all chip types.

Styles:

  • Display: inline-flex

  • Align-items: center

  • Padding: 6px 12px

  • Background: #F1F3F6

  • Color: #1A1A1C

  • Font size: 14px

  • Radius: 999px

  • Gap: 8px

  • Cursor: pointer

  • Transition: 0.2s ease

Hover:

  • Background: #E6E8EB

Chip (Selected)

Used for active filters or selected tags.

Styles:

  • Background: #3A5BFF

  • Color: #FFFFFF

  • Shadow: 0px 2px 4px rgba(0,0,0,0.08)

Chip with Icon

Used for category or filter chips.

Styles:

  • Icon size: 16px

  • Icon color: inherit

  • Gap: 8px

Chip with Remove Button

Used for removable tags or filters.

Styles:

  • Remove icon size: 14px

  • Remove icon color: #7C7C80

  • Hover color: #E74C3C

  • Cursor: pointer

  • Transition: 0.2s ease

Chip Group

Used for multiple chips together.

Styles:

  • Display: flex

  • Flex-wrap: wrap

  • Gap: 8px

Chip Behavior

To keep interactions smooth:

  • Chips should feel lightweight

  • Selected chips use brand color

  • Remove buttons only appear on removable chips

  • Keep text short (1–2 words)

  • Use icons for clarity when needed

👤 AVATARS

Avatars in the Designerz Vault system are clean, consistent, and flexible. They support images, initials, status indicators, and group avatars.

Avatar Base

Used for all avatar types.

Styles:

  • Display: inline-flex

  • Align-items: center

  • Justify-content: center

  • Background: #E6E8EB

  • Color: #1A1A1C

  • Font-weight: 600

  • Radius: 50%

  • Overflow: hidden

Avatar Sizes

Styles:

  • XS: 24px

  • SM: 32px

  • MD: 40px

  • LG: 56px

  • XL: 72px

Avatar Image

Used when a user has a profile photo.

Styles:

  • Width: 100%

  • Height: 100%

  • Object-fit: cover

Avatar Initials

Used when no photo is available.

Styles:

  • Font-size:

    • XS: 12px

    • SM: 14px

    • MD: 16px

    • LG: 20px

    • XL: 28px

Avatar Status Indicator

Used for online/offline/away status.

Styles:

  • Position: absolute

  • Bottom: 0

  • Right: 0

  • Size: 12px

  • Radius: 50%

  • Border: 2px solid #FFFFFF

Status Colors:

  • Online: #2ECC71

  • Away: #F5A623

  • Offline: #7C7C80

Avatar Group

Used for overlapping avatars (teams, participants).

Styles:

  • Display: flex

  • Align-items: center

  • Gap: -12px

  • Border: 2px solid #FFFFFF (for overlap clarity)

Avatar Behavior

To keep usage consistent:

  • Use initials when no photo exists

  • Use status indicators sparingly

  • Keep avatars circular for consistency

  • Use group avatars for teams or shared items

  • Avoid overly large avatars unless needed for profile pages

📊 TABLES

Tables in the Designerz Vault system are clean, structured, and highly readable. They use strong spacing, subtle borders, and clear alignment.

Table Container

Used to wrap the entire table.

Styles:

  • Width: 100%

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Overflow: hidden

Table Header

Used for column labels.

Styles:

  • Background: #F8F9FB

  • Font size: 14px

  • Font weight: 600

  • Color: #4A4A4D

  • Padding: 16px

  • Border-bottom: 1px solid #E6E8EB

  • Text-align: left

Table Row

Used for each data row.

Styles:

  • Background: #FFFFFF

  • Border-bottom: 1px solid #E6E8EB

  • Transition: 0.2s ease

Hover:

  • Background: #F1F3F6

Table Cell

Used for data inside rows.

Styles:

  • Padding: 16px

  • Font size: 15px

  • Color: #1A1A1C

  • Line-height: 1.4

Table Cell (Muted)

Used for secondary data.

Styles:

  • Color: #7C7C80

Table Cell (Right Aligned)

Used for numbers, prices, stats.

Styles:

  • Text-align: right

Table Cell (Center Aligned)

Used for icons, status, or actions.

Styles:

  • Text-align: center

Table Actions

Used for edit/delete/view icons.

Styles:

  • Display: flex

  • Gap: 12px

  • Icon size: 18px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

Table Status Badge

Used inside tables for status indicators.

Styles:

  • Font size: 13px

  • Padding: 4px 10px

  • Radius: 8px

  • Background: based on status

  • Color: #FFFFFF

Table Empty State

Used when no data is available.

Styles:

  • Padding: 40px

  • Text-align: center

  • Font size: 16px

  • Color: #7C7C80

Table Behavior

To keep tables clean and readable:

  • Keep rows consistent in height

  • Use hover states for clarity

  • Align numbers to the right

  • Use badges for status

  • Avoid clutter — keep actions minimal

  • Use muted text for secondary info

🪟 MODALS

Modals in the Designerz Vault system are clean, centered, and highly readable. They use strong spacing, soft shadows, and smooth animations.

Modal Overlay

Used behind the modal to dim the background.

Styles:

  • Position: fixed

  • Top: 0

  • Left: 0

  • Width: 100%

  • Height: 100%

  • Background: rgba(0,0,0,0.4)

  • Backdrop-filter: blur(2px)

  • Animation: fadeIn 0.2s ease

  • Z-index: 9998

Modal Container

Used for the modal itself.

Styles:

  • Position: fixed

  • Top: 50%

  • Left: 50%

  • Transform: translate(-50%, -50%)

  • Background: #FFFFFF

  • Radius: 16px

  • Width: 100%

  • Max-width: 480px

  • Padding: 32px

  • Box-shadow: 0px 8px 32px rgba(0,0,0,0.16)

  • Animation: scaleIn 0.25s ease

  • Z-index: 9999

Modal Header

Used for the title.

Styles:

  • Font-size: 22px

  • Font-weight: 700

  • Color: #1A1A1C

  • Margin-bottom: 12px

Modal Subheader

Used for supporting text.

Styles:

  • Font-size: 15px

  • Color: #4A4A4D

  • Line-height: 1.5

  • Margin-bottom: 20px

Modal Body

Used for content, forms, or messages.

Styles:

  • Font-size: 16px

  • Color: #1A1A1C

  • Line-height: 1.5

  • Margin-bottom: 24px

Modal Footer

Used for action buttons.

Styles:

  • Display: flex

  • Gap: 12px

  • Justify-content: flex-end

Modal Close Button

Used to close the modal.

Styles:

  • Position: absolute

  • Top: 20px

  • Right: 20px

  • Icon size: 20px

  • Icon color: #7C7C80

  • Hover color: #3A5BFF

  • Cursor: pointer

  • Transition: 0.2s ease

Modal Behavior

To keep interactions smooth:

  • Overlay fades in

  • Modal scales in

  • Close button always visible

  • Clicking overlay closes modal

  • ESC key closes modal

  • Avoid overly long content

  • Keep actions clear and minimal

📝 FORMS

Forms in the Designerz Vault system are clean, accessible, and consistent. They use strong spacing, clear labels, and smooth interactions.

Form Structure

Used for all form layouts.

Styles:

  • Display: flex

  • Flex-direction: column

  • Gap: 20px

  • Width: 100%

  • Max-width: 480px

Form Label

Used above inputs.

Styles:

  • Font-size: 15px

  • Font-weight: 600

  • Color: #1A1A1C

  • Margin-bottom: 6px

Text Input

Used for standard text fields.

Styles:

  • Height: 48px

  • Width: 100%

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 0 16px

  • Font-size: 16px

  • Color: #1A1A1C

  • Transition: 0.2s ease

Focus:

  • Border-color: #3A5BFF

  • Shadow: 0px 0px 0px 3px rgba(58,91,255,0.15)

Textarea

Used for multi-line input.

Styles:

  • Min-height: 120px

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 16px

  • Font-size: 16px

  • Line-height: 1.5

  • Resize: vertical

Select Dropdown

Used for options.

Styles:

  • Height: 48px

  • Background: #FFFFFF

  • Border: 1px solid #E6E8EB

  • Radius: 12px

  • Padding: 0 16px

  • Font-size: 16px

  • Cursor: pointer

Checkbox

Used for multi-select options.

Styles:

  • Size: 20px

  • Border: 2px solid #7C7C80

  • Radius: 6px

  • Checked background: #3A5BFF

  • Checked icon color: #FFFFFF

Radio Button

Used for single-choice options.

Styles:

  • Size: 20px

  • Border: 2px solid #7C7C80

  • Radius: 50%

  • Checked dot: #3A5BFF

Toggle Switch

Used for on/off settings.

Styles:

  • Width: 44px

  • Height: 24px

  • Background: #E6E8EB

  • Radius: 999px

  • Thumb size: 20px

  • Thumb background: #FFFFFF

  • On background: #3A5BFF

Form Validation

Used for errors and success states.

Error

  • Border-color: #E74C3C

  • Text color: #E74C3C

  • Message font-size: 14px

Success

  • Border-color: #2ECC71

  • Text color: #2ECC71

Form Behavior

To keep forms consistent:

  • Labels always above inputs

  • Use clear spacing

  • Show validation immediately

  • Keep inputs large and readable

  • Use consistent focus styles

  • Avoid clutter — keep forms simple

🔘 BUTTONS (FINAL VERSION)

Buttons in the Designerz Vault system are bold, modern, and consistent. They use strong color contrast, smooth motion, and clear states.

🔹 Button Base

Used for all button types.

Styles:

  • Display: inline-flex

  • Align-items: center

  • Justify-content: center

  • Gap: 8px

  • Height: 48px

  • Padding: 0 20px

  • Font-size: 16px

  • Font-weight: 600

  • Radius: 12px

  • Cursor: pointer

  • Transition: 0.2s ease

  • Border: none

🔹 Button Variants

Primary

  • Background: #3A5BFF

  • Text color: #FFFFFF

  • Hover: #2F4BDD

  • Active: #243BBF

Secondary

  • Background: #E6E8EB

  • Text color: #1A1A1C

  • Hover: #D8DADD

  • Active: #C9CBCE

Outline

  • Background: transparent

  • Border: 2px solid #3A5BFF

  • Text color: #3A5BFF

  • Hover background: #EAF2FF

Ghost

  • Background: transparent

  • Text color: #1A1A1C

  • Hover background: #F1F3F6

Danger

  • Background: #E74C3C

  • Text color: #FFFFFF

  • Hover: #D84333

  • Active: #C73C2D

🔹 Button Sizes

Small

  • Height: 40px

  • Padding: 0 16px

  • Font-size: 14px

Medium

  • Height: 48px

  • Padding: 0 20px

  • Font-size: 16px

Large

  • Height: 56px

  • Padding: 0 24px

  • Font-size: 18px

🔹 Button with Icon

Used for actions with visual meaning.

Styles:

  • Icon size: 20px

  • Icon color: inherit

  • Gap: 8px

🔹 Icon‑Only Button

Used for small actions.

Styles:

  • Height: 40px

  • Width: 40px

  • Radius: 12px

  • Icon size: 20px

  • Background: #F1F3F6

  • Hover background: #E6E8EB

🔹 Loading Button

Used during async actions.

Styles:

  • Spinner size: 20px

  • Spinner color: #FFFFFF (primary)

  • Disable pointer events

  • Reduce opacity to 0.7

🔹 Disabled State

Used when button is inactive.

Styles:

  • Background: #D8DADD

  • Text color: #7C7C80

  • Cursor: not-allowed

  • No hover effects

🔹 Button Behavior

To keep interactions smooth:

  • Use motion: pressDown on click

  • Keep icons aligned

  • Loading replaces text

  • Disabled removes hover

  • Primary is used for main actions

  • Danger only for destructive actions

🧱 LAYOUTS

Layouts in the Designerz Vault system are clean, structured, and responsive. They define spacing, alignment, and how components fit together.

🔹 Page Container

Used for full-page layouts.

Styles:

  • Width: 100%

  • Max-width: 1280px

  • Margin: 0 auto

  • Padding: 40px 24px

🔹 Section

Used to divide content into blocks.

Styles:

  • Margin-bottom: 48px

  • Display: flex

  • Flex-direction: column

  • Gap: 24px

🔹 Section Header

Used for titles inside sections.

Styles:

  • Font-size: 24px

  • Font-weight: 700

  • Color: #1A1A1C

  • Margin-bottom: 12px

🔹 Grid Layout

Used for multi-column layouts.

Styles:

  • Display: grid

  • Gap: 24px

  • Grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))

🔹 Flex Layout

Used for horizontal or vertical alignment.

Styles:

  • Display: flex

  • Gap: 24px

Flex Directions

  • Row

  • Column

Flex Alignment

  • Align-items: center

  • Justify-content: space-between

🔹 Sidebar + Content Layout

Used for dashboards.

Styles:

  • Display: grid

  • Grid-template-columns: 260px 1fr

  • Gap: 32px

🔹 Card Grid

Used for product listings or dashboards.

Styles:

  • Display: grid

  • Gap: 24px

  • Grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))

🔹 Responsive Behavior

Designerz Vault layout rules:

  • Mobile: stack vertically

  • Tablet: 2-column grids

  • Desktop: full grid

  • Use spacing tokens consistently

  • Avoid fixed widths except for sidebars

  • Keep padding generous for readability

🏁 SYSTEM WRAP‑UP

The Designerz Vault Design System is a complete UI framework built for clarity, consistency, and scalability. This final section defines how the system is maintained, updated, and used across projects.

🔹 System Identity

Designerz Vault is built on:

  • Clean geometry

  • Soft shadows

  • Strong spacing

  • Modern color contrast

  • Smooth motion

  • Clear hierarchy

  • Flexible components

It is designed for dashboards, apps, websites, and digital products.

🔹 Versioning

Use semantic versioning:

  • v1.0.0 — Initial release

  • v1.1.0 — New components

  • v1.2.0 — Visual updates

  • v2.0.0 — Major redesigns

🔹 Component Rules

To keep the system consistent:

  • All components use spacing tokens

  • All colors come from the palette

  • All motion uses system animations

  • All radiuses follow radius tokens

  • All icons follow icon guidelines

  • All typography uses system scale

🔹 Accessibility

Designerz Vault follows:

  • WCAG AA contrast

  • Clear focus states

  • Keyboard navigation

  • Screen‑reader labels

  • Logical hierarchy

🔹 Contribution Guidelines

When adding new components:

  • Follow spacing rules

  • Follow color rules

  • Follow typography scale

  • Follow motion rules

  • Document clearly

  • Include examples

🔹 System Export

Designerz Vault can be exported as:

  • Design tokens

  • Component library

  • Documentation site

  • UI kit

  • Code components

🔹 Maintenance

Update the system when:

  • New patterns emerge

  • Components become outdated

  • Accessibility rules change

  • Brand evolves

  • Product expands

© 2025. All rights reserved.