GO SOMM Brand Guidelines

Logo & Wordmark

Our wordmark combines two contrasting typographic styles to reflect our brand personality: tech-forward meets sommelier expertise.

Primary Wordmark

GoSomm

Wordmark Construction

"Go" — Geist Sans 300 (Light), tight letterspacing (-0.02em)
"Somm" — Playfair Display Italic 700 (Bold), normal letterspacing
Relationship: No space between words, optically aligned on baseline
Color: Slate (#101116) by default

S-Swirl Symbol

An elegant S-shaped swirl representing wine swirling in a glass. Use this symbol in lockups with the wordmark, or standalone for small spaces (favicons, app icons).

Color Palette

Our color palette is warm and sophisticated, reflecting the world of wine with approachable elegance.

Slate

#101116

rgb(16, 17, 22)

oklch(0.18 0.01 270)

Primary text, headings, navigation

Champagne Rose

#A96464

rgb(169, 100, 100)

oklch(0.58 0.09 20)

Primary buttons, CTAs, wine-inspired warmth

Near White

#FDFBFC

rgb(253, 251, 252)

oklch(0.99 0.002 0)

Page backgrounds, card surfaces

Cool Slate

#909AA1

rgb(144, 154, 161)

oklch(0.68 0.015 240)

Secondary buttons, borders, subtle elements

Honey Gold

#DBAD81

rgb(219, 173, 129)

oklch(0.78 0.08 65)

Badges, highlights, confidence scores, data callouts

Muted Gray

#EFF2F5

rgb(239, 242, 245)

oklch(0.96 0.005 240)

Card backgrounds, input fields, subtle containers

Color Usage

Slate is the primary brand color. Use for text, logo, and important UI elements.
Champagne Rose is the accent color. Use for CTAs, hover states, and brand moments.
Near White provides subtle contrast for backgrounds without harsh pure white.

Text Color Hierarchy

Source of truth: tokens/brand.tokens.json → text-color-hierarchy

Primary Text

Foreground (Slate)

#101116 / oklch(0.18 0.01 270)

Headlines, primary text, high emphasis

Secondary Text

Muted Foreground

oklch(0.42 0.01 270)

Body text, descriptions, medium emphasis

Interactive Text

Primary (Champagne Rose)

#A96464 / oklch(0.58 0.09 20)

Links, outline buttons, active states

Text on Colored Backgrounds

Text on Primary

text-primary-foreground (white)

Text on Accent

text-accent-foreground (slate)

Text on Muted

text-foreground (slate)

Important Guidelines

DO NOT use Cool Slate (#909AA1) for text — Low contrast on white backgrounds. Use only for borders/subtle elements.
DO NOT use Honey Gold (#DBAD81) for text — Contrast issues. Primarily use as background color.
Minimum contrast: WCAG AA (4.5:1 for normal text, 3:1 for large text)
Badges: Always pair bg-[color] with text-[color]-foreground for proper contrast

Button Examples

bg-primary text-primary-foreground

border-accent text-accent

text-foreground hover:bg-muted

Typography

Our typography system uses three carefully selected typefaces for different purposes.

Playfair Display — Display & Wordmark

The quick brown fox jumps

Weights: 700 (Bold), Italic 700 | Use for: Large headlines, hero sections, emotional moments

Crimson Text — Body Text

The quick brown fox jumps over the lazy dog. Warm, readable serif for longer-form content.

Weights: 400 (Regular), 600 (Semibold) | Use for: Marketing copy, long-form content, articles

Geist Sans — UI & "Go"

The quick brown fox jumps over the lazy dog. Modern, clean sans-serif for interface elements.

Weights: 300 (Light), 400 (Regular), 500 (Medium) | Use for: UI elements, buttons, labels, navigation, short descriptive text

Logo Lockups

Official logo lockup configurations for different use cases.

Standard Lockups

For everyday use: website headers, email signatures, business cards, navigation. Both options approved - vertical is primary, horizontal available as alternative.

GoSomm

Vertical Stacked (Primary)

Spacing: 8px gap (0.17× symbol height)
Symbol: 48px height
Wordmark: 36px
Best for: App icons, social profiles, square badges

GoSomm

Horizontal (Alternative)

Spacing: 10px gap (0.21× symbol height)
Symbol: 48px height
Wordmark: 40px
Best for: Wide headers, layouts where vertical won't work

Hero Treatment

For landing page heroes, feature banners, and major brand moments. All 3 options approved - use different ones for different contexts.

GoSomm

Option A: Champagne Background

Symbol: 200px height, 8% opacity
Wordmark: 64px, slate
Why it works: High contrast, symbol subtle but visible

GoSomm

Option B: Soft Slate Background

Symbol: 220px height, 12% opacity, inverted white
Wordmark: 64px, white
Why it works: Symbol more visible than pure dark options

GoSomm

Option C: Clean Light Background

Symbol: 240px height, 4% opacity
Wordmark: 64px, slate
Why it works: Maximum cleanliness, subtle depth

Hero Treatment - Usage Guidelines

Primary Use: Use any of the 3 hero treatments based on your context and background needs
Champagne (A): Best for warm, approachable premium contexts
Soft Slate (B): Best for sophisticated, elegant dark themes
Clean Light (C): Best for minimal, modern clean layouts
Symbol Opacity: Never exceed the specified opacity values - symbol should remain subtle
Wordmark Size: Maintain the size relationships between symbol and wordmark

Compact Hero

For mobile heroes, feature cards, and constrained spaces. Both options approved - use based on background context.

GoSomm

Champagne Compact

Symbol: 120px height, 10% opacity
Wordmark: 44px, slate
Best for: Mobile heroes, feature cards

GoSomm

Dark Compact

Symbol: 140px height, 15% opacity, inverted white
Wordmark: 48px, white
Best for: Dark-themed mobile sections

Overall Usage Guidelines

Standard Lockups: Use vertical as primary; horizontal when space requires it
Hero Treatments: Choose based on background context and brand moment
Compact Lockups: Use on mobile or in constrained card layouts
Consistency: Stick to these exact specifications for all applications
Symbol Opacity: Never exceed specified values - symbol should be subtle
Spacing: Maintain the exact gap values between symbol and wordmark

📖 Complete Lockup Reference

For detailed specs and additional context on all lockup variations:

View complete lockup variations guide →

Usage Guidelines

How to properly use our brand assets across different contexts.

Clear Space & Minimum Size

Clear space: Maintain a minimum clear space around the logo equal to the height of the "S" symbol.

Minimum size: Never display the horizontal lockup smaller than 120px wide (or 32px tall for vertical lockup).

Do's and Don'ts

✓ Do

• Use approved lockups

• Maintain proper spacing

• Use brand colors

• Scale proportionally

✗ Don't

• Stretch or distort

• Change colors arbitrarily

• Rotate the logo

• Add effects (shadows, glows)

When to Use Each Element

Full Lockup (Symbol + Wordmark): Primary usage. Headers, landing pages, marketing.
Wordmark Only: Text-heavy contexts, email signatures, contracts, SEO.
Symbol Only: Favicon, app icon, social media avatar, watermarks (16x16px minimum).

App Components

Design specifications for the GoSomm web app MVP. Value signals are our differentiator — no other wine app shows markup.

Value Signal Badges

Each wine recommendation displays a value signal badge. These must be instantly recognizable through color AND icon (accessibility).

Excellent Value

excellent_value

bg: #dcfce7
text: #166534
icon: CircleCheck

Best value on the menu. Outstanding QPR.

Good Value

good_value

bg: Honey Gold
text: Slate
icon: ThumbsUp

Smart choice. Well-priced for quality.

Fair Price

fair

bg: Muted Gray
text: Muted
icon: Minus

Standard markup. Fairly priced.

Premium

premium

bg: Champagne/10
text: Champagne
icon: Gem

Paying for quality/rarity. Worth it for special occasions.

Special Find

special_find

bg: Slate/5
text: Slate
icon: Sparkles

Rare opportunity. Don't miss this.

Wine Card Component

The primary UI element for displaying wine recommendations.

Excellent Value

Château Margaux 2018

Margaux, Bordeaux

$185

1.8× markup

Sommelier's Note

Outstanding value for a First Growth. You're paying restaurant prices for retail quality.

Hierarchy: Value Signal → Wine Name (Playfair Italic) → Producer → Price + Markup → Sommelier's Note → Feedback

App Typography Scale

Compact type scale optimized for mobile-first app UI.

Page Title

Playfair Display 600, 24px

Wine Name

Playfair Display Italic 500, 18px

SECTION HEADER

Geist Sans 600, 14px, uppercase

Body text for descriptions

Geist Sans 400, 14px

Caption and meta text

Geist Sans 400, 12px

2.1× markup

Geist Mono 500, 12px

Loading States

Progressive loading messages that feel personal, not technical.

Fetching wine list...

Phase 1: Initial fetch

Analyzing wines...

Phase 2: Processing

Finding your perfect picks...

Phase 3: Matching

Almost there...

Phase 4: Fallback for slow

Iconography

Lucide React icons. Consistent sizing: 16px inline, 20px navigation, 24px prominent.

Home

Search

History

Settings

URL Input

Photo Input

Download Assets

Access logos, brand guidelines, and design resources

Symbol SVG View All Lockups Wordmark Demos