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