Cube CSS Architecture Demo
A comprehensive showcase of our robust, scalable CSS system for tech blogging websites
Typography System
Our typography system provides a consistent visual hierarchy with responsive font sizes and multiple font families.
Font Sizes
Extra Small Text (0.75rem)
Small Text (0.875rem)
Base Text (1rem)
Large Text (1.125rem)
Extra Large Text (1.25rem)
2XL Text (1.5rem)
3XL Text (1.875rem)
4XL Text (2.25rem)
5XL Text (3rem)
Line Heights
Tight line height (1.25)
Snug line height (1.375)
Normal line height (1.5)
Relaxed line height (1.625)
Loose line height (2)
Letter Spacing
Tight letter spacing (-0.025em)
Normal letter spacing (0)
Wide letter spacing (0.025em)
Font Families
Sans Font (Inter) - The quick brown fox jumps over the lazy dog
Secondary Font (Poppins) - The quick brown fox jumps over the lazy dog
Display Font (Sora) - The quick brown fox jumps over the lazy dog
Mono Font (JetBrains Mono) - The quick brown fox jumps over the lazy dog
Technical Font (Roboto Flex) - The quick brown fox jumps over the lazy dog
Color System
Our color system provides a comprehensive palette with theme variants and semantic color categories.
Theme Colors
Background Colors
Text Colors
Category Colors
Component System
Our component system provides reusable UI elements with multiple variants and states.
Buttons
Outline Buttons
Glass Buttons
Ghost Buttons
Loading States
Icon Buttons
Button Sizes
Full Width Button
Blog Actions
Advanced Pagination
Cards
Card Title
This is a sample card with an image and description. Cards are flexible containers for content.
Elevated Card
This card has an elevated style with a shadow effect.
Featured Card
This is a featured card with special styling and metadata.
Form Elements
Tags
Basic Tags
Category Tags
Cute Cat Super Categories
Soft pastel category buttons with theme-aware colors. Click to toggle active state.
Removable Tags
Alerts
Success
Your changes have been saved successfully.
Warning
Please review your changes before proceeding.
Error
There was an error processing your request.
Information
Here's some useful information for you.
Progress Bars
Layout System
Our layout system provides flexible grid and spacing utilities for creating responsive designs.
Grid Layout
Flexbox Layout
Spacing Utilities
Theme System
Our theme system provides multiple color schemes with consistent design language.
Available Themes
Click the theme buttons at the bottom right to switch between themes:
- Light: Clean, bright theme with high contrast
- Dark: Dark theme with reduced eye strain
- Dracula: Popular dark theme with purple accents
- Peachoff: Warm, peach-colored theme
- Purplegems: Elegant purple theme
- Blue Professional: Corporate blue theme
- Green Forest: Natural green theme
- Accessible: High contrast theme for accessibility
Theme Features
Consistent Design
All themes maintain consistent spacing, typography, and component behavior while changing colors and accents.
Semantic Colors
Themes provide semantic color variables for success, warning, error, and info states that work across all themes.
Category Colors
Each theme includes category-specific colors for content types like categories, tags, authors, and more.
Code Examples
Our code highlighting system provides syntax highlighting for multiple programming languages.