GoStash

Design System Reference

gostash.ai

Screenshot and clipboard manager for Mac built for vibe coding — captures screens with AI-readable context banners and annotations. The design system is a clean, light-theme marketing site using Inter, a restrained palette anchored by accent green #5ed580 and dark text #1a1a1a, with generous whitespace and subtle card shadows.

Platform: Static HTML/CSS  |  Theme: Light  |  Font: Inter  |  Accent: #5ed580

Colors

Brand & Accent

Core

Backgrounds

Text

Borders

Semantic

Typography

Primary font: Inter from Google Fonts. Weights used: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold).

Heading 1

Heading 2

Heading 3

Body Large

Body Regular

Caption

Tag / Label

Spacing & Layout

Base unit: 4px. Container max-width: 1200px. Content max-width: 800px. Section padding: 80px vertical.

Spacing Scale

Border Radius

Shadows

Buttons

Primary (Dark)

Dark background, white text. Used for primary CTAs like "Download" and "Get Started".

Ghost (Outline)

Transparent background with border. Used for secondary actions.

Accent (Green)

Used sparingly for high-emphasis accent actions.

Navigation

Fixed header, white background, subtle bottom border. Logo left, links center, CTA right. Height: 64px.

Hero Section

Centered layout. Tag label above h1, descriptive subtitle below, primary + ghost button pair, product mockup with heavy shadow beneath.

Feature Cards

White background, 1px border, 16px radius, card shadow. Icon box with accent tint, h4 title, description text. Hover lifts and deepens shadow.

Problem / Solution Cards

Side-by-side layout. Problem cards use red tint, solution cards use green tint. Each has a label, title, and description.

How It Works

Numbered steps with green circles and vertical connector lines. Clean vertical flow.

Comparison Table

Clean table with #f8f9fa header row. Green checks for supported features, red crosses for unsupported. Consistent cell padding.

Tags

Uppercase labels with accent tint background. Used for section labels and category badges.

Footer

Dark background (#1a1a1a), white text. Logo left, links right, copyright bar at bottom with subtle divider.

CSS Variables

Copy this :root block into your stylesheet to apply the GoStash design tokens.

:root {
  /* Brand */
  --accent: #5ed580;
  --accent-hover: #4dc070;
  --accent-tint: rgba(94,213,128,0.08);
  --accent-muted: rgba(94,213,128,0.15);

  /* Core */
  --dark: #1a1a1a;
  --white: #ffffff;
  --problem: #ff4444;
  --problem-tint: rgba(255,68,68,0.08);

  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f0f2f5;

  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-tertiary: #999999;
  --text-muted: #888888;

  /* Borders */
  --border: #e5e5e5;
  --border-secondary: #eeeeee;
  --border-hover: #cccccc;
  --border-focus: #5ed580;

  /* Shadows */
  --shadow-card: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-mockup: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-btn: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-btn-hover: 0 4px 16px rgba(0,0,0,0.1);

  /* Radius */
  --radius-sm: 6px;
  --radius-btn: 8px;
  --radius-icon: 10px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-pill: 9999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* Layout */
  --container: 1200px;
  --content: 800px;
  --header-height: 64px;
}

Tailwind Mapping

Add these extensions to your tailwind.config.js under theme.extend to use the GoStash design tokens with Tailwind CSS utility classes. The paired design-system.json file contains the full export under the tailwind key.

Theme Extensions

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        accent: { DEFAULT: '#5ed580', hover: '#4dc070', tint: 'rgba(94,213,128,0.08)', muted: 'rgba(94,213,128,0.15)' },
        dark: '#1a1a1a',
        problem: { DEFAULT: '#ff4444', tint: 'rgba(255,68,68,0.08)' },
        surface: { primary: '#ffffff', secondary: '#f8f9fa', tertiary: '#f0f2f5' },
        text: { primary: '#1a1a1a', secondary: '#666666', tertiary: '#999999', muted: '#888888' },
        border: { DEFAULT: '#e5e5e5', secondary: '#eeeeee', hover: '#cccccc', focus: '#5ed580' },
      },
      fontFamily: {
        sans: ["'Inter'", '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
        mono: ["'SF Mono'", "'Fira Code'", 'monospace'],
      },
      fontSize: {
        'h1':      ['48px', { lineHeight: '1.1',  letterSpacing: '-0.02em', fontWeight: '700' }],
        'h1-lg':   ['56px', { lineHeight: '1.1',  letterSpacing: '-0.02em', fontWeight: '700' }],
        'h2':      ['36px', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }],
        'h2-lg':   ['42px', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }],
        'h3':      ['20px', { lineHeight: '1.3',  letterSpacing: '-0.01em', fontWeight: '600' }],
        'h3-lg':   ['24px', { lineHeight: '1.3',  letterSpacing: '-0.01em', fontWeight: '600' }],
        'body-lg': ['18px', { lineHeight: '1.6',  fontWeight: '400' }],
        'body':    ['16px', { lineHeight: '1.6',  fontWeight: '400' }],
        'caption': ['14px', { lineHeight: '1.4',  fontWeight: '400' }],
        'tag':     ['12px', { lineHeight: '1.3',  letterSpacing: '0.05em', fontWeight: '600' }],
      },
      borderRadius: {
        sm: '6px', btn: '8px', card: '12px', 'card-lg': '16px', icon: '10px',
      },
      boxShadow: {
        card: '0 4px 12px rgba(0,0,0,0.08)',
        'card-hover': '0 8px 24px rgba(0,0,0,0.12)',
        mockup: '0 20px 60px rgba(0,0,0,0.15)',
        btn: '0 2px 8px rgba(0,0,0,0.06)',
        'btn-hover': '0 4px 16px rgba(0,0,0,0.1)',
        nav: '0 1px 3px rgba(0,0,0,0.05)',
      },
      maxWidth: {
        container: '1200px', content: '800px',
      },
    },
  },
}

Component Recipes

Ready-to-use class combinations for common GoStash components. Copy these into your components or create @apply directives.