Default Card
Standard card with border
Card content goes here.
RLeaguez Design System
A comprehensive guide to our component library and design principles
Colors
Our brand palette centers on Orange and Navy Blue, with supporting neutrals for text and backgrounds.
Brand Colors
Orange 500
#f97316
Orange 600
#ea580c
Navy Blue 600
#2563eb
Slate 800
#1e293b
Text Colors (Never use pure white/black)
Light Mode
Primary: text-gray-900
Secondary: text-gray-600
Muted: text-gray-500
Dark Mode
Primary: text-slate-50
Secondary: text-gray-300
Muted: text-gray-400
Semantic Colors
Success
Warning
Danger
Info
Purple
Typography
Consistent font scales and text styles across the application.
Headings
Heading 1 - 4xl Bold
Heading 2 - 3xl Bold
Heading 3 - 2xl Semibold
Heading 4 - xl Semibold
Heading 5 - lg Medium
Heading 6 - base Medium
Body Text
Large body text (text-lg) - Use for introductions and emphasis.
Base body text (text-base) - Default for most content. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Small text (text-sm) - Use for captions, labels, and secondary information.
Extra small (text-xs) - Use sparingly for fine print.
Text Capitalization Guidelines
| Element | Style | Example |
|---|---|---|
| Page titles | Title Case | "Sign In to RLeaguez" |
| Button labels | Title Case | "Create Team" |
| Placeholders | Sentence case | "Enter first name" |
| Labels | Sentence case | "Email address:" |
Links
LinkCatto provides multiple variants for navigation and actions.
Button-Style Links
Link Sizes
Cards
CardCatto is our primary content container, mobile-friendly and highly configurable.
Card Variants
Primary Card
Blue-tinted background.
Semantic Card Variants
Success
Operation completed successfully.
Warning
Please review before proceeding.
Danger
This action cannot be undone.
Card with Icon and Footer
Featured Card
Cards can include icons and footer sections
This card demonstrates the icon and footer props.
Card Width Options
Width options: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, full
Small Card (sm)
Compact width.
Medium Card (md)
Medium width.
Large Card (lg)
Larger width for more content.
Collapsible Card
Click to Collapse
This card can be collapsed
This content can be hidden by clicking the header.
Form Controls
Input components for building forms.
InputCatto
Input Sizes
Input States
CheckboxCatto
I agree to the terms and conditions
Always checked
Unchecked checkbox
Disabled checkbox
Feedback Components
Components for communicating status and messages to users.
EmptyStateCatto
No Teams Yet
Create your first team to get started organizing your league.
No Results Found
Try adjusting your search criteria.
Empty State Variants
Error State
Something went wrong. Please try again.
Primary Variant
Navy blue styled empty state.
Empty State Icon Types
Available icons: teams, players, tournaments, venues, matches, members, leagues, search, error, default
teams
players
tournaments
venues
matches
ToastCatto
Variants: primary, success, warning, error, info, midnightEmber
primarysuccesswarningerrorinfo
Dividers
HRDividerCatto and variants for separating content sections.
HRDividerCatto
Standard divider
Additional divider variants available: HRSquareCatto, HRAnimatedLineCatto, HRCircleCatto, HRPulseDividerCatto, and more in the HR folder.
Loading States
Loading indicators and skeleton states.
Card Loading State
Loading Card
Loading Spinners
Available in: LoadingCircleOrangeFancyCatto, LoadingMessageAndCircleCatto
Loading...
RLeaguez Design System v4.0.9