A comprehensive style guide for consistent web design
Our color palette is designed to create a cohesive visual identity. Use Primary Purple for main actions and branding elements, Deep Violet for secondary emphasis, Success Green for positive feedback, and Alert Red for errors or warnings. Light Gray provides subtle backgrounds, while Dark Slate ensures readable text content.
Main brand color used for primary buttons, links, and key interactive elements.
Secondary brand color for accents, hover states, and visual hierarchy.
Used for success messages, confirmations, and positive actions.
Error states, warnings, and destructive actions.
Background color for sections, cards, and subtle divisions.
Primary text color and dark UI elements.
Our typography system uses three carefully selected typefaces. Inter serves as our primary sans-serif for body text and UI elements, ensuring excellent readability. Playfair Display adds elegance to headings and titles. Fira Code is reserved for code snippets and technical content. Always maintain proper hierarchy by using appropriate font weights and sizes.
Primary font for body text, UI elements, and general content.
Use for main headings, hero titles, and decorative text.
Reserved for code blocks, technical documentation, and inline code.
These predefined text styles ensure consistency across all pages. Use H1 for page titles, H2 for major sections, and H3 for subsections. Body text should use the paragraph style, while links maintain the defined color and hover states. Code elements use monospace font with a distinct background for clarity.
Use once per page for the main page title or hero heading.
Use for major content sections and primary divisions on the page.
Use for subsections within major content areas.
Default style for all body content and general text.
Use for all clickable text links throughout the site.
Use for inline code snippets within body text.
console.log() to debug your application.Consistent spacing creates visual rhythm and improves readability. Use the spacing scale below for margins, padding, and gaps throughout your designs. Smaller values (xs, sm) work well for tight groupings, while larger values (lg, xl) create clear separation between major sections.
Tight spacing between related elements
Small gaps, icon spacing
Default spacing for most elements
Section padding, card spacing
Major section separation
Hero sections, large containers