Atlassian
Ecosystem Index
Cool, technical expanse - crisp sans serif geometry on muted, atmospheric blues and grays.




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 | elan-itc-pro | 32px | 400 | 1 | 0 | Aa Bb Cc |
| h2 | elan-itc-pro | 32px | 400 | 1 | 0.32px | Aa Bb Cc |
| h3 | helvetica-now-display | 28px | 400 | 1.35 | 0 | Aa Bb Cc |
| body | helvetica-now-display | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | helvetica-now-display | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #34648c;
--color-surface: #042c64;
--color-ink: #9ebfdb;
--color-accent: #547b93;
--color-detail: #9cb4c4;
}
/* CSS variables exposed by source */
:root {
--font-elan: "elan-itc-pro",sans-serif;
--font-helvetica: "helvetica-now-display",sans-serif;
--space-purple: 3rem;
--colour-grey-medium: #666;
--space-m: 2rem;
--space-xl: 6rem;
--font-urw: "helvetica-now-display",sans-serif;
--colour-black-gradient: #646464;
--colour-grey-pinline: #ccc;
--space-xxl: 10rem;
--background-yellow: #f8f2d5;
--colour-green-1: #dff0d8;
--colour-blue-1: #e3edf2;
--colour-blue-3: #31668f;
--colour-red-3: #900;
--background-blue: #e3edf2;
--space-pink: 6rem;
--background-green: #dff0d8;
--colour-grey-dark: #333;
--background-red: #fbebeb;
--colour-copy: #1a1a1a;
--colour-grey-background: #e9e9e9;
--colour-grey-medium-accessible: #767676;
--space-l: 3rem;
--colour-grey-inactive: #b2b2b2;
--colour-green-3: #273;
--space-green: 2rem;
--background-grey: #e9e9e9;
--space-red: 10rem;
--colour-green-2: #5aab6a;
--colour-yellow-1: #f8f2d5;
--space-orange: .5rem;
--background-gradient: #646464;
--space-xs: 0.5rem;
--space-s: 1rem;
--colour-white: #fff;
--colour-yellow-2: #ab934f;
--colour-red-1: #fbebeb;
--colour-black: #1a1a1a;
--colour-yellow-3: #785e1c;
--colour-red-2: #c86464;
--colour-grey-item-background: #fafafa;
--space-blue: 1rem;
--colour-blue-2: #5b9dd9;
--aa-font-weight-bold: 700;
--aa-font-size: calc(16 * 1px);
--aa-base-z-index: 9999;
--product-tile-4-col: 25%;
--aa-panel-border-color-alpha: 0.3;
--aa-font-weight-medium: 500;
--aa-description-highlight-background-color-alpha: 0.5;
--aa-scrollbar-track-background-color-rgb: 234, 234, 234;
--breakpoint-xl: 1200px;
--body2-font-style: italic;
--body3-line-height: 1.5;
--aa-scrollbar-width: 13px;
--aa-input-icon-size: 20px;
--body1-letter-spacing: 0.02rem;
--aa-background-color-alpha: 1;
--body4-font-weight: 400;
}Drop-in prompt
Build a landing page in the visual style of Arcteryx.
Reference design system (extracted from the live site):
- Palette: #34648c, #042c64, #9ebfdb, #547b93, #9cb4c4
- Typefaces: elan-itc-pro, helvetica-now-display, Arial
- 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/arcteryx-com