VibrAI Design System
Design tokens, components, and guidelines for building consistent experiences with Vibr AI.
For Designers
Guidelines, principles, and visual resources for designing VibrAI products.
For Developers
Code examples, components, and implementation details for building VibrAI interfaces.
Resources
Tools, assets, and documentation to help you work with the VibrAI design system.
Logos
Bolt Logo
Small
Medium
Large
Usage
import { VibrBoltLogo } from "@/components/vibr-bolt-logo"
// Default size
<VibrBoltLogo />
// Custom size
<VibrBoltLogo className="w-16 h-16" />Type Logo
Default
Usage
import { VibrTypelogo } from "@/components/vibr-typelogo"
// Default usage
<VibrTypelogo />Logo Guidelines
Do
Maintain the logo's proportions when resizing
Ensure adequate spacing around the logo (minimum clearance equal to the height of the bolt)
Use the logo with the appropriate color contrast (minimum 4.5:1 ratio with background)
Use the monochrome version on colored backgrounds
Don't
Stretch or distort the logo
Apply effects like shadows, gradients, or outlines to the logo
Place the logo on busy backgrounds that reduce visibility
Rotate, flip, or change the orientation of the logo
Combined Logo Usage
When using both logos together, maintain proper spacing and alignment as shown above. The space between the bolt and the wordmark should be equal to the width of the bolt's stem.
Code Example
<div className="flex items-center gap-4"> <VibrBoltLogo className="w-12 h-12" /> <VibrTypelogo /> </div>
Typography
Font Family
Primary Font
Geist Sans
font-sans
Regular 400: The quick brown fox jumps over the lazy dog
Medium 450: The quick brown fox jumps over the lazy dog
Semibold 500: The quick brown fox jumps over the lazy dog
Bold 600: The quick brown fox jumps over the lazy dog
Monospace Font
Geist Mono
font-mono
Regular 400: The quick brown fox jumps
Medium 450: The quick brown fox jumps
Semibold 500: The quick brown fox jumps
Bold 600: The quick brown fox jumps
Type Scale
Heading 1
text-4xl sm:text-5xl
font-[450] leading-[1.1] tracking-[-0.03em]
The quick brown fox jumps over the lazy dog
Heading 2
text-3xl
font-[450] leading-[1.1] tracking-[-0.02em]
The quick brown fox jumps over the lazy dog
Heading 3
text-2xl
font-[450] leading-[1.1] tracking-[-0.01em]
The quick brown fox jumps over the lazy dog
Heading 4
text-xl
font-[450] leading-[1.1] tracking-[-0.01em]
The quick brown fox jumps over the lazy dog
Lead Paragraph
text-xl leading-[1.5]
text-neutral-800 dark:text-neutral-200
The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly. How vexingly quick daft zebras jump! This paragraph is used for introductory text and important information.
Body Text
text-base leading-relaxed
text-neutral-800 dark:text-neutral-200
The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly. How vexingly quick daft zebras jump! The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly. How vexingly quick daft zebras jump! This is the standard body text used throughout the application.
Small Text
text-sm
text-neutral-600 dark:text-neutral-400
The quick brown fox jumps over the lazy dog. The five boxing wizards jump quickly. How vexingly quick daft zebras jump! This text is used for captions, footnotes, and secondary information.
UI Typography
Navigation
Navigation items use text-sm with font-[450] weight. Active items use text-neutral-900 dark:text-white, while inactive items use text-neutral-600 dark:text-neutral-400.
Headers & Descriptions
Design Guidelines
Welcome to VibrAI's Brand Guidelines. This resource provides clear guidance on our branding—including logo usage, language, and the assets you need for your marketing and communications efforts.
Headers use larger text sizes with font-[450] weight and negative tracking. Descriptions use text-lg with increased line height for readability.
Logo & Wordmark
Logo
Wordmark
Our wordmark is the most direct distillation of our visual philosophy. It is crafted with VibrAI Sans, with the 'V' formed as a distinctive character.
Section headers use text-4xl with font-[450] weight and -0.03em tracking. Subheadings use text-2xl with -0.01em tracking.
Typography Best Practices
Hierarchy
Main Heading
Subheading provides context
Body text elaborates on the topic and provides detailed information. It should be easy to read and scan.
Supporting text adds additional context or metadata.
Clear hierarchy helps users scan content and understand relationships between elements.
Line Length
This paragraph demonstrates optimal line length. For comfortable reading, aim for 50-75 characters per line. Lines that are too long become difficult to track, while lines that are too short break the reader's rhythm.
Use containers, max-width, and responsive design to maintain appropriate line lengths across different screen sizes.
Optimal line length improves readability and reduces eye fatigue.
Implementation
CSS Variables
:root {
/* Font settings */
--font-geist-sans: "Geist Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-geist-mono: "Geist Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* Typography refinements */
h1, h2, h3, h4, h5, h6 {
@apply font-sans;
letter-spacing: -0.03em;
line-height: 1.1;
font-weight: 450;
}
h1 {
@apply text-4xl sm:text-5xl;
letter-spacing: -0.03em;
}
h2 {
@apply text-3xl;
letter-spacing: -0.02em;
}
h3 {
@apply text-2xl;
letter-spacing: -0.01em;
}
h4 {
@apply text-xl;
letter-spacing: -0.01em;
}
p {
@apply leading-relaxed text-neutral-800 dark:text-neutral-200;
font-weight: 400;
}Colors
Color Contrast Checker
Select Colors
Results
Sample Text
Primary Palette
Neutral 950
bg-neutral-950
#0a0a0a
Neutral 900
bg-neutral-900
#171717
Neutral 800
bg-neutral-800
#262626
Neutral 700
bg-neutral-700
#404040
Neutral 600
bg-neutral-600
#525252
Neutral 500
bg-neutral-500
#737373
Neutral 400
bg-neutral-400
#a3a3a3
Neutral 300
bg-neutral-300
#d4d4d4
Neutral 200
bg-neutral-200
#e5e5e5
Neutral 100
bg-neutral-100
#f5f5f5
Neutral 50
bg-neutral-50
#fafafa
White
bg-white
#ffffff
Semantic Colors
Background
Primary background color for the application.
Foreground
Primary text color for the application.
Secondary Background
Used for cards, inputs, and secondary elements.
Muted Text
Used for secondary text and less important information.
Color Usage Guidelines
Do
Use neutral colors as the foundation of the UI
Ensure sufficient contrast between text and background colors (minimum 4.5:1 for normal text)
Use semantic colors consistently across the application
Test color combinations in both light and dark modes
Don't
Mix too many colors in a single interface
Use colors that don't meet accessibility standards
Create custom colors outside the defined palette
Rely solely on color to convey information (always use additional indicators)
Components
Buttons
View all button examplesButton Variants
Example usage:
<Button variant="primary">Primary</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button>
Button Sizes
Example usage:
<Button size="sm">Small</Button> <Button size="default">Default</Button> <Button size="lg">Large</Button> <Button size="icon"> <IconComponent /> </Button>
Button States
Default
Hover
Focus
Disabled
Basic Card
Card Title
This is a basic card with simple content. Cards are used to group related information.
Card with Header
Card Header
Supporting text
This card has a header section that's separated from the main content.
Card with Footer
Card with Footer
This card has a footer section with actions.
Card Usage
Example usage:
<Card>
<CardContent className="p-6">
<h4 className="text-lg font-medium mb-2">Card Title</h4>
<p>Card content goes here</p>
</CardContent>
</Card>
<Card>
<div className="p-6 border-b border-neutral-200 dark:border-neutral-800">
<h4 className="text-lg font-medium">Card Header</h4>
</div>
<CardContent className="p-6">
<p>Card content goes here</p>
</CardContent>
<div className="p-4 border-t border-neutral-200 dark:border-neutral-800 flex justify-end">
<Button variant="ghost" size="sm" className="mr-2">Cancel</Button>
<Button variant="primary" size="sm">Save</Button>
</div>
</Card>Layout & Spacing
View layout guidelinesContainer Component
The Container component provides consistent horizontal padding and maximum width constraints.
Example usage:
<Container> <div>Your content here</div> </Container>
Section Component
The Section component provides consistent vertical padding for page sections.
Example usage:
<Section> <div>Your section content here</div> </Section>
Accessibility
View accessibility guidelinesAccessible Components
Our design system includes accessible components that follow WCAG 2.1 AA standards.
Proper focus states for interactive elements
Semantic HTML with appropriate ARIA attributes
Keyboard navigation support
Color contrast that meets WCAG standards
Accessible Image Component
The AccessibleImage component ensures images have proper alt text and loading behavior.
Example usage:
<AccessibleImage
src="/path/to/image.jpg"
alt="Descriptive alt text"
width={400}
height={300}
/>Version 1.0.0 • Last updated: May 2, 2025