Getting Started

Getting Started Card Component Example VS Code Extension Base Styles

Spacing

Sizing System

Colours

Colour Palette Background Gradients

Box

Box Shadow Border Radius Border Width Outline Outline Offset Opacity Z-Index

Typography

Font Family Font Size Line Height Font Weight Letter Spacing

Helpers

Media body classes

Transitions and Animations

Transition Transition Duration Transition Timing Function Transition Delay

Animation (WIP)

Customizing

Customizing (WIP)

Custom Export (WIP)

Module

JS Variables (WIP)

Generate CSS (WIP)

Colour Palette

Dashvar provides CSS Variables for different carefully chosen colours to be distinct from each other and flexible to support different use cases.

Gray

var(--white)

#ffffff

var(--gray-50)

#f9fafb

var(--gray-100)

#f3f4f6

var(--gray-200)

#e5e7eb

var(--gray-300)

#d1d5db

var(--gray-400)

#9ca3af

var(--gray-500)

#6b7280

var(--gray-600)

#4b5563

var(--gray-700)

#374151

var(--gray-800)

#1f2937

var(--gray-900)

#111827

var(--black)

#000000

Red

var(--red-50)

#fef2f2

var(--red-100)

#fee2e2

var(--red-200)

#fecaca

var(--red-300)

#fca5a5

var(--red-400)

#f87171

var(--red-500)

#ef4444

var(--red-600)

#dc2626

var(--red-700)

#b91c1c

var(--red-800)

#991b1b

var(--red-900)

#7f1d1d

Yellow

var(--yellow-50)

#fffbeb

var(--yellow-100)

#fef3c7

var(--yellow-200)

#fde68a

var(--yellow-300)

#fcd34d

var(--yellow-400)

#fbbf24

var(--yellow-500)

#f59e0b

var(--yellow-600)

#d97706

var(--yellow-700)

#b45309

var(--yellow-800)

#92400e

var(--yellow-900)

#78350f

Green

var(--green-50)

#ecfdf5

var(--green-100)

#d1fae5

var(--green-200)

#a7f3d0

var(--green-300)

#6ee7b7

var(--green-400)

#34d399

var(--green-500)

#10b981

var(--green-600)

#059669

var(--green-700)

#047857

var(--green-800)

#065f46

var(--green-900)

#064e3b

Blue

var(--blue-50)

#eff6ff

var(--blue-100)

#dbeafe

var(--blue-200)

#bfdbfe

var(--blue-300)

#93c5fd

var(--blue-400)

#60a5fa

var(--blue-500)

#3b82f6

var(--blue-600)

#2563eb

var(--blue-700)

#1d4ed8

var(--blue-800)

#1e40af

var(--blue-900)

#1e3a8a

Indigo

var(--indigo-50)

#eef2ff

var(--indigo-100)

#e0e7ff

var(--indigo-200)

#c7d2fe

var(--indigo-300)

#a5b4fc

var(--indigo-400)

#818cf8

var(--indigo-500)

#6366f1

var(--indigo-600)

#4f46e5

var(--indigo-700)

#4338ca

var(--indigo-800)

#3730a3

var(--indigo-900)

#312e81

Purple

var(--purple-50)

#f5f3ff

var(--purple-100)

#ede9fe

var(--purple-200)

#ddd6fe

var(--purple-300)

#c4b5fd

var(--purple-400)

#a78bfa

var(--purple-500)

#8b5cf6

var(--purple-600)

#7c3aed

var(--purple-700)

#6d28d9

var(--purple-800)

#5b21b6

var(--purple-900)

#4c1d95

Pink

var(--pink-50)

#fdf2f8

var(--pink-100)

#fce7f3

var(--pink-200)

#fbcfe8

var(--pink-300)

#f9a8d4

var(--pink-400)

#f472b6

var(--pink-500)

#ec4899

var(--pink-600)

#db2777

var(--pink-700)

#be185d

var(--pink-800)

#9d174d

var(--pink-900)

#831843

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.