Design System

Internal reference

Design System

Organic/artisanal direction — like a coffee farm journal meets modern specialty importer. Every element should feel warm, editorial, and distinctly not AI-generated.

Colors

Warm cream base with a coffee lifecycle palette. oklch color space throughout. The terracotta accent is the primary editorial action color.

Backgrounds

background

oklch(0.98 0.025 90)

card

oklch(0.97 0.02 88)

secondary

oklch(0.95 0.03 85)

foreground

oklch(0.12 0.01 250)

Coffee Lifecycle Palette

coffee-green

Soft Sage

coffee-parchment

Calm Crema

coffee-light-roast

Warm Latte

coffee-dark-roast

Deep Espresso

coffee-cherry

Soft Mocha

coffee-purple

Mild Cocoa

coffee-terracotta

Editorial Accent

Semantic Tokens

primary

= coffee-cherry

accent

= coffee-light-roast

destructive

muted

border

ring

Typography

Playfair Display for headlines (editorial, emotional). Instrument Sans for body (warm, humanist).

Headline — Playfair Display

Specialty coffee direct from Ecuador.

font-serif / 400–900 / Variable woff2

Body — Instrument Sans

Three brothers, one mission — traceable specialty coffee direct from partner fincas in Ecuador to roasters and cafes across the UK and Europe. Every lot scores 84+ on the SCA scale.

font-sans / 400–700 / Variable woff2

Heading Scale

text-5xl serif

Why roasters choose us

text-4xl serif

Three brothers, one mission

text-3xl serif

Ethically sourced

text-2xl serif

Farm & harvest

Labels & Body

eyebrow

What we stand for

body

Every lot comes directly from the farmer — no middlemen, fair and transparent terms.

small/meta

Free UK shipping on orders over £100

Buttons & CTAs

Sharp corners, uppercase tracking, terracotta hover. No pill shapes, no bounce, no glow shadows.

Primary CTA

Browse Catalog

bg-foreground text-background font-medium tracking-wide uppercase hover:bg-coffee-terracotta

On Dark Background

Browse Catalog Secondary Action

Inverted: bg-background text-foreground / Secondary: border border-background/40

Form Submit

Sharp corners from global --radius: 0.25rem

Layout Patterns

Editorial strips, pull quotes, typographic stats. Break the monotony — never repeat the same section pattern twice in a row.

Editorial Strip (alternating image/text)

Ethically sourced

Every lot comes directly from the farmer — no middlemen, fair and transparent terms.

High quality

Every lot scores 84+ on the SCA 100-point scale.

Pull Quote

In 2025, we founded Gonzalez Brothers Coffee with a clear purpose: to share specialty coffee from Ecuador with the world.

Typographic Stats Row

1,500+

metres altitude

84+

SCA score

100%

direct trade

Dividers

On light: w-16 h-px bg-border

On dark: w-16 h-px bg-primary-foreground/20

Forms

Solid card backgrounds, no blur, no shadow. Sharp corners from global radius.

Name *

Email *

Message

Input: bg-card border-border/40 hover:border-accent focus:ring-accent/30
Button: bg-foreground rounded-sm tracking-wide uppercase hover:bg-coffee-terracotta

Animation

Decay easing on everything. Subtle translateY, no scale. Film grain globally.

Decay Easing

cubic-bezier(0.16, 1, 0.3, 1)

Physics-based deceleration. Fast start, gentle stop. Used on all scroll-triggered animations and transitions.

Fade Up

translateY(16px) → 0, 0.5s

Subtle 16px upward motion. No scale transform. Applied via animate-fade-up class.

Film Grain Texture

Look closely — grain overlay is on the entire page via body::before

body::before

SVG feTurbulence noise, opacity 3.5%, mix-blend-mode: overlay, z-index: 1 (below modals).

Banned Patterns

These patterns make the site look AI-generated. They are explicitly banned on landing pages.

backdrop-blur on cards/inputs

Glassmorphism looks AI-generated. Only allowed on HeroCarousel prev/next buttons and dashboard headers.

rounded-full on CTAs/inputs

Pill buttons look generic. Only allowed on avatars, carousel dots, timeline step circles, spinners.

ring-1 ring-border/50 on every card

Identical ring pattern creates visual fatigue. Use border border-border/20 or nothing.

hover:-translate-y-2 (bounce on hover)

The most AI-looking interaction. Use color shifts only.

hover:shadow-xl / hover:shadow-[0_0_50px...]

Glow shadows look machine-generated. No shadows on hover.

Gradient decorative dividers

bg-gradient-to-r from-X to-Y on h-1 elements. Use h-px bg-border instead.

Identical section rhythm

Never use centered-header → card-grid for every section. Alternate between editorial strips, pull quotes, typography-only, and asymmetric layouts.

Logo

Four PNG variants (940px wide, transparent background) plus an SVG inline version. Use the subline variant in the footer, the compact variant in headers and navigation.

On Light Background

gb_logo_black.png

940 x 216 — headers, nav

gb_logo_black_subline.png

940 x 368 — larger placements

On Dark Background

gb_logo_white.png

940 x 216 — hero overlays

gb_logo_white_subline.png

940 x 368 — footer

SVG Inline Component

GBLogo.tsx / GBLogo.astro

Inline SVG — inherits currentColor, h-8 default

Usage

Landing header

GBLogo component — SVG, inherits text color

Dashboard header

GBLogo component — same SVG

Footer

gb_logo_white_subline.png — h-12 sm:h-14

Source: /public/images/logos/ (PNGs) + /src/components/GBLogo.tsx (SVG inline)
Master artwork: gb_logo.ai (Illustrator)

Icons

Landing pages use inline SVGs for arrows and checkmarks. The dashboard uses lucide-react. No decorative icons — only functional indicators.

CTA Arrow (inline SVG)

w-4 h-4 stroke-width="2" — animates with group-hover:translate-x-1

Checkmark (inline SVG)

w-5 h-5 stroke-width="1.5" text-primary — used in trust signal lists

Landing pages: inline SVGs only

No icon library imports. Keeps bundle small and avoids dependency on a specific icon set aesthetic.

Dashboard: lucide-react

Used in shadcn UI components (password-input, back-link). Consistent with shadcn ecosystem.

Product Cards

Catalog product cards for B2B green coffee lots. Taller images, flavor descriptors, variety names, and harvest freshness indicators. No bounce hover, no glow shadows.

Grid Card Anatomy

Image: h-40 sm:h-52 lg:h-60 object-cover

Lot Title

Supplier · Geisha, Sidra

87.5

SCA

Floral Citrus Brown Sugar

Process

Washed

Harvest

Spring 2025

Card Rules

No hover bounce

hover:border-accent color shift only

Sharp corners

Global --radius: 0.25rem, no rounded-2xl overrides

Image hover: subtle zoom

group-hover:scale-[1.02] — not scale-105

Flavor descriptors

bg-primary/8 text-primary, max 3 tags, no rounded-full

Freshness Label

Fresh harvest

Shown when product.isFresh === true. Top-left of image.

Status Pill

Spot Sold out

Top-right of image. No rounded-full.

Container: border border-border bg-card hover:border-accent
Image: h-40 sm:h-52 lg:h-60 group-hover:scale-[1.02]
Descriptors: bg-primary/8 text-primary text-[0.65rem]
Varieties: shown after supplier with · separator

Section Spacing Reference

Stats band

py-8 sm:py-10

Content section

pt-20 sm:pt-32

Editorial strips

py-0

Important CTA

py-20 sm:py-32

Utility

py-10 sm:py-14