Neo Design System

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text - Used for captions and secondary information

Colors

Primary
--accent-primary
Success
--accent-success
Danger
--accent-danger
Warning
--accent-warning
Info
--accent-info
Secondary
--text-secondary

Buttons

Variants
Sizes
States

Form Elements

Cards

Card Title
This is a card component with title and description text.
Another Card
Cards are useful for grouping related content together.
Card with More Content
This card demonstrates how cards can contain various types of content and help organize information visually.
Feature Card
Cards provide a clean way to display grouped information with consistent spacing and styling.

Tooltips

This is a tooltip
Helpful information here

Badges

Primary Success Danger Warning Info
With Numbers
12 99+ 3 New

Alerts

Success! This is a success message.
Error! This is an error message.
Warning! This is a warning message.
Info! This is an informational message.

Loading Bars

25% - Default
50% - Striped
75% - Striped
100% - Striped

Tabs

Content for Tab 1 - This is the first tab's content.
Content for Tab 2 - This is the second tab's content.
Content for Tab 3 - This is the third tab's content.

Spacing Scale

0.25rem
0.5rem
0.75rem
1rem
1.5rem
2rem
NEO DESIGN SYSTEM - QUICK REFERENCE ==================================== COLORS (CSS Variables) ---------------------- Light Mode: --bg-primary: #f3f4f6 (main background) --bg-secondary: #f9fafb (card/section background) --bg-tertiary: #e5e7eb (hover/active states) --text-primary: #1a1a1a (main text) --text-secondary: #6b7280 (secondary text) --text-tertiary: #9ca3af (tertiary text) --border-color: #d1d5db (borders) --accent-primary: #6366f1 (primary actions) --accent-primary-hover: #4f46e5 --accent-success: #10b981 --accent-danger: #ef4444 --accent-warning: #f59e0b --accent-info: #3b82f6 Dark Mode: --bg-primary: #0a0a0a (main background) --bg-secondary: #0f0f0f (card/section background) --bg-tertiary: #1a1a1a (hover/active states) --text-primary: #f5f5f5 (main text) --text-secondary: #b0b0b0 (secondary text) --text-tertiary: #808080 (tertiary text) --border-color: #1a1a1a (borders) --accent-primary: #8b5cf6 (primary actions) --accent-primary-hover: #7c3aed --accent-success: #22c55e --accent-danger: #f87171 --accent-warning: #fbbf24 --accent-info: #38bdf8 TYPOGRAPHY ---------- Font Family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif Font Weights: 300, 400, 500, 600, 700 Scale: H1: 1.875rem (30px) - font-weight: 700, letter-spacing: -0.02em H2: 1.5rem (24px) - font-weight: 600, letter-spacing: -0.01em H3: 1.25rem (20px) - font-weight: 600, letter-spacing: -0.01em H4: 1.0625rem (17px) - font-weight: 600 Body: 0.875rem (14px) - font-weight: 400 Small: 0.75rem (12px) - font-weight: 400 SPACING SCALE ------------- 0.25rem (4px) 0.5rem (8px) 0.75rem (12px) 1rem (16px) 1.5rem (24px) 2rem (32px) BORDER RADIUS ------------- Small: 4px Default: 6px Medium: 8px Large: 12px SHADOWS ------- Light Mode: --shadow-sm: 0 1px 2px rgba(0,0,0,0.04) --shadow-md: 0 2px 4px rgba(0,0,0,0.06) --shadow-lg: 0 4px 8px rgba(0,0,0,0.08) Dark Mode: --shadow-sm: 0 1px 2px rgba(0,0,0,0.5) --shadow-md: 0 2px 4px rgba(0,0,0,0.6) --shadow-lg: 0 4px 8px rgba(0,0,0,0.7) BUTTONS ------- Base: padding: 0.5rem 0.875rem, border-radius: 6px, font-size: 0.8125rem, font-weight: 500 Variants: .btn-primary: background: var(--accent-primary), color: white .btn-secondary: background: var(--accent-secondary), color: white .btn-success: background: var(--accent-success), color: white .btn-danger: background: var(--accent-danger), color: white .btn-outline: transparent bg, border: 1px solid var(--accent-primary), color: var(--accent-primary) .btn-ghost: transparent bg, color: var(--text-primary) Sizes: .btn-sm: padding: 0.375rem 0.625rem, font-size: 0.75rem .btn-lg: padding: 0.625rem 1.125rem, font-size: 0.875rem FORM ELEMENTS ------------- Inputs: padding: 0.5rem, border-radius: 6px, border: 1px solid var(--border-color) Focus: border-color: var(--accent-primary), box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) CARDS ----- padding: 0.875rem, border-radius: 8px, border: 1px solid var(--border-color) background: var(--bg-primary), box-shadow: var(--shadow-sm) BADGES ------ padding: 0.25rem 0.625rem, border-radius: 12px, font-size: 0.6875rem, font-weight: 500 ALERTS ------ padding: 0.625rem 0.75rem, border-radius: 6px, border-left: 3px solid background: rgba(color, 0.1), color: var(--accent-color) PROGRESS BARS ------------- height: 8px, border-radius: 4px, background: var(--bg-tertiary) Striped: background-image with diagonal stripes, animation: progress-bar-stripes 1s linear infinite USAGE INSTRUCTIONS ------------------ 1. Use CSS variables for all colors (supports light/dark mode automatically) 2. Follow spacing scale for consistent margins/padding 3. Use Inter font family (loaded via Google Fonts) 4. All components use border-radius: 6px or 8px 5. Transitions: 0.2s ease for interactive elements 6. Grid layout: minmax(240px, 1fr) for responsive design 7. Dark mode: Add data-theme="dark" to html element QUICK COPY FOR AI: "Use the Neo Design System with these CSS variables for colors, Inter font family, 6-8px border-radius, spacing scale (0.25rem to 2rem), and component classes as shown in the design system reference."