Bitbucket Design System

Overview

Bitbucket's marketing site operates within the Atlassian Design System, which both constrains and clarifies its choices. Enterprise Cobalt, Atlassian Ground. The deep navy ink (#091e42) that dominates body copy is not a conventional near-black — it is the founding Atlassian blue, the color the company chose in 2002 and has kept through every brand evolution. Against GitHub's charcoal dark mode and GitLab's purple-to-orange gradient marketing, Bitbucket presents a white canvas with navy text and a single cobalt pill CTA. The only dramatic typographic move is the hero h1 at 48px / weight 700 in Charlie Display — heavier than any other Atlassian product's marketing headline by at least one weight step.

The system builds on ADS CSS custom properties (--ds-*) for every structural token, which means developers familiar with Jira or Confluence component libraries can map every Bitbucket token to an already-known ADS variable. The radius system is binary with a deliberate purpose split: 40px pill on the primary CTA, 3px on every other surface. There is no mid-range rounding at 8-16px.

Key Characteristics:

• Deep navy #091e42 (404 appearances) as the dominant body ink — a distinctly blue-shifted alternative to near-black that carries Atlassian's founding brand color into every paragraph.
• Hero h1 at 48px / weight 700 in Charlie Display — the heaviest display weight in the Atlassian marketing family.
• Primary button at 40px full-pill radius filled with cobalt blue #1868db — the roundest CTA in the dev-tools comparison set (vs. Render's 0px and Heroku's 4px).
• Universal 3px rounding on all non-button components — near-flat without committing to the sharp-edge aesthetic.
• Two Charlie family typefaces: Charlie Display for headings (weight 600-700) and Charlie Text for body (weight 400-600).
• ADS token backbone: --ds-surface, --ds-text, --ds-background-brand-bold, --ds-border power every structural component.
• White canvas throughout — no dark hero section, no gradient bands, no tinted surface panels.

Colors

Brand

• Cobalt Blue ({colors.primary} — #0052cc): frequency 38. Used as text (18), bg (1), border (19). Atlassian's anchor blue — the themeColor and the structural interactive reference. Wired directly at this hex.
• Cobalt Interactive ({colors.primary-interactive} — #1868db): frequency 2. Used as bg (2). The active-state / brand-bold fill for buttons and selected states, wired as --ds-background-brand-bold and --ds-icon-brand.

Ink & Surface

• Ink ({colors.ink} — #091e42): frequency 404. Used as text (202), border (202). The dominant body and heading text color — Atlassian's founding deep navy. Unmistakably blue when isolated; reads as near-black in long-form text blocks.
• Ink Medium ({colors.ink-medium} — #42526e): frequency 130. Used as text (65), bg (2), border (63). Secondary text color for input placeholders, sub-labels, and muted body copy.
• Ink Dark ({colors.ink-dark} — #253858): frequency 44. Used as text (22), border (22). Tertiary ink for dense-content contexts like footer links and supplementary nav.
• Ink Near-Black ({colors.ink-near-black} — #1f1f21): frequency 16. Used as text (8), border (8). The hero heading color — closest to absolute black in the system, wired as --ds-text-accent-gray-bolder and --ds-shadow tokens.
• Canvas ({colors.canvas} — #ffffff): frequency 47. Used as text (17), bg (14), border (16). Page floor and input background; wired as --ds-surface, --ds-surface-overlay, --ds-background-input.
• Surface 1 ({colors.surface-1} — #f4f5f7): frequency 4. Used as bg (4). Light gray-blue surface for hover states and alternating content panels; wired as --ds-surface-hovered and --ds-background-selected.

Hairlines & Structure

• Hairline ({colors.hairline} — #101214): frequency 46. Used as text (23), border (23). Near-black used for structural borders (card edges, nav dividers); wired as --ds-border, --ds-background-neutral-hovered.
• Black ({colors.black} — #000000): frequency 9. Used as text (2), border (2), shadow (5). True black reserved for shadows and absolute-contrast overlays; wired as --ds-interaction-hovered and --ds-blanket.

Typography

Font Families

The system runs Charlie Display for every heading level (h1 through h4) and Charlie Text for every body paragraph, label, button, nav link, and input. Both are Atlassian custom fonts. Charlie Display has a characteristic 0.3px letter-spacing at heading sizes that adds barely perceptible openness; Charlie Text is a neutral humanist sans at the body scale.

Hierarchy

Principles

The hero h1 at 48px / 700 stands out as the page's single heavy-weight typographic statement — the rest of the hierarchy descends quickly to 600 (headings) and 400 (body). Charlie Text at 16px / 500 for the button label is a deliberate choice; most ADS surfaces use 400-weight text for buttons but the CTA merits a half-step emphasis. The Charlie Display lead paragraph at 20px / 400 creates a bridge between heading and body scale without requiring a separate heading family entry.

Note on Font Substitutes

Both Charlie Display and Charlie Text are Atlassian proprietary fonts. Plus Jakarta Sans at the same weights and with 0.3px tracking at heading sizes is the closest open-source substitute for Charlie Display. Inter at weight 400-500 approximates Charlie Text for body and label copy. The most important property to preserve is the 700-weight for the hero h1 — the Atlassian family convention runs 600 at sub-section headings, making the 700 hero headline the distinctive signal.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.base} 32px · {spacing.lg} 96px.
• Section rhythm: 96px vertical padding at major section breaks (extracted as "96px 0px" at 4 counts).
• Card internal padding: 16px for standard content cards.
• Button padding: 10px × 24px — the most compact button in the comparison set at 40px total height.

Grid & Container

• Hero: full-width white canvas with the heading, sub-paragraph, and pill CTA.
• Feature sections: alternating light and dark bands — some sections run on a dark navy or cobalt background (captured in the h2 extraction showing white text on a dark surface).
• Card grid: 3-4 column feature cards at desktop with 16-24px internal padding.
• Container width: ~768px for the hero heading block; wider for full-page grids.

Rhythm

The white canvas holds through most of the page; alternating sections shift to dark navy or cobalt fills for contrast, particularly when featuring AI or CI/CD marketing content (the h2 "AI that provides context to code" renders white on a dark section). The spacing rhythm is 8px-base with 96px section gaps — tighter than Render (which uses 90px) but consistent with ADS grid standards.

Elevation

Bitbucket uses a minimal shadow system consistent with ADS. The ADS shadow tokens (--ds-shadow-overflow-spread, --ds-shadow-overflow-perimeter) appear in the CSS variable extraction but resolve to near-black (#1f1f21) — these are overflow-shadow values for modals and dropdowns rather than card shadows. On the main marketing surface, elevation reads through:

• Surface color: {colors.surface-1} (#f4f5f7) cards sitting on the white canvas create a subtle tonal lift.
• Hairline border: 1px {colors.hairline} (#101214 at low opacity in ADS contexts) marks card and input edges.
• True shadow: Pure black at 5 shadow-count uses indicates dropdowns and overlay components have actual shadows, though these are not captured in the primary marketing surface.

Shapes

The radius scale is binary with purpose:

• {rounded.none} 0px — structural separators and full-bleed sections.
• {rounded.sm} 3px — universal component radius: cards, inputs, chips, form elements. The most-used radius in the system (11 counts).
• {rounded.lg} 5px — occasional variant for secondary elements.
• {rounded.pill} 40px — primary and secondary CTA buttons only. Renders as a full semicircle on 40px-height elements.

The intent is clear: the pill CTA draws attention because it is the only round element on a page of near-flat 3px surfaces. The shape hierarchy communicates information architecture — round means "action," flat means "content."

Components

button-primary — Cobalt interactive fill ({colors.primary-interactive}), white text, {typography.button-md} (16px / 500), 40px pill radius, 10×24 padding, 40px height. "Get it Free" is the canonical hero CTA.

button-secondary — Transparent fill, cobalt-primary text and border, same typography and sizing, pill radius. Used alongside the primary in dual-CTA moments.

top-nav — White canvas background, 68px height, 16px horizontal padding. Contains the Bitbucket wordmark, Atlassian product nav, and right-aligned "Get it Free" CTA cluster.

nav-link — Transparent background, cobalt-primary text, {typography.nav-link} (16px / 400), inline padding. Nav links render in brand cobalt rather than ink, making navigation visually distinct from body text.

hero-heading — Near-black text ({colors.ink-near-black}), {typography.display-xl} (48px / 700). The hero headline "Code and CI/CD, powered by AI and the Atlassian platform" at maximum weight.

section-heading — White text on dark backgrounds, {typography.display-lg} (36px / 700). Used on sections with navy or cobalt fill.

card-heading — Deep-navy text ({colors.ink}), {typography.heading-md} (24px / 600 / 0.3px tracking). Feature card headings across the white-canvas body.

body-paragraph — Default ink text at {typography.body-md} (16px / 400). Body copy runs in deep navy rather than near-black — the most distinctive reading-comfort choice in the system.

body-paragraph-lead — Deep-navy ink, {typography.body-lg} (20px / 400 / Charlie Display). Used for section lead paragraphs that need more visual weight than body-md.

label-tag — No background, ink text, {typography.label-md} (12px / 400 / uppercase / 1px tracking). Small category chips above headings.

card — White canvas, deep-navy ink, {typography.body-md}, 3px radius, 16px padding, near-black hairline border. The standard content card across the body.

surface-card — Light surface fill ({colors.surface-1}), deep-navy ink, 3px radius, 16px padding. Used on hover and in alternating panel variants.

text-input — White canvas fill, medium-ink text ({colors.ink-medium}) for placeholder, 3px radius, 0×12px padding, 40px height. The email input in the newsletter/sign-up section. Border at #c1c7d0 (a light blue-gray from ADS).

footer — White canvas, deep-navy ink, {typography.body-md}, 96px vertical padding. Bitbucket's footer stays on the white canvas, unlike Heroku which returns to the dark canvas.

Do's and Don'ts

Do use deep navy (#091e42) as the primary body text color. The navy ink is Atlassian's most distinctive typographic move and the element that most differentiates Bitbucket from competitors. Switching to a standard near-black loses the brand signal and makes the page indistinguishable from GitHub-derived layouts.

Do keep the hero h1 at weight 700 in Charlie Display. The 700-weight at 48px is the heaviest moment in the Atlassian marketing family; it is how Bitbucket signals competitive urgency within a product family that otherwise uses measured 600 or lower display weights.

Do use the 40px pill radius exclusively on interactive CTA buttons. The pill is the shape signal for action in this system; applying it to cards or input fields would dilute the button hierarchy.

Do map token references to ADS CSS custom properties when building in an Atlassian environment. The --ds-* variable names captured in this extraction resolve to the same hex values in any project running @atlaskit packages — you can reference them directly instead of hardcoding hex values.

Don't use the cobalt-interactive color (#1868db) for decorative elements or text links. It is reserved for button fills and ADS brand-bold states; using it for inline links or icons competes with the CTA hierarchy.

Don't introduce a mid-range radius (8-12px) between 3px and 40px. The binary radius system is the shape language. A 12px card would look neither enterprise-flat nor action-pill — it would read as an unresolved third tier.

Don't render the hero h1 in deep navy (#091e42) instead of near-black (#1f1f21). The extraction shows the hero heading uses the near-black tone (wired as --ds-text-accent-gray-bolder) while body paragraphs use the deep navy. The two-ink system is intentional: maximum contrast at display scale, brand-blue warmth at reading scale.

Don't substitute Charlie Display with a weight-400 open-source font for the hero heading. The 700-weight at 48px is the system's loudest moment; a lighter-weight substitute (even at 700) with different proportions will misrepresent the visual authority of the hero section.

Known Gaps

• Hover and focus states: the extraction captures CTA buttons and inputs at rest only; ADS focus rings (a 2px cobalt outline at --ds-border-focused) are not reflected in the component definitions.
• Dark section palette: some page sections run on dark navy or cobalt fills — the full token set for those dark bands (heading color, body color, card surface) is partially captured but not fully documented.
• Mobile breakpoints: the 48px hero heading was captured at desktop width; ADS responsive typography scales would reduce this at tablet and mobile.
• Authentication flow: Bitbucket's sign-in and sign-up pages live in an Atlassian account system with a different layout; those tokens are not represented here.
• Pipeline and repository views: the core product — the branch browser, pull request UI, pipeline logs — uses a much richer ADS token set that is not exposed in the marketing surface.
• Animation: micro-interactions (button hover pulse, page scroll transitions) are not captured in this static extraction.
• Icon system: Atlassian uses a custom icon library (@atlaskit/icon) throughout the product but icons are not part of the marketing page token extraction.