Global Village Coffeehouse

---
name: global-village-coffeehouse
description: Apply the Global Village Coffeehouse visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Global Village Coffeehouse, mentions gvc, coffeehouse aesthetic, 90s earthy bohemian, or describes woodcut and scratchboard line art, swirl suns, moons, and waves, kraft paper and earth tones — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Global Village Coffeehouse Design System

The earthy bohemian commercial style of the late 1980s–1990s: woodcut and scratchboard motifs, swirling suns and moons, steam curling off coffee cups, hand-rendered type, and kraft-paper textures in terracotta, olive, and ochre. The house look of 90s cafés, bookstores, and 'world music' packaging, named by CARI's Evan Collins.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Global Village Coffeehouse.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (gvc, coffeehouse aesthetic, 90s earthy bohemian, aroma swirl), or describes its traits: woodcut and scratchboard line art; swirl suns, moons, and waves; kraft paper and earth tones; hand-drawn wobbly type; aroma-swirl steam motifs; matisse-like cut-out figures.

## Design tokens

### Color palette

- Kraft-paper cream background: `#f2e8d5` (--color-bg)
- Deeper parchment panel: `#e9dcc0` (--color-surface)
- Espresso-brown primary text: `#33241a` (--color-text)
- Secondary text, roasted tan: `#6b5540` (--color-text-muted)
- Terracotta red — stamps, links, primary actions: `#9c3d22` (--color-accent)
- Olive green for foliage motifs and secondary actions: `#667b34` (--color-accent-2)
- Ochre sun-gold for decorative motifs: `#c98a2c` (--color-accent-3)
- Woodcut ink for line art and borders: `#2a1f16` (--color-ink)
- Soft tan rules and frames: `#cbb593` (--color-border)

### Typography

- Display / headings: Kalam (fallback: Comic Sans MS, cursive) (ideal: Lithos Pro, premium — use Kalam as the free substitute)
- Body: Alegreya (fallback: Georgia, serif)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0.02em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 20, 28, 40, 56, 80 — Cozy, not cramped — content wrapped in hand-drawn frames with comfortable margins, like a chalkboard menu with room for doodles in the corners.
- Border radius: sm 4px, md 10px, organic 255px 15px 225px 15px / 15px 225px 15px 255px — Corners feel hand-cut; the 'organic' radius gives panels a wobbly hand-drawn edge.
- Border treatment: 2px solid #2a1f16 — Borders imitate brush or woodcut strokes — slightly irregular; dashed and wavy variants are on-style.

### Shadows

- stamp: `2px 3px 0 rgba(42, 31, 22, 0.25)` — Slight offset like misregistered block printing, for cards and buttons
- lifted-paper: `0 8px 20px rgba(51, 36, 26, 0.18)` — Modals and featured panels

### Layout

- Max content width: 1080px
- Bordered compositions: sections framed by hand-drawn or woodcut-style rules
- Corner motifs — suns, leaves, swirls — anchoring frames like rubber stamps
- Asymmetric collage of framed panels rather than strict grid alignment
- Generous use of the kraft background as visible 'paper' between elements

### Effects

- Kraft paper grain texture at low opacity over the background
- Woodcut/scratchboard SVG icon set (sun, moon, cup, leaf, wave) in single-color ink
- Slight rotation (-1.5deg to 1.5deg) on stamps and badges for hand-placed feel
- Misregistered two-color print effect on featured illustrations

### Motion

- Easing: cubic-bezier(0.3, 0.1, 0.3, 1); durations 160ms / 300ms / 500ms
- Minimal, analog-feeling motion — gentle fades and small settles, nothing slick
- Stamps 'press' on click (tiny scale-down plus deeper stamp shadow)
- Steam-swirl SVGs may loop a slow drift; disable under prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f2e8d5;
  --color-surface: #e9dcc0;
  --color-text: #33241a;
  --color-text-muted: #6b5540;
  --color-accent: #9c3d22;
  --color-accent-2: #667b34;
  --color-accent-3: #c98a2c;
  --color-ink: #2a1f16;
  --color-border: #cbb593;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-organic: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --shadow-stamp: 2px 3px 0 rgba(42, 31, 22, 0.25);
  --shadow-lifted-paper: 0 8px 20px rgba(51, 36, 26, 0.18);
  --border-default: 2px solid #2a1f16;
  --font-display: Kalam, "Comic Sans MS", cursive;
  --font-body: Alegreya, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: 0.02em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.3, 0.1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Kalam:wght@700&family=Alegreya:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Kraft bar with a 2px ink rule below, hand-lettered wordmark, links in Alegreya small caps with terracotta underlines drawn slightly wavy
- **Hero:** Large hand-drawn headline in Kalam, woodcut sun motif behind or beside it, wobbly-bordered panel with a terracotta stamp CTA
- **Card:** Parchment panel with 2px ink border (organic radius), corner motif stamp, stamp shadow; title in Kalam, body in Alegreya
- **Button (primary):** Terracotta fill with cream label, 2px ink border, stamp shadow that flattens on press
- **Button (secondary):** Transparent with 2px ink border and espresso label; fills with surface tan on hover
- **Form fields:** Cream field on parchment, 2px ink border with slightly rounded organic corners; focus thickens the border and adds a terracotta underline

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A scratchy woodcut sun with wavy rays — or a coffee cup with a triple aroma swirl — stamped in terracotta ink on kraft paper, framed by a hand-drawn wobbly border. Spend boldness here; keep everything else quiet.

## Do

- Draw it by hand (or fake it): wobbly borders, scratchy icons, stamped textures
- Keep the palette strictly earthy — terracotta, olive, ochre, espresso on kraft
- Use sun/moon/wave/steam iconography as recurring motifs
- Pair a rough display face with a warm book serif

## Don't

- No crisp geometric vectors or corporate gradients — everything looks printed or drawn
- Avoid pure white and pure black; ink is warm brown, paper is cream
- Don't sprinkle in cool blues or neons; they shatter the earthiness
- Skip literal use of specific indigenous artworks — the style's generic 'tribal' borrowing is its historical baggage; invent motifs instead

## Accessibility notes

- Espresso text on kraft (#33241a on #f2e8d5) passes comfortably, but olive (#667b34) sits near the 4.5:1 line on kraft — use it for large text and motifs, not small copy
- Ochre (#c98a2c) is decorative-only; it fails as text on the cream background
- Hand-drawn display type (Kalam) needs larger sizes; keep it at 22px+ and never use it for dense copy

## Reference sites

- Wikipedia — Global Village Coffeehouse: https://en.wikipedia.org/wiki/Global_Village_Coffeehouse
- CARI — Global Village Coffeehouse: https://cari.institute/aesthetics/global-village-coffeehouse
- Aesthetics Wiki — Global Village Coffeehouse: https://aesthetics.fandom.com/wiki/Global_Village_Coffeehouse

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip global-village-coffeehouse.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/global-village-coffeehouse.json

Settings → Capabilities → Skills → Upload skill → global-village-coffeehouse.zip