Design System
A comprehensive guide to Root.1's design language, components, and patterns.
This design system follows atomic design principles, organizing components from basic building blocks (atoms) to more complex UI structures (organisms). All components are designed to work on a 12-column grid system and are built with Tailwind CSS.
Color Palette
| Name | Color | Hex | Tailwind Class | Usage |
|---|---|---|---|---|
| Off Black | #0f0f0f | text-off-black, bg-off-black |
Primary text, buttons, accents | |
| Charcoal | #222222 | text-charcoal, bg-charcoal |
Secondary text, headers | |
| Slate | #444444 | text-slate, bg-slate |
Body text, form labels | |
| Silver | #888888 | text-silver, bg-silver |
Subtle text, captions | |
| Light Gray | #f5f5f5 | text-light-gray, bg-light-gray |
Backgrounds, dividers |
Typography
Root.1
text-5xl/6xl, font-extralight/black, tracking-tighter
Section Heading
text-3xl, font-light/bold, tracking-tight
Subsection Heading
text-xl, font-medium, text-charcoal, tracking-tight
With our specialized algorithms, we find the latest trends in technological possibility.
text-lg, text-slate, font-light, leading-relaxed
With our specialized algorithms, we find the latest trends in technological possibility.
text-base, text-slate, leading-relaxed
Are you an Angel-Investor? With pre-seed funding we are looking to scale.
text-sm, text-silver, font-light, tracking-tight
© 2025 Root.1
text-xxs, text-silver, uppercase, tracking-widest
12-Column Grid System
Spacing System
Our spacing system uses consistent increments based on the Tailwind CSS default spacing scale.
spacing-1
0.25rem (4px)
spacing-2
0.5rem (8px)
spacing-3
0.75rem (12px)
spacing-4
1rem (16px)
spacing-6
1.5rem (24px)
spacing-8
2rem (32px)
spacing-12
3rem (48px)
spacing-16
4rem (64px)
Usage
Apply these spacing values consistently using Tailwind's utility classes:
m-{size}- for marginsp-{size}- for paddinggap-{size}- for grid and flex gapsspace-y-{size}- for vertical spacing between childrenspace-x-{size}- for horizontal spacing between children
Button Component
Basic Variants
Size Variants
Button States
Button Links
Combination Examples
Common Button Patterns
Form Action Buttons
Modal Action Hierarchy
Form Inputs
Basic Input Types
Input Sizes
Input States
Icons
Icon Sizes
Navigation Icons
Modal Container
Example Modal Title
This is a modal container that can be used to wrap any content in a styled box.
It supports different widths (sm, md, lg, xl, full) and optional padding sizes.
Accordion Component
This is the content for the first accordion item. You can put any content here including text, images, and other components.
This is the content for the second accordion item. The accordion component allows users to show and hide sections of related content.
This is the content for the third accordion item. This demonstrates the last item without a border.
This item starts closed.
This item starts open by default to demonstrate the default_open parameter.
This is the last item in this accordion.
This accordion allows multiple items to be open simultaneously using the allow_multiple parameter.
Click on different headers and notice that other open items stay open.
Set allow_multiple=true in the accordion_group macro to enable this behavior.
Tabs Component
This is the Overview tab content. It provides a general description of the product or feature.
Features tab content would go here.
Specifications tab content would go here.
Reviews tab content would go here.
This is the active tab content for the minimal tab style.
This is the second tab content for the minimal style.
This is the third tab content for the minimal style.
This shows the daily view content.
This shows the weekly view content.
This shows the monthly view content.
This is the content for the first tab in the responsive tabs example.
This is the content for the second tab in the responsive tabs example.
This is the content for the third tab in the responsive tabs example.
This is the content for the fourth tab in the responsive tabs example.
Form Groups
Email is valid
Please enter a valid email address