Style Guide
Design Tokens
Colors
red-600
rose-600
slate-700
border
Spacing
- xs: 0.25rem
- sm: 0.5rem
- md: 1rem
- lg: 1.5rem
- xl: 2rem
Radius & Shadows
Typography
Heading 1
Heading 2
Heading 3
Heading 4
This is regular paragraph text. It should be readable and comfortable for extended reading sessions.
This is smaller text used for metadata and secondary information.
Buttons
Components
Form Inputs
Tags
#example
#tag
#demo
Cards
Card Title
This is an example card component with some content.
Alerts
Success: Your changes have been saved.
Warning: Check the required fields.
Error: Something went wrong.
Info: Heads up about this section.
Prose Styles
This section demonstrates the prose styling used for blog content.
This is a blockquote. It should stand out from regular text and be easily identifiable.
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered list item one
- Ordered list item two
- Ordered list item three
// Code block example
function example() {
return "Hello, world!";
}
Here's some text with inline code and a link example.
Layout
1
2
3
4
Accessibility Notes
- Buttons use visible focus and adequate color contrast.
- Form fields have associated labels and large click targets.
- Cards and alerts avoid color‑only meaning; include icons/labels if needed.