ParaBuyer Style Guide
A comprehensive visual reference for designers and developers
1. Brand Identity
Profile Pictures
Square format icons for social media and app profiles
Black Background
Orange Background
White Background
Brand Mark (Thermal Only)
Standalone thermal symbol for compact spaces
Black
Orange
White
Logo Mark (Thermal + Wordmark)
Full horizontal logo for headers, marketing materials, and primary branding
Brand Name
ParaBuyer
Tagline
The trusted marketplace for paragliding equipment
Logo Usage Guidelines
- • Use the Logo Mark (thermal + wordmark) for primary branding and headers
- • Use the Brand Mark (thermal only) in compact spaces like favicons and small icons
- • Use the Profile Pictures for social media avatars and app icons
- • Choose black logo on light backgrounds, white logo on dark backgrounds
- • Orange version can be used as an accent on neutral backgrounds
- • Maintain clear space around the logo equal to the height of the thermal swirl
2. Color Palette
3. Typography
Heading 1 (3xl/4xl)
The quick brown fox jumps over the lazy dog
Heading 2 (2xl)
The quick brown fox jumps over the lazy dog
Heading 3 (xl/2xl)
The quick brown fox jumps over the lazy dog
Heading 4 (lg)
The quick brown fox jumps over the lazy dog
Body Text (base/lg)
The quick brown fox jumps over the lazy dog. This is standard body text used throughout the application for paragraphs and general content.
Small Text (sm)
The quick brown fox jumps over the lazy dog. Used for secondary information and captions.
Extra Small Text (xs)
The quick brown fox jumps over the lazy dog. Used for timestamps and minor details.
4. Buttons
Primary Buttons
Secondary/Outline Buttons
Ghost Buttons
Destructive Buttons
Disabled State
Loading State
5. Form Components
Value: 50
6. Cards
This is a standard card used throughout the application with the glassmorphism effect.
Solid white card used for content that needs more contrast.
Used for highlighting important information or tips.
Eye-catching card with gradient background for special promotions.
7. Badges
Condition Badges
Status Badges
Category Badges
Special Badges
Specification Badges
Used to display equipment specifications on listing cards
Wing Specifications
Harness Specifications
Reserve Specifications
Location & Shipping
Icon Reference for Specifications
Wind - Wing Type (Paraglider, Speed Wing, etc.)Shield - Certification (A, B, C, D)Tag - Size (28m², L, XL, etc.)Ruler - Size (alternative)Weight - Weight Range (90-115 kg)Calendar - Year/DOM (2020, 2023)Clock - Hours Flown (30h, 400h)MapPin - LocationTruck - ShippingPackage - Pickup/Full KitOutline Badges
8. Icons
Size Variants
Small (w-4 h-4)
Medium (w-5 h-5)
Large (w-6 h-6)
XL (w-8 h-8)
Common Icons
Icon Colors
Default (slate-500)
Accent (sky-600)
Success (green-600)
Active/Filled
Specification Icon Color Mapping
sky-600green-600blue-600blue-600purple-600amber-600slate-600slate-6009. Glassmorphism Effect
The signature "glass-effect" style used throughout ParaBuyer:
background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
Glass Effect Demo
Notice how the background blurs and the content remains readable with a frosted glass appearance.
10. Spacing & Layout
11. Animations
Fade In Up
Elements fade in and slide up when they appear (cards, listings)
Hover Effects
Lift & Shadow
Loading Spinner
12. Responsive Breakpoints
13. Dark Mode
1. Never ship a color without its dark pair
Any hardcoded text color needs a dark variant. text-slate-900 → dark:text-white, text-slate-700 → dark:text-slate-300, text-slate-600 → dark:text-slate-400, text-slate-500 → dark:text-slate-400.
2. Tinted panels get a dark counterpart
Light tint panels (bg-blue-50, bg-green-50, bg-amber-50…) must darken so the light text inside stays readable. Use the 950 shade at 40% opacity, and the 900 shade at 50% for hover.
3. Prefer semantic tokens over raw slate
For surfaces, borders and dividers use the design tokens — they already flip with the theme. bg-white → dark:bg-card, border-slate-200 → dark:border-border, divide-slate-100 → dark:divide-border.
4. Gradient headers and section fills darken too
Light gradients used as card headers must have dark stops, otherwise light headings vanish against them.
5. Logos and brand art swap by resolved theme
Use the white ParaBuyer Logo Mark in dark mode and the black mark in light mode, at identical dimensions. Read the theme with useTheme() from next-themes and switch the src — never recolor with CSS filters.
6. Keep intent colors, soften the surface
Destructive, warning and success states keep their hue in dark mode — only the background loses brightness (bg-red-50 → dark:bg-red-950/40). Do not turn a red warning into a neutral grey panel.
7. Icons need contrast as much as text
Decorative slate icons disappear on dark surfaces. Give them the same dark treatment as the text they sit beside; accent-colored icons (sky, amber, red) can stay as-is.
8. Respect the system setting
The app follows the OS theme (next-themes, attribute="class", defaultTheme="system"). Never force a single theme, and always verify new screens in both light and dark before shipping.
ParaBuyer Style Guide · Last Updated: 8/29/2026
Become part of the ParaBuyer community
Keep up to date with exciting tips, useful how-tos and news!