Style Guide
DraftPen design system
Typography
Typography system and text styles used throughout DraftPen
Font Family
DraftPen uses the system font stack to match the native look and feel of each platform
This text uses the system sans-serif font
It automatically adapts to the user's operating system
This text uses the system monospace fontFont Sizes
A consistent type scale for all text elements
Extra Small (12px) - For fine print, captions
Small (14px) - For secondary text, labels
Base (16px) - For body text, default size
Large (18px) - For emphasized body text
Extra Large (20px) - For subheadings
2XL (24px) - For section headings
3XL (30px) - For page headings
4XL (36px) - For major headings
5XL (48px) - For hero text
Font Weights
Apple-inspired font weights for different text elements
Light (300) - For body text, following Apple's thin aesthetic
Normal (400) - For buttons and interactive elements
Medium (500) - For headings and emphasis
Semibold (600) - For strong emphasis
Bold (700) - For very strong emphasis, used sparingly
Line Heights
Consistent line heights for optimal readability
Line height: none (1) - This text has no additional line height, making it very compact but potentially harder to read in longer paragraphs.
Line height: tight (1.25) - This text has tight line spacing, good for headings and short text blocks where space is at a premium.
Line height: normal (1.5) - This text has standard line spacing, providing good readability for body text and longer paragraphs. This is the default for most text in the application.
Line height: loose (2) - This text has generous line spacing, which can improve readability for dense content or for users who need more visual separation between lines.
Letter Spacing
Letter spacing (tracking) for improved readability
Tighter (-0.05em) - Compact text for headlines
Tight (-0.025em) - Slightly compact text
Normal (0em) - Default letter spacing
Wide (0.025em) - Slightly expanded text
Wider (0.05em) - Expanded text for emphasis
Widest (0.1em) - Very expanded text for special cases
Text Styles
Common text style combinations used throughout the application
Headings
Page Heading (H1)
Section Heading (H2)
Subsection Heading (H3)
Component Heading (H4)
Minor Heading (H5)
Body Text
Large body text - Used for introductory paragraphs and important content. The light weight (300) follows Apple's design aesthetic.
Standard body text - The default text style for most content in the application. It uses a light weight for a clean, minimal look.
Small body text - Used for secondary information, captions, and helper text. It uses the normal weight (400) for better readability at small sizes.
Interactive Text
Usage Guidelines
Best practices for using typography in the DraftPen interface
- Use lighter font weights (300) for most body text to achieve the Apple-inspired aesthetic
- Reserve medium weights (500) for headings and important UI elements
- Maintain a clear hierarchy with consistent heading sizes
- Use muted text colors for secondary information
- Ensure sufficient contrast between text and background colors
- Apply proper line height for optimal readability (1.5 for body text)
- Use letter spacing judiciously - tighter for headings, normal or slightly wider for body text
- Limit the number of font sizes on a single page to maintain visual harmony
- Consider responsive typography that scales appropriately on different devices