Style Guide

    A showcase of our design system, typography, and component patterns.

    Currently viewing: Lite Theme

    Typography

    Font Families

    Aa

    Lexend Deca

    Primary typeface for headings and brand elements. Characterized by its geometric clarity and modern serif-adjacent look.

    Aa

    Red Hat Display

    Secondary typeface for body text and UI elements. Optimized for readability and consistent rhythm across layouts.

    Font Weights

    AaLight (300)
    AaNormal (400)
    AaMedium (500)
    AaBold (700)
    AaBlack (900)

    Heading 1

    Font: Lexend Deca, 2.25rem → 3rem → 3.75rem (responsive)

    Heading 2

    Font: Lexend Deca, 1.875rem → 2.25rem → 3rem (responsive)

    Heading 3

    Font: Lexend Deca, 1.5rem → 1.875rem (responsive)

    Heading 4

    Heading 4

    Font: Lexend Deca, 1.25rem → 1.5rem (responsive)

    Heading 5

    Font: Lexend Deca, 1.125rem → 1.25rem (responsive)

    Heading 6

    Font: Lexend Deca, 1rem → 1.125rem (responsive)

    Body Large — This is paragraph text at a larger size for emphasis or introductory content.

    Font: Red Hat Display, 1.125rem

    Body Regular — This is standard paragraph text used throughout the site for comfortable reading.

    Font: Red Hat Display, 1.125rem

    Body Small — Used for captions, metadata, and supplementary information.

    Font: Red Hat Display, 0.875rem

    Color Palette

    Values pulled dynamically from CSS variables

    Background

    HSL: Loading...HEX:

    Foreground

    HSL: Loading...HEX:

    Primary

    HSL: Loading...HEX:

    Secondary

    HSL: Loading...HEX:

    Accent

    HSL: Loading...HEX:

    Muted

    HSL: Loading...HEX:

    Card

    HSL: Loading...HEX:

    Destructive

    HSL: Loading...HEX:

    Buttons

    Category Tags

    Synced with Design System

    Border Radius

    Small

    4px (radius - 4px)

    Medium

    6px (radius - 2px)

    Large

    8px (Base Radius)

    Extra Large

    16px (2 * radius)

    Current Base Radius:

    Global Effects

    Standard Shadows

    shadow-sm
    shadow-md
    shadow-lg

    Interactive Delays

    .stagger-1 (0.1s)
    .stagger-2 (0.2s)
    .stagger-3 (0.3s)
    .stagger-4 (0.4s)

    SEO & Brand Assets

    Meta Information

    Default Browser TitleEComForSale | Turnkey E-com Brands
    Meta DescriptionPremium turnkey e-commerce brands for purchase or investor operator with expert support.
    Canonical URLhttps://ecomforsale.com
    Google Analytics IDG-XXXXXXXXXX

    Social Media (OG / X)

    OG Image (1200x630)
    /og-image.png
    /og-image.png
    Twitter Cardsummary_large_image
    OG Typewebsite

    Brand Visuals

    Main Logo
    Logo

    Standard Aspect Ratio: 18:5 (Recommended)

    Favicon (32x32)
    32px
    /favicon.webp
    Touch Icon (180x180)
    180px
    /apple-touch-icon.png