Elevated Card
This card has a more prominent shadow, giving it an elevated appearance.
Outlined Card
This card features a distinct border and transparent background.
Filled Card
This card has a muted background color, providing a subtle visual distinction.
Interactive Card
This card responds to hover and active states, indicating interactivity.
Style Guide
This document serves as a comprehensive visual guide and test bed for the project’s CSS framework. It showcases all available design tokens, utility classes, and components.
1. Colors
The project utilizes a comprehensive color system defined by CSS custom properties, supporting both light and dark themes.
1.1. Primary Brand Colors
1.2. Secondary Colors
1.3. Accent Colors
1.4. Neutral Colors
1.5. Semantic Colors
1.6. Theme Color Assignments
These variables define the semantic usage of colors for text, backgrounds, and borders, adapting automatically to light and dark themes.
1.7. Surface Colors
2. Typography
The typography system uses clamp() for fluid font sizing, ensuring responsiveness across devices.
2.1. Font Families
Sans-serif: --font-family-sans (ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
Serif: --font-family-serif (ui-serif, Georgia, Cambria, "Times New Roman", Times, serif)
Monospace: --font-family-mono (ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace)
2.2. Font Weights
Thin (--font-weight-thin)
Light (--font-weight-light)
Normal (--font-weight-normal)
Medium (--font-weight-medium)
Semibold (--font-weight-semibold)
Bold (--font-weight-bold)
Extrabold (--font-weight-extrabold)
Black (--font-weight-black)
2.3. Responsive Font Sizes (Conservative Scale)
--font-size-xs (12-14px)
--font-size-sm (14-16px)
--font-size-base (16-18px)
--font-size-lg (18-20px)
--font-size-xl (20-24px)
--font-size-2xl (24-30px)
--font-size-3xl (30-36px)
--font-size-4xl (36-48px)
--font-size-5xl (48-64px)
--font-size-6xl (60-80px)
2.4. Responsive Font Sizes (Bold Scale for Headings)
Heading XS (--font-size-heading-xs)
Heading SM (--font-size-heading-sm)
Heading Base (--font-size-heading-base)
Heading LG (--font-size-heading-lg)
Heading XL (--font-size-heading-xl)
Heading 2XL (--font-size-heading-2xl)
Heading 3XL (--font-size-heading-3xl)
Heading 4XL (--font-size-heading-4xl)
Heading 5XL (--font-size-heading-5xl)
Heading 6XL (--font-size-heading-6xl)
2.5. Line Heights
Line height none (--line-height-none)
Line height tight (--line-height-tight)
Line height snug (--line-height-snug)
Line height normal (--line-height-normal)
Line height relaxed (--line-height-relaxed)
Line height loose (--line-height-loose)
2.6. Letter Spacing
Letter spacing tighter (--letter-spacing-tighter)
Letter spacing tight (--letter-spacing-tight)
Letter spacing normal (--letter-spacing-normal)
Letter spacing wide (--letter-spacing-wide)
Letter spacing wider (--letter-spacing-wider)
Letter spacing widest (--letter-spacing-widest)
3. Spacing System
The spacing system provides consistent vertical and horizontal rhythm using a predefined scale.
3.1. Base Spacing Scale
--space-0 (0)--space-px (1px)--space-0-5 (2px)--space-1 (4px)--space-1-5 (6px)--space-2 (8px)--space-2-5 (10px)--space-3 (12px)--space-3-5 (14px)--space-4 (16px)--space-5 (20px)--space-6 (24px)--space-7 (28px)--space-8 (32px)--space-9 (36px)--space-10 (40px)--space-11 (44px)--space-12 (48px)--space-14 (56px)--space-16 (64px)--space-20 (80px)--space-24 (96px)--space-28 (112px)--space-32 (128px)--space-36 (144px)--space-40 (160px)--space-44 (176px)--space-48 (192px)--space-52 (208px)--space-56 (224px)--space-60 (240px)--space-64 (256px)--space-72 (288px)--space-80 (320px)--space-96 (384px)3.2. Semantic Spacing Aliases
--space-xs (4px)--space-sm (8px)--space-md (16px)--space-lg (24px)--space-xl (32px)--space-2xl (48px)--space-3xl (64px)--space-4xl (96px)3.3. Component Pattern Spacing
--space-component-padding (16px)--space-component-padding-sm (12px)--space-component-padding-lg (24px)--space-component-margin (24px)--space-section-gap (48px)--space-section-gap-sm (32px)--space-section-gap-lg (64px)--space-card-padding (24px)--space-card-gap (16px)--space-form-gap (16px)--space-nav-gap (24px)4. Buttons
The button system provides a variety of styles, sizes, and modifiers for interactive elements.
4.1. Base Button
4.2. Button Variants
4.3. Semantic Button Variants
4.4. Button Sizes
4.5. Button Modifiers
4.6. Button Groups
5. Cards
The card component provides flexible containers for content, with various styles and layouts.
5.1. Base Card
Base Card Title
This is a basic card with some sample text. It demonstrates the default styling and spacing.
5.2. Card Variants
Elevated Card
This card has a more prominent shadow, giving it an elevated appearance.
Outlined Card
This card features a distinct border and transparent background.
Filled Card
This card has a muted background color, providing a subtle visual distinction.
Interactive Card
This card responds to hover and active states, indicating interactivity.
5.3. Semantic Card Variants
Success Card
Indicates a successful operation or positive information.
Warning Card
Highlights important warnings or cautions.
Danger Card
Used for critical errors or destructive actions.
Info Card
Provides general informational messages.
5.4. Card Sizes
Compact Card
A smaller card with reduced padding and spacing.
Spacious Card
A larger card with increased padding and spacing for more content.
5.5. Hugo-Specific Card Layouts
5.5.1. Blog Post Card (.card-post)
Example Blog Post
A brief excerpt from the blog post, demonstrating the layout for a typical article summary.
5.5.2. Feature Card (.card-feature)
Amazing Feature
This card highlights a key feature with an icon and descriptive text.
5.5.3. Team Member Card (.card-team)
Doe Joe
Lead Developer
Joe is passionate about clean code and innovative solutions.
5.5.4. Testimonial Card (.card-testimonial)
"This product has transformed our workflow. Highly recommend it to everyone!"
John Smith
CEO, Example Corp.
5.5.5. Product Card (.card-product)
Awesome Product
$49.99 $79.99
A brief description of the product, highlighting its key features.
6. Grid System
The utility-first grid system provides flexible and responsive layouts using CSS Grid.
6.1. Core Grid Container
6.2. Auto-Fit Responsive Grid Columns
These grids automatically adjust the number of columns based on available space and a minimum column width.
6.2.1. grid-cols-auto-fit with Semantic Min-Widths
.grid-cols-auto-fit-xs (min 200px)
.grid-cols-auto-fit-md (min 300px)
6.2.2. Custom grid-min-*
.grid-min-320 (min 320px)
6.3. Explicit Column Counts
For fixed column layouts, regardless of screen size.
.grid-cols-3
.grid-cols-2
6.4. Grid Gaps
.grid-gap-lg (24px)
.grid-gap-x-8 (32px column gap) and .grid-gap-y-4 (16px row gap)
6.5. Grid Item Spanning
.col-span-2 in a 3-column grid
.col-span-full
6.6. Grid Alignment Utilities
.justify-items-center and .align-items-center
7. Dark Mode Demonstration
To test dark mode, you can either:
- Change your system’s color scheme preference to dark.
- Add
data-theme="dark"to the<html>tag, or add the classdarkto any parent element.
Dark Mode Example
This section demonstrates how components adapt to the dark theme.
Dark Mode Card
This card should reflect the dark theme styling.