Draftpen
Screenshot
Code
Tweet
Essay
Carousel
Social Proof
Changelog
PDF Tools
Image Converter
Image Tools
eBook Tools
Toggle theme
Style Guide
DraftPen design system
Introduction
Design Tokens
Components
Patterns
Utilities
Announcements
Design Tokens
Core design variables that define the visual language of DraftPen
Colors
Color palette and semantic color tokens
View Tokens
Typography
Font families, sizes, weights, and text styles
View Tokens
Spacing
Margin, padding, and layout spacing values
View Tokens
Borders & Shadows
Border widths, radii, and shadow definitions
View Tokens