Style Guide
DraftPen design system
Utility Classes
Reusable utility classes for common styling patterns
Layout Utilities
Helper classes for common layout patterns
Spacing Utilities
Consistent spacing classes for margins and padding
Typography Utilities
Text styling and formatting classes
Extra small text
Small text
Base text size
Large text
Extra large text
Light weight (300)
Normal weight (400)
Medium weight (500)
Primary color text
Muted text
Destructive/error text
Visual Utilities
Classes for borders, shadows, and visual effects
Small radius
Medium radius
Large radius
Full radius
Small shadow
Default shadow
Medium shadow
Large shadow
Responsive Utilities
Classes for responsive design across different screen sizes
Responsive text example
(Resize window to see changes)
Responsive grid item 1
Responsive grid item 2