Style Guide
Complete overview of typography, buttons, and design tokens
Current Viewport
Typography
Prose (Dark Background)
Heading 1: in Plus Jakarta Sans.
Heading 2: in Plus Jakarta Sans.
Heading 2: in Mandrel.
Heading 3: in Plus Jakarta Sans.
Heading 3: in Mandrel.
Heading 4: in Plus Jakarta Sans.
Heading 4: in Mandrel.
This is a paragraph with bold text, italic text, and a link example. The body text uses Mandrel font at 300 weight with 18px size on mobile and desktop. Line height is set to 30px for optimal readability.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
- Unordered list item one
- Unordered list item two
- Unordered list item three with more content to show wrapping behavior
- Ordered list item one
- Ordered list item two
- Ordered list item three
This is a blockquote. It's used for highlighting important quotes or call-outs within the content.
Final paragraph demonstrating the p:last-child rule that removes bottom margin.
Prose on White (prose-on-white)
Heading 1: in Plus Jakarta Sans.
Heading 2: in Plus Jakarta Sans.
Heading 2: in Mandrel.
Heading 3: in Plus Jakarta Sans.
Heading 3: in Mandrel.
Heading 4: in Plus Jakarta Sans.
Heading 4: in Mandrel.
This is a paragraph with bold text, italic text, and a link example. The body text uses Mandrel font at 300 weight with 18px size on mobile and desktop. Line height is set to 30px for optimal readability.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
- Unordered list item one
- Unordered list item two
- Unordered list item three with more content to show wrapping behavior
- Ordered list item one
- Ordered list item two
- Ordered list item three
This is a blockquote. It's used for highlighting important quotes or call-outs within the content.
Final paragraph demonstrating the p:last-child rule that removes bottom margin.
Buttons
Button Types
Button States (Hover to See)
Responsive Behavior
Buttons maintain 48px min-height on mobile for touch targets
Font Families
font-body (Mandrel Normal)
The quick brown fox jumps over the lazy dog
400 weight (Normal): ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
800 weight (Extrabold): ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Note: Mandrel only supports 400 and 800 weights
font-jakarta (Plus Jakarta Sans)
The quick brown fox jumps over the lazy dog
200 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
300 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
400 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
500 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
600 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
700 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
800 weight: ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Color Palette
Primary
var(--color-primary)
Dark brown/charcoal - backgrounds, primary text
Secondary
var(--color-secondary)
Warm beige/taupe - secondary text, accents
Accent
var(--color-accent)
Lime/neon yellow - CTAs, highlights, active states
Opacity Variations
Spacing & Layout
Container
• Max width: 1860px (centered)
• Padding mobile: 27px
• Padding desktop (lg+): 48px
Section Spacing
• Mobile: py-18 (72px)
• Desktop: py-36 (144px)
Grid System
• 12-column grid
• Gap: 10 (40px)
• Background: 11 vertical grid lines at 15% white opacity
Responsive Typography Example
This heading scales: 41px mobile → 62px desktop
This h2 scales: 32px mobile → 46px desktop
This paragraph text scales: 16px mobile → 18px desktop. Line height remains consistent at 30px for optimal readability.
Breakpoints:
• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px