Bulma Design System

# Bulma — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-docs
confidence: high
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/bulma
sources:
  - https://bulma.io/
  - https://bulma.io/documentation/customize/list-of-sass-variables/
  - https://github.com/jgthms/bulma
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Bulma Team. "Bulma" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Bulma
**Owner:** Bulma Team
**Official documentation:** https://bulma.io/
**Visual character:** Flexbox-era cheer: a turquoise flag color, chunky readable modifiers, and zero JavaScript opinions.

---

## Summary

A free, open source CSS framework based on Flexbox.

_Editorial confidence: high. Values are drawn from well-documented public token references. Field-level evidence: 0/67 claims source-linked, 0/67 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=bulma)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Primary / Turquoise | `#00d1b2` | `--bulma-primary` | Primary actions |
| Link | `#485fc7` | `--bulma-link` | Links |
| Info | `#3e8ed0` | `--bulma-info` | Informational |
| Success | `#48c78e` | `--bulma-success` | Success |
| Warning | `#ffe08a` | `--bulma-warning` | Warnings |
| Danger | `#f14668` | `--bulma-danger` | Errors |
| Text | `#4a4a4a` | `--bulma-text` | Body text |
| White | `#ffffff` | `--bulma-white` | Surfaces |

## Typography

- **Body:** System stack — weights 400, 600, 700 — `BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| size-1 | `48px` | — |
| size-2 | `40px` | — |
| size-3 | `32px` | — |
| size-4 | `24px` | — |
| size-5 | `20px` | — |
| size-6 (body) | `16px` | `24px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| default | `4px` |
| large | `6px` |
| rounded | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 0.5em 1em -0.125em rgba(10,10,10,0.1), 0 0px 0 1px rgba(10,10,10,0.02)` |

## Quick start (CSS)

```css
/* Bulma — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://bulma.io/
   Field evidence: https://www.designsystems.one/api/style-spec?system=bulma */

:root {
  /* Color */
  --bulma-primary: #00d1b2; /* Primary actions */
  --bulma-link: #485fc7; /* Links */
  --bulma-info: #3e8ed0; /* Informational */
  --bulma-success: #48c78e; /* Success */
  --bulma-warning: #ffe08a; /* Warnings */
  --bulma-danger: #f14668; /* Errors */
  --bulma-text: #4a4a4a; /* Body text */
  --bulma-white: #ffffff; /* Surfaces */

  /* Typography */
  --font-body: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale */
  --text-size-1: 48px;
  --text-size-2: 40px;
  --text-size-3: 32px;
  --text-size-4: 24px;
  --text-size-5: 20px;
  --text-size-6-body-: 16px; /* line-height 24px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 48px;

  /* Radius */
  --radius-small: 2px;
  --radius-default: 4px;
  --radius-large: 6px;
  --radius-rounded: 9999px;

  /* Elevation */
  --shadow-card: 0 0.5em 1em -0.125em rgba(10,10,10,0.1), 0 0px 0 1px rgba(10,10,10,0.02);
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Bulma by Bulma Team — A free, open source CSS framework based on Flexbox. Character: Flexbox-era cheer: a turquoise flag color, chunky readable modifiers, and zero JavaScript opinions. Use a primary colour near #00d1b2, the typeface "System stack" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Bulma documentation](https://bulma.io/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/bulma) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._