Arcteryx
Ecosystem Index
Warm, muted earth tones and clean, spacious layouts foster a contemplative, curated feel.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Helvetica Neue | 32px | 500 | 1.4 | 0 | Aa Bb Cc |
| h2 | Helvetica Neue | 24px | 500 | 1.5 | 0 | Aa Bb Cc |
| h3 | Helvetica Neue | 12px | 400 | 1.67 | 0 | Aa Bb Cc |
| body | Helvetica Neue | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Helvetica Neue | 12px | 400 | 1.67 | 0 | Aa Bb Cc |
| button | Helvetica Neue | 14px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e4505b;
--color-surface: #14449c;
--color-ink: #dca1e6;
--color-accent: #a35e7a;
--color-detail: #cac59d;
}
/* CSS variables exposed by source */
:root {
--border-color-subtle: rgb(34 34 34 / 8%);
--primary-transparency-dark: rgb(34 34 34 / 8%);
--secondary-transparency-light: rgb(255 255 255 / 32%);
--primary-transparency-light: rgb(255 255 255 / 16%);
--border-color: rgb(34 34 34 / 32%);
--secondary-transparency-dark: rgb(34 34 34 / 16%);
--text-color-dark: #222;
--text-color-error: #e50a0a;
--border-color-strong: #222;
--transparency-light-16: rgb(255 255 255 / 16%);
--disabled-background-color: rgb(34 34 34 / 8%);
--transparency-50: rgb(34 34 34 / 50%);
--bc-font-weight-regular: 400;
--green200: #b3deb8;
--green300: #7cc285;
--bc-link-color: #222;
--mark-color: #222;
--blue100: #ecf3f4;
--transparency-32: rgb(34 34 34 / 32%);
--red600: #b60404;
--body-text-width: 700px;
--transparency-light-24: rgb(255 255 255 / 24%);
--transparency-dark-32: rgb(34 34 34 / 32%);
--header-height: 53px;
--gray600: #333;
--artist-blue: #0687f5;
--bc-line-height-700: 1.4em;
--transparency-light-32: rgb(255 255 255 / 32%);
--bc-font-size-500: 1.5rem;
--transparency-dark-8: rgb(34 34 34 / 8%);
--blue500: #007c9e;
--yellow500: #ffba00;
--page-text-color-secondary: rgb(34 34 34 / 72%);
--transparency-dark-72: rgb(34 34 34 / 72%);
--white: #fff;
--transparency-24: rgb(34 34 34 / 24%);
--bc-font-size-300: 1rem;
--elevated-background-color-1: #fff;
--gray100: #f8f8f8;
--bc-font-size-800: 2.5rem;
--gray300: #aaa;
--green600: #1f672a;
--elevated-background-color-4: #fff;
--menubar-search-input-background-color: rgb(34 34 34 / 8%);
--parchment200: #ede3c2;
--parchment500: #ddae4d;
--default-background-color: #fff;
--green500: #2a8737;
--gray700: #222;
--red300: #fc675e;
--disabled-text-color: #767676;
--transparency-8: rgb(34 34 34 / 8%);
--bc-font-size-100: .75rem;
--bc-line-height-400: 1.6em;
--red200: #ffa89c;
--disabled-graphical-color: #949494;
--mark-background-color: #fce097;
--bc-font-weight-medium: 500;
--elevated-background-color-3: #fff;
--bc-line-height-800: 1.3em;
}Drop-in prompt
Build a landing page in the visual style of Bandcamp.
Reference design system (extracted from the live site):
- Palette: #e4505b, #14449c, #dca1e6, #a35e7a, #cac59d
- Typefaces: Helvetica Neue
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bandcamp-com