Brand Guidelines

    Our brand identity guide for consistent design across all Plany touchpoints.

    Logo

    Our logo assets for different contexts and backgrounds.

    Plany

    Primary Logo — Gradient

    Plany

    Logo — Inverted

    Color Palette

    Our carefully crafted color system for both light and dark modes.

    Primary — Coral Gradient

    Coral Start

    #ea6c3a
    HSL: 18 82% 57%

    Primary brand color, buttons, accents

    Coral End

    #f97316
    HSL: 24 95% 53%

    Gradient endpoint, hover states

    linear-gradient(135deg, #ea6c3a 0%, #f97316 100%)

    Secondary — Teal

    Teal

    #14b8a6
    HSL: 174 84% 40%

    Secondary accents, success states

    Teal Light

    #ccfbf1
    HSL: 174 84% 95%

    Light teal backgrounds

    Neutral Colors

    Background (Light)

    #ffffff
    HSL: 0 0% 100%

    Page backgrounds

    Background (Dark)

    #0d0f14
    HSL: 224 30% 6%

    Dark mode backgrounds

    Foreground (Light)

    #16181d
    HSL: 220 20% 10%

    Primary text

    Foreground (Dark)

    #f8fafc
    HSL: 210 40% 98%

    Dark mode text

    Muted

    #f4f5f7
    HSL: 220 14% 96%

    Subtle backgrounds, borders

    Muted Foreground

    #6b7280
    HSL: 220 10% 45%

    Secondary text

    Typography

    DM Sans is our primary typeface, offering excellent readability and modern aesthetics.

    Primary Font

    DM Sans

    A geometric sans-serif with a friendly, modern feel.

    Font Weights

    Regular (400)

    Medium (500)

    Semibold (600)

    Bold (700)

    Type Scale

    Display

    Plany

    text-5xl md:text-6xl font-bold
    Heading 1

    Plan your trip

    text-4xl font-bold
    Heading 2

    Features

    text-3xl font-bold
    Heading 3

    Calendar-First

    text-xl font-semibold
    Body

    Plan trips directly in your calendar with smart AI assistance.

    text-base
    Body Small

    Simple, calendar-first trip planning

    text-sm text-muted-foreground

    Components

    Core UI components following our design system.

    Buttons

    Hero

    Hero Outline

    Default

    Outline

    Ghost

    Nav

    Cards

    Elevated Card

    Uses subtle gradient background with shadow and border.

    .card-elevated

    Glass Card

    Frosted glass effect with backdrop blur.

    .glass

    Gradients & Effects

    Coral Gradient

    .gradient-bg
    Gradient Text

    Gradient Text

    .gradient-text
    Gradient Border

    Gradient Border

    .gradient-border