Skip to main content

🎨 Styles

Design system and styling guidelines for fabi.verse documentation.

This section documents the styling and theming system used throughout the fabi.verse documentation.

🎨 Design System​

Color Palette​

Primary Colors​

  • Primary Blue: #6366f1 - Main brand color
  • Secondary Purple: #8b5cf6 - Secondary brand color
  • Accent Cyan: #06b6d4 - Accent and highlight color

Semantic Colors​

  • Success Green: #10b981 - Success states and positive actions
  • Warning Orange: #f59e0b - Warning states and caution
  • Error Red: #ef4444 - Error states and destructive actions

Neutral Colors​

  • Gray Scale: 50-900 range for text, backgrounds, and borders
  • White: #ffffff - Primary background
  • Black: #000000 - Primary text

Typography​

Font Families​

  • Primary: Inter (Google Fonts) - Clean, modern sans-serif
  • Code: JetBrains Mono - Monospace for code blocks
  • Fallback: System fonts for better performance

Font Weights​

  • Light: 300 - Subtle text and captions
  • Regular: 400 - Body text
  • Medium: 500 - Emphasis and subheadings
  • Semibold: 600 - Section headers
  • Bold: 700 - Page titles
  • Extrabold: 800 - Main headings

Font Sizes​

  • Base: 16px (1rem) - Body text
  • Small: 14px (0.875rem) - Captions and metadata
  • Large: 18px (1.125rem) - Lead paragraphs
  • H1: 2.5rem - Main page titles
  • H2: 2rem - Section headers
  • H3: 1.5rem - Subsection headers
  • H4: 1.25rem - Minor headers

Spacing System​

Base Unit​

  • Base: 4px (0.25rem) - Smallest spacing unit

Spacing Scale​

  • XS: 4px (0.25rem) - Minimal spacing
  • SM: 8px (0.5rem) - Small spacing
  • MD: 16px (1rem) - Medium spacing
  • LG: 24px (1.5rem) - Large spacing
  • XL: 32px (2rem) - Extra large spacing
  • 2XL: 48px (3rem) - Double extra large spacing

Border Radius​

Radius Scale​

  • SM: 4px (0.25rem) - Small radius
  • MD: 8px (0.5rem) - Medium radius
  • LG: 12px (0.75rem) - Large radius
  • XL: 16px (1rem) - Extra large radius

Shadows​

Shadow Scale​

  • SM: Subtle elevation
  • MD: Medium elevation
  • LG: Large elevation
  • XL: Extra large elevation

🎭 Component Styles​

Cards​

  • White background
  • Subtle border
  • Medium border radius
  • Medium shadow
  • Hover effects

Buttons​

  • Primary and secondary variants
  • Consistent padding and border radius
  • Hover and focus states
  • Disabled states

Forms​

  • Clean input styling
  • Focus states
  • Error states
  • Success states
  • Clear hierarchy
  • Active states
  • Hover effects
  • Responsive behavior

🌙 Dark Mode​

Automatic Detection​

  • Respects user's system preference
  • Smooth transitions between modes
  • Maintains accessibility standards

Color Inversion​

  • Background colors inverted
  • Text colors adjusted for contrast
  • Accent colors maintained
  • Images and graphics preserved

📱 Responsive Design​

Breakpoints​

  • Mobile: < 768px
  • Tablet: 768px - 1024px
  • Desktop: > 1024px

Mobile Optimizations​

  • Larger touch targets
  • Simplified navigation
  • Optimized typography
  • Reduced animations

🎨 CSS Variables​

All styling uses CSS custom properties for easy theming:

:root {
  --fabiverse-primary: #6366f1;
  --fabiverse-secondary: #8b5cf6;
  --fabiverse-accent: #06b6d4;
  --font-family-sans: 'Inter', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  --spacing-md: 1rem;
  --radius-md: 0.5rem;
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

🔧 Customization​

Theme Overrides​

  • Easy to customize colors
  • Simple typography changes
  • Flexible spacing adjustments
  • Custom component styles

Brand Integration​

  • Replace colors with brand colors
  • Update fonts to match brand
  • Adjust spacing to brand guidelines
  • Customize components as needed

🔗 See also​