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).

Download Assets

Access logos, brand guidelines, and design resources

Symbol SVG View All Lockups Wordmark Demos