Design System
A comprehensive guide to the design system used in this project.
Colors
Primary
Secondary
Gray Scale
Semantic
UI Elements
Typography
Display Text
Display Heading 1
Display Heading 2
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body Text
Lead paragraph. The quick brown fox jumps over the lazy dog. This text is slightly larger and has more line height for better readability in introductory content.
Regular body text. The quick brown fox jumps over the lazy dog. This is the standard body text size for most content.
Small text. The quick brown fox jumps over the lazy dog. Use for secondary information or captions.
Extra small text. The quick brown fox jumps over the lazy dog. Use for fine print or legal text.
Text Styles
Medium weight text for emphasis
Semibold text for stronger emphasis
Regular weight text for body content
Italic text for emphasis or quotes
Underlined text for links or emphasis
Blockquotes
“The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.”
Lists
Unordered List
- First item in the list
- Second item in the list with a bit more text that wraps to the next line
- Third item in the list
- Fourth item in the list
Ordered List
- First step in the process
- Second step with more detailed information
- Third step in the sequence
- Final step to complete the process
Callouts
Tables
Basic Table
| Name | Title | Role | |
|---|---|---|---|
| Lindsay Walton | Front-end Developer | lindsay.walton@example.com | Member |
| Courtney Henry | Designer | courtney.henry@example.com | Admin |
| Tom Cook | Director of Product | tom.cook@example.com | Member |
| Whitney Francis | Copywriter | whitney.francis@example.com | Admin |
Table with Custom Styling
| Plan | Price | Features |
|---|---|---|
| Basic | $29 | Basic features for getting started |
| Pro | $99 | Advanced features for professionals |
| Enterprise | Custom | Custom solutions for your business |