What is Bitbucket's primary brand color?

Bitbucket's themeColor is Atlassian cobalt blue #0052cc — the same anchor blue used across Jira and the wider Atlassian platform. However the primary CTA button renders at #1868db (wired as --ds-chart-information-hovered, --ds-background-brand-bold, --ds-icon-brand, --ds-text-selected) — a slightly brighter cobalt used for interactive fills. The dominant ink color is deep navy #091e42 at 404 appearances, which is not a brand color in the traditional sense but functions as Bitbucket's most distinctive visual element. The structural surface of #0052cc (38 appearances as text and border) is the true brand signal; #1868db is the interactive-fill variant.

What typefaces does Bitbucket use, and what are good substitutes?

Bitbucket runs two Atlassian-custom typefaces: Charlie Display for all heading levels and Charlie Text for all body copy, labels, buttons, and nav links. Charlie Display appears in headings from 24px / 600 (h3 cards) through 48px / 700 (hero h1), with a characteristic 0.3px letter-spacing at the heading tier. Charlie Text handles everything else at 14-16px in weights 400, 500, and 600. A Charlie Display variant at 12px / 400 with 1px letter-spacing and uppercase transform appears for small category labels. For substitutes: Inter or Plus Jakarta Sans at the same weights and with 0.3px tracking at heading sizes approximates Charlie Display reasonably well. The key property to preserve is the 700-weight for the hero h1 — dropping to 600 loses the signal that distinguishes Bitbucket from its Atlassian siblings.

How does Bitbucket relate to the Atlassian Design System (ADS)?

Bitbucket's marketing site is built on ADS CSS custom properties — the extraction surfaces `--ds-*` variable names on virtually every color token. Key mappings: primary button background is `--ds-background-brand-bold`, body text is `--ds-text` (deep navy #091e42), input background is `--ds-background-input` (white #ffffff), border color is `--ds-border` (near-black #101214). The `--ds-surface`, `--ds-surface-raised`, and `--ds-surface-overlay` tokens all resolve to the white surface family. This means a developer familiar with the Atlassian Design System can map nearly every Bitbucket token to an ADS variable — the DESIGN.md just surfaces the resolved hex values for tools that don't have ADS installed.

What corner-radius approach does Bitbucket use?

Bitbucket's radius system is binary with a clear purpose split: 40px pill radius on the primary CTA button, and 3px everywhere else (cards, inputs, small chips). The 40px pill at 40px element height renders as a full semicircle — a visual choice that makes the primary CTA the only round element on the page. The 3px radius on all other surfaces is close to square but not sharp enough to feel aggressive. There is no 8px, 12px, or 16px mid-tier. The contrast between the full-pill CTA and the near-flat cards creates a clear interaction hierarchy by shape alone — the pill says 'press me', the flat cards say 'read me.'

Can I use this DESIGN.md to build an enterprise dev-tools marketing site?

Yes — feed this file into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Bitbucket's specific moves: deep navy (#091e42) as the dominant body ink instead of near-black, Charlie Display equivalent (Plus Jakarta Sans or Inter at weight 700) for the 48px hero heading, mid-cobalt pill CTA at 40px height, Charlie Text equivalent at 16px / 400 for body copy, and the binary 3px / pill radius split. The ADS-derived token structure also means you can reference `--ds-*` variable names directly if building with Atlassian component libraries. The enterprise-legible pattern worth borrowing is the deep-navy ink — it creates a blue-shifted gravitas that distinguishes the page from pure-black ink without using a colored canvas.

Bitbucket Design System

Bitbucket's marketing-site design system built on Atlassian Design System: Charlie Display at 48px / weight 700, Charlie Text body, cobalt blue CTA, deep navy ink on white.

About Bitbucket DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source bitbucket.org

Developer Tools & IDEs
Web Infrastructure & Hosting

Bitbucket's marketing site announces itself with a contradiction: the heaviest headline weight in a product family known for measured, enterprise-calm typography. The hero heading — "Code and CI/CD, powered by AI and the Atlassian platform" — runs Charlie Display at 48px / weight 700, a striking departure from Jira's 600-weight and Confluence's 400-weight display treatments. Below that headline everything returns to Atlassian's characteristically controlled palette: deep navy ink (#091e42) on white, a mid-cobalt primary button in a 40px pill, 3px card rounding, and Charlie Text for body copy. Where GitHub signals developer identity through darkness and GitHub Sans, and where GitLab reaches for orange-to-purple gradients, Bitbucket presents the most enterprise-legible surface in the Git-hosting category.

The system runs on Atlassian Design System (ADS) CSS custom properties — every token resolves through the `--ds-*` variable family that powers Jira, Confluence, and Trello. The primary button maps to `--ds-background-brand-bold` (captured as #1868db, a cobalt shifted slightly blue from the themeColor #0052cc). Navigation uses `--ds-text` resolved through the Charlie Text family. The extraction surfaces 12 meaningful structural colors from a page that exposed the full ADS token tree. Radius uses only two values with any real frequency: 40px pill on the CTA button and 3px on cards and inputs — there is no mid-range 8-16px tier.

Feed this file to an AI coding tool and it will reproduce Bitbucket's specific moves: deep-navy ink instead of near-black, weight-700 Charlie Display at hero scale, mid-cobalt pill CTA, ADS-standard card rounding at 3px, and Charlie Text body at 16px / 400. The Atlassian-specific pattern worth understanding is the separation between the hero ink color (#1f1f21 — a near-black close to absolute black) and the body ink (#091e42 — deep navy). The hero headline renders on a light canvas in near-black text, while body paragraphs use the navy blue ink — two distinct ink tones that most tools would collapse into one.

What makes it distinct

Atlassian Design System foundationevery structural token maps to an ADS CSS custom property (--ds-*), making this the most component-system-backed brand in the developer-tools category
Charlie Display at weight 700Bitbucket runs the heaviest display weight in the Atlassian product family; 48px / 700 for the hero h1 vs the 400-600 weights used across Jira and Confluence marketing
Deep navy as dominant ink#091e42 (402 appearances) functions as the primary text color rather than the near-black standard; this is Atlassian's signature dark-blue ink inherited from the founding brand palette
40px pill CTAthe primary button uses a 40px border radius (full pill at 40px height), contrasting with Heroku's 4px or Render's 0px CTA — the roundest button in the dev-tools comparison set
3px universal radiusbeyond the pill CTA, every component (cards, inputs, chips) uses 3px — the second-flattest rounding in the cloud-hosting category

Live at bitbucket.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

bitbucket.org

Explore Bitbucket

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Bitbucket design system FAQ

Common questions about Bitbucket's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Bitbucket — official site

Bitbucket's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.