№ atlassian-design

Atlassian

Soft, cool technicality—minimalist space with gentle gradients and clean sans-serifs.

Ecosystem Indexminimalism editorial swiss developer toolslight

The page uses a clean, spacious layout with ample negative space. Typography is a mix of bold and lighter weights, creating a clear hierarchy. The color palette is restrained, relying on muted tones and a pop of bright blue to highlight key phrases. · design system, atlassian design, teamwork design, minimalist design, editorial design, saas design, developer tools, design agency

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · pastel

SwatchHexOKLCHSuggested roleCopy

Hex#1c6cdc
OKLCHoklch(55.0% 0.187 258)
RoleDominant
find sites →
Hex#7c44a0
OKLCHoklch(49.6% 0.149 310)
RoleSurface
find sites →
Hex#cc7cf4
OKLCHoklch(71.8% 0.184 313)
RoleInk
find sites →
Hex#9f9874
OKLCHoklch(67.6% 0.051 98)
RoleAccent
find sites →
Hex#cec9ac
OKLCHoklch(83.2% 0.040 99)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Atlassian Sans	112px	700	1.04	Aa Bb Cc
h2	Atlassian Sans	68px	700	1.06	Aa Bb Cc
h3	Atlassian Sans	44px	700	1.09	Aa Bb Cc
body	Atlassian Sans	14px	400	1.43	Aa Bb Cc
button	Atlassian Sans	14px	500	1.43	Aa Bb Cc

Spacing scale

24px

32px

80px

Radius scale

6px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #1c6cdc;
  --color-surface: #7c44a0;
  --color-ink: #cc7cf4;
  --color-accent: #9f9874;
  --color-detail: #cec9ac;
}

/* CSS variables exposed by source */
:root {
  --ds-background-brand-subtlest-hovered: #CFE1FD;
  --ds-background-accent-gray-bolder-hovered: #505258;
  --ad-color-brand-saffron: #FCA700;
  --ds-background-input-pressed: #FFFFFF;
  --ds-chart-information-hovered: #1868DB;
  --ds-background-accent-lime-subtle-pressed: #BDE97C;
  --ds-border-danger-subtle: #FD9891;
  --ds-background-success-bold-pressed: #3F5224;
  --ds-font-weight-semibold: 600;
  --ds-space-negative-150: -0.75rem;
  --ds-border-accent-green: #22A06B;
  --ds-icon-brand: #1868DB;
  --ds-icon-subtle: #505258;
  --ds-surface-hovered: #F0F1F2;
  --motion-ease-spring: cubic-bezier(
					0.34,
					1.56,
					0.64,
					1
				);
  --nav-backdrop-color: rgba(255, 255, 255, 0.85);
  --ds-chart-discovery: #BF63F3;
  --ds-radius-large: 0.5rem;
  --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100 backwards, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100 backwards;
  --ds-keyframe-slide-out-top-short: SlideOutTop8px;
  --ds-shadow-overflow-spread: #1E1F2129;
  --ds-background-accent-lime-subtle: #94C748;
  --ds-space-250: 1.25rem;
  --ds-border-information: #357DE8;
  --ds-shadow-overflow: 0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F;
  --ds-chart-categorical-7-hovered: #2898BD;
  --ds-link-pressed: #1558BC;
  --ds-font-metric-small: normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
  --ds-background-warning-subtle: #FBD779;
  --motion-duration-dramatic: 800ms;
  --ds-background-danger-subtler-pressed: #FD9891;
  --ds-icon-discovery: #AF59E1;
  --ds-text-warning: #9E4C00;
  --ds-icon-warning-inverse: #292A2E;
  --ds-interaction-hovered: #00000029;
  --ds-keyframe-slide-in-top-short: SlideInTop8px;
  --ds-border-accent-purple-subtle: #D8A0F7;
  --ds-chart-blue-boldest-hovered: #123263;
  --ds-text-accent-magenta-bolder: #50253F;
  --ds-text-danger: #AE2E24;
  --ds-icon-disabled: #080F214A;
  --ds-background-accent-blue-subtler-hovered: #ADCBFB;
  --ds-background-accent-red-subtler-pressed: #FD9891;
  --ds-background-discovery: #F8EEFE;
  --ds-background-accent-teal-subtlest-hovered: #C6EDFB;
  --ds-background-accent-teal-subtler-hovered: #B1E4F7;
  --ds-blanket-selected: #388BFF14;
  --ds-font-heading-xxlarge: normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
  --ds-background-brand-subtlest-pressed: #ADCBFB;
  --ds-chart-gray-boldest-hovered: #3B3D42;
  --ds-background-brand-boldest: #1C2B42;
  --ds-background-accent-magenta-subtle-pressed: #FCB6E1;
  --ds-chart-success-bold: #5B7F24;
  --ds-chart-blue-boldest: #1558BC;
  --ds-background-accent-teal-bolder-hovered: #206A83;
  --ds-space-050: 0.25rem;
  --ds-background-discovery-subtler-pressed: #D8A0F7;
  --ds-background-warning-bold-pressed: #F68909;
  --ds-background-accent-blue-subtlest-hovered: #CFE1FD;
  --ds-chart-magenta-bolder-hovered: #AE4787;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Atlassian.
Reference design system (extracted from the live site):
- Palette: #1c6cdc, #7c44a0, #cc7cf4, #9f9874, #cec9ac
- Typefaces: Atlassian Sans
- 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/atlassian-design

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Atlassian Sans

112px

700

1.04

Aa Bb Cc

Atlassian Sans

68px

700

1.06

Aa Bb Cc

Atlassian Sans

44px

700

1.09

Aa Bb Cc

body

Atlassian Sans

14px

400

1.43

Aa Bb Cc

button

Atlassian Sans

14px

500

1.43

Aa Bb Cc

:root { --color-dominant: #1c6cdc; --color-surface: #7c44a0; --color-ink: #cc7cf4; --color-accent: #9f9874; --color-detail: #cec9ac; } /* CSS variables exposed by source */ :root { --ds-background-brand-subtlest-hovered: #CFE1FD; --ds-background-accent-gray-bolder-hovered: #505258; --ad-color-brand-saffron: #FCA700; --ds-background-input-pressed: #FFFFFF; --ds-chart-information-hovered: #1868DB; --ds-background-accent-lime-subtle-pressed: #BDE97C; --ds-border-danger-subtle: #FD9891; --ds-background-success-bold-pressed: #3F5224; --ds-font-weight-semibold: 600; --ds-space-negative-150: -0.75rem; --ds-border-accent-green: #22A06B; --ds-icon-brand: #1868DB; --ds-icon-subtle: #505258; --ds-surface-hovered: #F0F1F2; --motion-ease-spring: cubic-bezier( 0.34, 1.56, 0.64, 1 ); --nav-backdrop-color: rgba(255, 255, 255, 0.85); --ds-chart-discovery: #BF63F3; --ds-radius-large: 0.5rem; --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95to100 backwards, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn0to100 backwards; --ds-keyframe-slide-out-top-short: SlideOutTop8px; --ds-shadow-overflow-spread: #1E1F2129; --ds-background-accent-lime-subtle: #94C748; --ds-space-250: 1.25rem; --ds-border-information: #357DE8; --ds-shadow-overflow: 0px 0px 8px #1E1F2129, 0px 0px 1px #1E1F211F; --ds-chart-categorical-7-hovered: #2898BD; --ds-link-pressed: #1558BC; --ds-font-metric-small: normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; --ds-background-warning-subtle: #FBD779; --motion-duration-dramatic: 800ms; --ds-background-danger-subtler-pressed: #FD9891; --ds-icon-discovery: #AF59E1; --ds-text-warning: #9E4C00; --ds-icon-warning-inverse: #292A2E; --ds-interaction-hovered: #00000029; --ds-keyframe-slide-in-top-short: SlideInTop8px; --ds-border-accent-purple-subtle: #D8A0F7; --ds-chart-blue-boldest-hovered: #123263; --ds-text-accent-magenta-bolder: #50253F; --ds-text-danger: #AE2E24; --ds-icon-disabled: #080F214A; --ds-background-accent-blue-subtler-hovered: #ADCBFB; --ds-background-accent-red-subtler-pressed: #FD9891; --ds-background-discovery: #F8EEFE; --ds-background-accent-teal-subtlest-hovered: #C6EDFB; --ds-background-accent-teal-subtler-hovered: #B1E4F7; --ds-blanket-selected: #388BFF14; --ds-font-heading-xxlarge: normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif; --ds-background-brand-subtlest-pressed: #ADCBFB; --ds-chart-gray-boldest-hovered: #3B3D42; --ds-background-brand-boldest: #1C2B42; --ds-background-accent-magenta-subtle-pressed: #FCB6E1; --ds-chart-success-bold: #5B7F24; --ds-chart-blue-boldest: #1558BC; --ds-background-accent-teal-bolder-hovered: #206A83; --ds-space-050: 0.25rem; --ds-background-discovery-subtler-pressed: #D8A0F7; --ds-background-warning-bold-pressed: #F68909; --ds-background-accent-blue-subtlest-hovered: #CFE1FD; --ds-chart-magenta-bolder-hovered: #AE4787; }

Build a landing page in the visual style of Atlassian. Reference design system (extracted from the live site): - Palette: #1c6cdc, #7c44a0, #cc7cf4, #9f9874, #cec9ac - Typefaces: Atlassian Sans - 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/atlassian-design