Amber Gallery

---
name: amber-gallery
description: Apply the Amber Gallery visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Amber Gallery, mentions claude design skills style, gallery light, amber minimal, or describes near-white layered neutrals, single amber accent, hairline borders — 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
---

# Amber Gallery Design System

The design system this site itself runs on: a calm near-white gallery canvas, hairline borders, white cards, tight Inter typography, and a single amber accent spent only on the brand mark, active states, and primary CTAs — with a matching authored dark mode. Built to showcase other styles without competing with them.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Amber Gallery.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (claude design skills style, gallery light, amber minimal), or describes its traits: near-white layered neutrals; single amber accent; hairline borders; white cards on gray canvas; tight Inter typography.

## Design tokens

### Color palette

- Gallery canvas, near-white cool gray: `#f6f6f7` (--color-bg)
- Cards, panels, and the sidebar: `#ffffff` (--color-surface)
- Inputs and inset wells: `#f2f2f4` (--color-surface-2)
- Primary ink: `#17171a` (--color-text)
- Secondary text: `#5a5f68` (--color-text-muted)
- Kickers, labels, metadata — passes AA on the canvas: `#6b7078` (--color-text-faint)
- Amber brand accent — buttons, active states, the mark: `#f0b429` (--color-accent)
- Amber deepened for text-sized links (AA on canvas): `#9a6a00` (--color-accent-deep)
- Dark fills for secondary CTAs and banners: `#17171a` (--color-ink)
- Hairline borders, 8% black: `#00000014` (--color-border)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- Dark canvas, near-black cool gray: `#131316` (--color-bg)
- Cards, panels, and the sidebar (dark): `#1b1b1f` (--color-surface)
- Inputs and inset wells (dark): `#232329` (--color-surface-2)
- Primary ink on dark: `#f5f5f6` (--color-text)
- Secondary text on dark (AA): `#b0b4bc` (--color-text-muted)
- Labels and metadata on dark (AA at 14px+): `#8f939c` (--color-text-faint)
- Amber holds its own on dark: `#f0b429` (--color-accent)
- Amber lightened for text-sized links on dark: `#f6cb63` (--color-accent-deep)
- Inverted fills for secondary CTAs: `#f5f5f6` (--color-ink)
- Hairlines, 9% white: `#ffffff17` (--color-border)

### Typography

- Display / headings: Inter (fallback: system-ui, sans-serif)
- Body: Inter (fallback: system-ui, sans-serif)
- Mono / data: IBM Plex Mono (fallback: Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.08, letter-spacing -0.02em
- Body: line-height 1.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 44, 64, 96 — Editorial breathing room between sections (44-96px), businesslike density inside cards (16-22px padding); uppercase letterspaced kickers introduce every section.
- Border radius: sm 8px, md 12px, pill 999px — Cards and code blocks at 8-12px; pills only for chips, badges, and counts.
- Border treatment: 1px solid #00000014 — Hairlines do all separation work; borders darken slightly (to ~20% black) on hover instead of adding shadows.

### Shadows

- card: `0 1px 2px rgba(0, 0, 0, 0.04)` — Resting cards — barely present
- float: `0 12px 32px rgba(0, 0, 0, 0.13)` — The single hero artifact (framed preview, modal)

### Layout

- Max content width: 1080px
- Centered 1080px container with 24px gutters
- Uppercase 11px letterspaced kickers above every section heading
- White cards on the gray canvas; one dark ink banner per page as the closing CTA
- Sticky translucent header with backdrop blur and a hairline bottom border

### Effects

- Sticky header: rgba(246,246,247,0.85) with backdrop-filter blur(10px)
- Hover lift on cards: translateY(-3px) with border darkening

### Motion

- Easing: ease; durations 150ms / 250ms / 450ms
- Hover transitions on transform and border-color only
- Content transitions (theme swaps, accordions) at 250-450ms ease
- No scroll-triggered entrance animations; the page is calm by default

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-2: #f2f2f4;
  --color-text: #17171a;
  --color-text-muted: #5a5f68;
  --color-text-faint: #6b7078;
  --color-accent: #f0b429;
  --color-accent-deep: #9a6a00;
  --color-ink: #17171a;
  --color-border: #00000014;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.13);
  --border-default: 1px solid #00000014;
  --font-display: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.08;
  --leading-body: 1.6;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Sticky translucent bar (blur 10px), 2x2 grid brand mark, wordmark at 15px/600, text links in muted gray, one ink-filled 8px-radius CTA
- **Hero:** Amber uppercase kicker, clamp() bold headline with -0.02em tracking, muted subhead, amber primary + white bordered secondary CTA pair
- **Card:** White fill, 1px hairline border, 10-12px radius, 16-22px padding; hover lifts 3px and darkens the border — no shadow change
- **Button (primary):** Amber fill, #3a2600 dark-amber text, 9px radius, 600 weight; ink-filled variant for headers
- **Button (secondary):** White fill, hairline border, ink text, same geometry as primary
- **Form fields:** surface-2 fill, hairline border, 8px radius; focus ring amber at 55% opacity, no border color change

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 quiet #f6f6f7 canvas with white hairline-bordered cards, where amber #f0b429 appears exactly once per view — on the mark, the active state, or the primary action. Spend boldness here; keep everything else quiet.

## Do

- Spend amber exactly once per view — everything else stays neutral
- Introduce every section with an uppercase letterspaced kicker
- Separate with hairlines and whitespace, never with shadows
- Use tabular numerals for counts and stats
- Keep both schemes token-identical except the ten color overrides — layout never changes with the theme

## Don't

- No gradients, glows, or colored shadows anywhere
- Don't use amber for body-copy links at small sizes — use accent-deep instead
- No more than one dark ink banner per page
- Don't let decorative color compete with the content being showcased

## Accessibility notes

- Every text role passes WCAG AA on its background: ink 16.2:1, muted 6.5:1, faint 4.9:1 on the canvas; the dark scheme's roles are tuned to the same standard
- Amber #f0b429 is never used as text — button labels are #3a2600 on amber (~8:1) and text links use accent-deep (#9a6a00 light / #f6cb63 dark, both AA)
- Focus states use a 2px amber ring at 55% opacity on every interactive element; hover states change border color and transform, never color alone

## Reference sites

- Claude Design Skills (this site): https://convoke.software
- Linear: https://linear.app
- Vercel: https://vercel.com

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

Install this skill

unzip amber-gallery.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/amber-gallery.json

Settings → Capabilities → Skills → Upload skill → amber-gallery.zip