Design System
🎨 Design system - colors, typography, icons, and visual guidelines
🎨 Color Palette
VWF uses a warm, welcoming color palette inspired by natural elements.
Sky
#4BA3E3
Earth
#8B6F47
Sunset
#E94B3C
Sunrise
#F59E42
SlateTealOceanVioletBlushRosePlumNavyGrapeOliveTangyAmberSiennaPeachRustCocoa
🎭 Icon Library
Oracle JET Icon Font provides 1000+ professional icons with semantic names.
home
search
settings
contact
bell-ring
heart
star
message
calendar
clock
location-pin
phone
lock
lock-open
check-circle
Usage Pattern
Icons use the oj-ux-ico-* class pattern:
span({ class: 'oj-ux-ico-home text-xl text-sky' })📝 Typography
Clean, readable typography system built on system fonts.
Font Stack
System font stack for optimal performance and native feel
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Type Scale
Heading 1
Heading 2
Heading 3
Heading 4
Body text
Small text
Extra small text
📐 Spacing System
Consistent spacing scale using Tailwind's spacing utilities.
Micro Spacing
- • 1 (0.25rem / 4px)
- • 2 (0.5rem / 8px)
- • 3 (0.75rem / 12px)
- • 4 (1rem / 16px)
Base Spacing
- • 6 (1.5rem / 24px)
- • 8 (2rem / 32px)
- • 12 (3rem / 48px)
- • 16 (4rem / 64px)
Large Spacing
- • 20 (5rem / 80px)
- • 24 (6rem / 96px)
- • 32 (8rem / 128px)
- • 40 (10rem / 160px)
Usage
- • gap-4 (grid gaps)
- • space-y-8 (vertical)
- • px-5 (horizontal)
- • py-8 (vertical)
Explore vwf
Discover what vwf can do