Draftpen Style Guide

Introduction

This style guide documents the design system used throughout DraftPen. It follows Apple's design principles of clarity, deference, and depth to create a clean, minimal, and professional user experience.

Apple-Inspired Design

DraftPen follows Apple's design principles with these key characteristics:

• Clean, minimal UI with reduced visual noise
• Thinner fonts (300 for body, 400 for buttons, 500 for headings)
• Subtle animations with Apple's cubic-bezier timing
• Translucent backdrops with blur effects
• Minimal shadows replaced with subtle borders

1/* Example of design tokens */
2:root {
3  /* Colors */
4  --color-primary: #0071e3;
5  --color-background: #f5f5f7;
6  --color-text: #1d1d1f;
7  
8  /* Typography */
9  --font-weight-light: 300;
10  --font-weight-normal: 400;
11  --font-weight-medium: 500;
12  
13  /* Animations */
14  --transition-standard: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
15}

Getting Started

Use the sidebar navigation to explore different sections of the style guide. Each component includes interactive examples, code snippets, and usage guidelines.