Style Guide

Design System

Living style guide for global design tokens

Update globals.css to change these globally

Logo Variations

Main logo in different sizes (icon + text included in SVG)

Light Background

Large (320x96px)

Medium (240x72px) - Header/Footer

Small (160x48px)

Dark Background

Large (320x96px)

Medium (240x72px) - Header/Footer

Small (160x48px)

Branding Assets

Central asset management - drop files in /public/branding/ to update

Logos

Main Logo

/branding/logos/main-logo.png

Dark Logo

/branding/logos/main-logo-Dark.png

Icon

/branding/logos/icon.png

Meta/Favicon

Favicon

Recommended: 32×32 or 64×64

/branding/logos/favicon.png

Open Graph

Recommended: 1200×630

/branding/logos/og-image.png

Open Graph (Dark)

Recommended: 1200×630

/branding/logos/og-image-dark.png

Brand Images

Hero Background

/images/hero-background.jpg

Facility Exterior

/images/facility-exterior.jpg

Facility Interior

/images/facility-interior.jpg

Product Hero

/images/product-hero.jpg

Videos

Hero Video

/branding/videos/hero-video.mp4

Facility Tour

/branding/videos/facility-tour.mp4

Cultivation Process

/branding/videos/cultivation-process.mp4

Color Palette

Monterey coastal agriculture inspired colors

Primary (Earth)

Warm tan earth tone for foundation

CSS Variable:--primary

HSL:45 23% 55%

Hex:#9D9271

Use for: Primary buttons, backgrounds, brand elements

Secondary (Grow)

Yellow-green for growth and vitality

CSS Variable:--secondary

HSL:75 43% 50%

Hex:#8EBE4B

Use for: Growth indicators, success states, plant-related elements

Accent (Water)

Coastal blue for freshness and clarity

CSS Variable:--accent

HSL:193 43% 62%

Hex:#72BACB

Use for: Highlights, hover states, water/coastal elements

Background (Light)

Soft cream for warmth and openness

CSS Variable:--background

HSL:40 27% 95%

Hex:#F7F3ED

Use for: Page background, cards, surfaces

Foreground (Dark)

Near black for readable text

CSS Variable:--foreground

HSL:0 0% 10%

Hex:#1A1A1A

Use for: Body text, headings, dark backgrounds

Muted

Light cream neutral for subtle elements

CSS Variable:--muted

HSL:40 22% 85%

Hex:#D9D0BC

Use for: Disabled states, backgrounds, subtle dividers

Color Shade Variations

Full shade palette (50-900) for each brand color • Use: bg-primary-100, text-accent-500, etc.

Primary Earth Shades

From light cream (50) to dark earth (900)

primary-50

100

primary-100

200

primary-200

300

primary-300

400

primary-400

500

primary-500

600

primary-600

700

primary-700

800

primary-800

900

primary-900

Usage: bg-primary-100, text-primary-600, border-primary-300

Secondary Grow Shades

From light yellow-green (50) to dark olive (900)

secondary-50

100

secondary-100

200

secondary-200

300

secondary-300

400

secondary-400

500

secondary-500

600

secondary-600

700

secondary-700

800

secondary-800

900

secondary-900

Usage: bg-secondary-100, text-secondary-700

Accent Water Shades

From light sky blue (50) to dark ocean blue (900)

accent-50

100

accent-100

200

accent-200

300

accent-300

400

accent-400

500

accent-500

600

accent-600

700

accent-700

800

accent-800

900

accent-900

Usage: bg-accent-100, text-accent-600

Gradient System

Subtle shade-based gradients for section backgrounds

Primary Earth Gradients

Subtle to medium earth tone gradients

gradient-primary-subtle

gradient-primary-soft

gradient-primary-medium

Secondary Grow Gradients

Vibrant green growth gradients

gradient-secondary-subtle

gradient-secondary-soft

gradient-secondary-medium

Accent Water Gradients

Coastal water blue gradients

gradient-accent-subtle

gradient-accent-soft

gradient-accent-medium

Multi-Color Coastal Gradients

Beautiful color combinations for hero sections

gradient-coastal-sunrise

Earth → Water

gradient-coastal-meadow

Grow → Earth

gradient-coastal-ocean

Water → Grow

gradient-coastal-mist

Three-color fade

Radial Gradients

Spotlight effects for hero sections

gradient-primary-radial

gradient-accent-radial

Dark Gradients

Near-black gradients for dark sections (newsletter, CTA)

gradient-dark

Black → Dark gray with earth tones

gradient-dark-soft

Softer dark gradient

Typography

Type scale using Geist as the main typeface

Display Hero (text-7xl)

The Quick Brown Fox

Use for: Landing page heroes only • Font: Geist • Color: secondary-700

Heading 1 (text-5xl)

Premium Cannabis Cultivation

Use for: Page titles, main headings • Font: Geist

Heading 2 (text-4xl)

Our Growing Process

Use for: Section headers, major sections • Font: Geist

Heading 3 (text-3xl)

Coastal Kush Strain

Use for: Card titles, sub-sections • Font: Geist

Body Large (text-lg)

We cultivate premium cannabis using sustainable coastal agriculture methods, combining traditional expertise with modern technology.

Use for: Lead paragraphs, introductions • Font: Geist

Body Base (text-base)

This is the standard body text size. It should be comfortable to read for long-form content and maintains good readability across all devices.

Use for: Body copy, descriptions, general content • Font: Geist

Body Small (text-sm)

Smaller text for captions, labels, and secondary information. Still readable but takes up less space.

Use for: Captions, labels, helper text • Font: Geist

Body Tiny (text-xs)

The smallest text size. Use sparingly for fine print and legal disclaimers.

Use for: Fine print, disclaimers, metadata • Font: Geist

Spacing Scale

Modular spacing system for consistent layouts

Micro

4px

gap-1

Tiny

8px

gap-2

Small

16px

gap-4

Medium

24px

gap-6

Large

32px

gap-8

48px

gap-12

XXL

64px

gap-16

Hero

96px

gap-24

Components

Interactive component examples from our design system

Buttons

All button variants and sizes

Variants

Sizes

Rounded Variants

Badges

Status and category indicators

Default

Secondary

Outline

Destructive

Sativa

Indica

Hybrid

Page Badges

Premium glossy badges with gradient overlays - used for section eyebrows

Earth / Primary

Grow / Secondary

Water / Accent

Graphite / Dark

Features: 3-step gradients (600→700→800), glossy overlay effect for premium appearance

Form Inputs

Text fields and form elements

Disabled Input

Card Styles

Different card configurations

Coastal Card

With hover effects and border animation

Standard Card

Clean and simple card layout

Accented Card

With custom border color

Border Radius

Coastal rounded style for components

rounded-sm

2px

rounded

4px

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-3xl

24px

rounded-full

9999px

Shadows

Elevation system for depth and hierarchy

shadow-sm

Small

shadow

Default

shadow-md

Medium

shadow-lg