---
version: alpha
name: Sammy
description: High-contrast fintech optimism — pure black ink on a warm yellow signature, illustration-driven and playful, with chunky pill buttons, generously rounded cards, and a bold grotesk display voice built for #BankingForFreedom.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f6f2"
  surface-yellow: "#fbe274"
  surface-ink: "#000000"
  ink: "#0a0a0a"
  ink-secondary: "#454545"
  ink-muted: "#737373"

  # Brand accents
  primary: "#fbe274"        # Sammy Yellow — the signature
  primary-deep: "#f4d23a"   # hover / pressed yellow
  accent-ink: "#000000"     # pure black, paired with yellow

  # On-color
  on-primary: "#0a0a0a"     # black text on yellow
  on-ink: "#fbe274"         # yellow text on black panels (brand pairing)
  on-ink-plain: "#ffffff"   # white text on black when neutral

  # Supporting illustration tints
  mint: "#bfe3c6"
  sky: "#bcd6f0"
  coral: "#f3b9a3"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-700: "#454545"
  gray-500: "#737373"
  gray-300: "#cfcdc6"
  gray-100: "#ebe9e3"
  gray-50: "#f7f6f2"

  # Lines + focus
  border: "#e6e3da"
  focus-ring: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -2.0px
  display:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -1.4px
  section-heading:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-medium:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px
  tag:
    fontFamily: "Schibsted Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.6px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  2xl: 40px
  pill: 9999px

components:
  # Primary CTA — black pill (the default action)
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink-plain}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px

  # Yellow CTA — the brand signature button
  button-yellow:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px
  button-yellow-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px

  # Secondary — outlined pill
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 28px
    borderColor: "{colors.ink}"

  # Tag / pill badge
  badge:
    backgroundColor: "{colors.surface-yellow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.tag}"
    rounded: "{rounded.pill}"
    padding: 6px 12px

  # Standard rounded card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  # Soft feature card
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Yellow highlight card
  card-yellow:
    backgroundColor: "{colors.surface-yellow}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Black panel — inverted brand block, yellow type
  card-ink:
    backgroundColor: "{colors.surface-ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.xl}"
    padding: 40px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.focus-ring}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Sammy Design System

## Overview

Sammy is a US-banking platform for global freelancers and digital nomads, and its design speaks the language of optimism rather than the cold blue-and-gray trust signals most fintech reaches for. The system is built on one electric pairing: pure black (`{colors.ink}`) against Sammy Yellow (`{colors.primary}`), a warm, sunny `#fbe274` that carries the brand's `#BankingForFreedom` promise. Where competitors signal "secure," Sammy signals "free, fast, and human." The Awwwards-recognized site leans on illustration, scroll-driven motion, and big confident type to make borderless banking feel joyful.

The typographic voice is a bold grotesk set tight. Display headlines run heavy (700–800 weight) with aggressive negative tracking, giving the brand a chunky, friendly authority — confident without feeling corporate. Body copy relaxes to a comfortable 400-weight grotesk at generous line-height, keeping dense financial detail readable. The whole scale stays in one family so the personality is consistent from a 64px hero down to a 12px tag.

Shape is the second pillar. Sammy rounds everything generously — pill buttons (`{rounded.pill}`), softly rounded cards (`{rounded.xl}` at 28px), and friendly inputs. Nothing is sharp; the rounding is part of the approachability. The palette extends into a small set of soft illustration tints (mint, sky, coral) that animate the scenes and feature scenes, but the chrome itself stays disciplined: black ink, white and warm-off-white surfaces, yellow as the one loud accent.

**Key Characteristics:**
- Signature black-and-yellow pairing — `{colors.ink}` on `{colors.primary}` (#fbe274)
- Bold grotesk display type, heavy weights (700–800) with tight negative tracking
- Pill buttons (`{rounded.pill}`) and generously rounded cards (`{rounded.xl}`)
- Inverted black brand panels with yellow type (`{colors.on-ink}`)
- Warm off-white surface (`{colors.surface-soft}`) instead of cold gray
- Soft illustration tints (mint/sky/coral) for scene color, kept out of UI chrome
- Yellow used as the one loud accent; never the page background for reading text

## Colors

### Primary
- **Sammy Yellow** (`{colors.primary}`): The signature accent — CTAs, highlight cards, brand moments.
- **Sammy Black** (`{colors.ink}`): Primary text, dark CTAs, inverted panels. Near-pure black.
- **Pure White** (`{colors.background}`): Page background and card surfaces.

### Brand Pairings
- **Primary Deep** (`{colors.primary-deep}`): Hover/pressed state for yellow buttons.
- **On Primary** (`{colors.on-primary}`): Black text placed on yellow.
- **On Ink** (`{colors.on-ink}`): Yellow text on black panels — the inverted brand pairing.
- **On Ink Plain** (`{colors.on-ink-plain}`): White text on black for neutral contexts.

### Supporting Illustration Tints
- **Mint** (`{colors.mint}`): Illustration / scene accent.
- **Sky** (`{colors.sky}`): Illustration / scene accent.
- **Coral** (`{colors.coral}`): Illustration / scene accent.

### Surfaces
- **Surface Soft** (`{colors.surface-soft}`): Warm off-white for alternating sections and soft cards.
- **Surface Yellow** (`{colors.surface-yellow}`): Yellow highlight blocks.
- **Surface Ink** (`{colors.surface-ink}`): Black panel backgrounds.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Headings, primary text.
- **Gray 700** (`{colors.gray-700}`): Secondary text.
- **Gray 500** (`{colors.gray-500}`): Muted / tertiary text.
- **Gray 300** (`{colors.gray-300}`): Disabled, subtle dividers.
- **Gray 100** (`{colors.gray-100}`): Light fills.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.
- **Border** (`{colors.border}`): Card outlines, input borders, hairlines.

## Typography

### Font Family
- **Primary**: `Schibsted Grotesk`, with fallbacks: `Arial, sans-serif` — a bold, friendly grotesk for both display and body.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero — big confident brand statement |
| `display` | 48px secondary hero / section opener |
| `section-heading` | Feature section titles |
| `card-title` | Card and feature headings |
| `sub-heading` | Emphasized intros, lead-ins |
| `body-large` | Feature descriptions, hero subcopy |
| `body` | Standard reading text |
| `body-medium` | Nav, emphasized inline labels |
| `button-ui` | Buttons and primary actions |
| `caption` | Metadata, footnotes |
| `tag` | Uppercase tracked tags/badges |

### Principles
- **Heavy and tight at the top**: Display sizes use 700–800 weight with -1.4px to -2.0px tracking for chunky, friendly impact.
- **Relax for reading**: Body stays 400 weight at 1.6 line-height for dense financial copy.
- **One family, full range**: The whole system is one grotesk — personality stays consistent everywhere.
- **Tags shout quietly**: 12px tags use positive tracking (0.6px) and 700 weight as the only uppercase-style voice.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px. The scale jumps generously at the top (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for airy, scroll-driven sections.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with large type and illustration
- Feature sections: 2–3 column rounded-card grids
- Alternating white and warm off-white (`{colors.surface-soft}`) sections

### Whitespace Philosophy
- **Generous and airy**: Large vertical rhythm between scroll sections.
- **Rounded everything**: Pills and 28px card radii keep the page soft and approachable.
- **Color as punctuation**: Yellow and black panels appear as bold beats between calm white sections.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Text blocks, soft-fill cards |
| Hairline | `1px solid {colors.border}` | Standard cards, inputs, nav |
| Soft lift | `0 8px 24px rgba(10,10,10,0.06)` | Floating feature cards |
| Brand panel | Solid `{colors.surface-ink}` or `{colors.surface-yellow}` fill | Inverted / highlight blocks |
| Focus | `2px solid {colors.focus-ring}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Depth is gentle. Sammy mostly separates content with rounding, hairline borders, and bold color fills rather than heavy shadow. When elevation is used, it is a soft, low-opacity lift — never harsh.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small inline elements |
| `md` | 14px | Inputs, small containers |
| `lg` | 20px | Medium cards, image frames |
| `xl` | 28px | Standard feature cards |
| `2xl` | 40px | Large hero panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-yellow}`, `{components.card-ink}`).

### Buttons
- **`button-primary`** — Black pill, white text. The default neutral CTA.
- **`button-yellow`** — Sammy Yellow pill, black text. The signature brand action.
- **`button-secondary`** — White pill with black outline.

### Pills & Badges
- **`badge`** — Yellow pill with black tag type, uppercase tracked.

### Cards
- **`card`** — White, hairline border, 28px radius.
- **`card-soft`** — Warm off-white fill, no border.
- **`card-yellow`** — Yellow highlight block with black text.
- **`card-ink`** — Black panel with yellow type — the inverted brand moment.

### Inputs
- **`input`** — White surface, hairline border, 14px radius. Focus uses a 2px black outline.

### Navigation
- **`nav-bar`** — White sticky header, hairline bottom border, black or yellow pill CTA on the right.

## Do's and Don'ts

### Do
- Pair black ink with Sammy Yellow as the core brand signature
- Use pill buttons and 28px rounded cards — softness is the personality
- Use heavy grotesk weights (700–800) with tight negative tracking on display type
- Use yellow as a loud accent: CTAs, highlight cards, brand panels
- Use the warm off-white surface (`{colors.surface-soft}`) instead of cold gray
- Place black text on yellow, and yellow (or white) text on black panels

### Don't
- Don't set yellow as the background behind long reading text — use it as an accent
- Don't use sharp corners — everything rounds
- Don't introduce corporate blue-gray fintech chrome; Sammy is warm and playful
- Don't use thin display weights — the brand voice is bold
- Don't let illustration tints (mint/sky/coral) leak into UI chrome — they belong in scenes
- Don't pair low-contrast gray text on yellow — keep black on yellow for readability

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced hero size |
| Tablet | 600–1024px | 2-column card grids |
| Desktop | 1024–1280px | Full multi-column layout |
| Large Desktop | >1280px | Centered, max ~1200px content width |

### Touch Targets
- Pill buttons use comfortable 16px vertical padding
- Nav links and CTAs sized for easy tapping
- Tags keep 6–12px padding for legibility

### Collapsing Strategy
- Hero: 64px display scales down, keeps tight tracking proportionally
- Navigation: horizontal links → hamburger menu with pill CTA retained
- Feature cards: 3-column → 2-column → single column
- Black/yellow panels: maintain full-bleed color, stack vertically
- Section spacing: 96px → ~48px on mobile

### Image Behavior
- Illustrations scale fluidly and remain central to scenes
- Rounded card image frames keep their 20–28px radius at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Sammy Yellow `{colors.primary}` with black text, or black pill `{colors.ink}` with white text
- Background: Pure White `{colors.background}` / warm off-white `{colors.surface-soft}`
- Heading text: Sammy Black `{colors.ink}`
- Body text: Gray 700 `{colors.gray-700}`
- Brand panel: Black `{colors.surface-ink}` with yellow text `{colors.on-ink}`
- Border: `1px solid {colors.border}`
- Focus ring: Black `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white. Headline at 64px Schibsted Grotesk weight 800, line-height 1.02, letter-spacing -2.0px, color `{colors.ink}`. Subtitle at 18px weight 400, color `{colors.gray-700}`. A yellow pill CTA (`{colors.primary}` fill, black text, 9999px radius, 16px 28px padding) and a black pill secondary."
- "Design a feature card: white background, `1px solid {colors.border}`, 28px radius, 32px padding. Title 24px weight 700 letter-spacing -0.5px. Body 16px weight 400 `{colors.gray-700}`."
- "Build an inverted brand panel: black `{colors.surface-ink}` background, yellow `{colors.on-ink}` heading at 24px weight 700, 28px radius, 40px padding."
- "Make a yellow tag: `{colors.surface-yellow}` background, black text, 9999px radius, 6px 12px padding, 12px weight 700 with 0.6px tracking."

### Iteration Guide
1. Black + Sammy Yellow is the identity — reach for it before any other color
2. Round everything: pills for actions, 28px for cards, nothing sharp
3. Display type is heavy (700–800) and tight; body is light (400) and airy
4. Yellow is an accent and a panel, never the canvas behind reading text
5. Use warm off-white, not cold gray, for alternating sections
6. Keep illustration tints in scenes; keep UI chrome black/white/yellow

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Sammy. Brand names and trademarks belong to their respective owners.