Version 1.0
Flor Design System
A comprehensive guide to our visual language, components, and patterns. Use this as a reference for building consistent, beautiful interfaces.
Foundation
Colors
Our color palette is warm, refined, and accessible. The cream background creates a soft, inviting feel while maintaining excellent readability.
Primary Palette
Background
#FFFDF9
Text Primary
#0d0d0d
Foreground
#1a1a1a
Accent Warm
#f0ebe0
Text Hierarchy
Primary
#0d0d0d
Secondary
#4a4a4a
Muted
#737373
Subtle
#a09d98
Semantic Colors
Indigo (Active)
#6366f1
Green (Success)
#22c55e
Amber (Warning)
#f59e0b
Red (Destructive)
#ff5f57
Foundation
Typography
We use Playfair Display for headings to convey elegance and authority, paired with Inter for body text for excellent readability.
Display Font
Playfair Display
Used for headings, hero text, and emphasis
Body Font
Inter
Used for body text, UI elements, and navigation
Type Scale
Foundation
Spacing
Consistent spacing creates visual rhythm and hierarchy. We use a 4px base unit scaled across the system.
Foundation
Shadows & Elevation
Subtle shadows create depth and hierarchy. We use soft, diffused shadows that feel natural and refined.
Small
shadow-sm
Large
shadow-lg
2XL Soft
shadow-2xl shadow-black/5
Components
Cards
Cards use generous padding, rounded corners (rounded-2xl or rounded-3xl), and subtle borders or shadows.
FEATURE CARD
Feature cards include a visual mockup area and descriptive text below.
Dark Card
Use dark cards for emphasis or to create visual contrast in pricing sections.
Components
Badges & Labels
Badges communicate status, categories, or metadata. Use semantic colors consistently.
Components
Form Inputs
Form elements use soft backgrounds and rounded corners for a modern, approachable feel.
Patterns
Section Headers
Every major section uses a consistent header pattern: small uppercase label, large heading, optional description.
Section Label
Section Heading
Optional description text that provides additional context about the section content.
Patterns
Mockup Elements
UI mockups inside cards use traffic light indicators and nested containers to simulate app interfaces.
Browser Chrome
FlorTask Items
Patterns
Animations
Animations should feel smooth and purposeful. Use cubic-bezier easing for natural motion.
Entry Animations
Elements fade in from below with staggered timing for visual rhythm.
Scroll Animations
Elements reveal as they enter the viewport, creating a dynamic experience.
Hover Effects
Interactive elements lift and cast shadows on hover for depth.
Lift Effect
Hover to elevate
Scale Effect
Hover to grow
Color Shift
Hover to lighten
Timing Functions
Use ease-out for entries, ease-in-out for hover states, and spring curves for playful interactions.
Fast start, gentle finish. Perfect for page entries.
Smooth both ways. Ideal for toggle states.
Spring-like bounce for delightful microinteractions.