Bulma is a modern, pure-CSS framework that needs no JavaScript at all: a Flexbox-first .columns grid, turquoise (#00D1B2) brand color over #363636 text, 6px radii, and friendly component classes — .button, .box, .card, .navbar — that keep pages approachable. Made for content sites, marketing pages, and projects that would rather skip JS dependencies.
BulmaFramework
Prompt Template
Base Template
Design a Bulma-inspired interface. - Pure CSS framework — no JavaScript required; - #00D1B2 turquoise over white with #363636 text; - 6px radii, .button/.box/.card/.navbar component classes; - Flexbox-first .columns grid with simple spacing helpers; - Friendly, approachable marketing and content sites. Colors: #00D1B2, #FFFFFF, #F5F5F5, #363636 with #00D1B2 accent. Typography: system-ui.
Variant Prompts
📱 Mobile
Design a mobile app with Bulma aesthetics. Use Bulma color identity with #00D1B2 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Bulma style. Use Bulma color identity with #00D1B2 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Bulma design language. Use Bulma color identity with #00D1B2 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Bulma visual identity. Use Bulma color identity with #00D1B2 accents. Compelling, conversion-focused.
Usage Examples
Bulma Marketing Site
LandingBuild a marketing site with Bulma style: hero banner, feature columns, and card grids with #00D1B2 accents.
Bulma Content Blog
WebCreate a content blog with Bulma design language: navbar, article cards, and clean typography-first pages.
✅ Best For
- CSS-only projects
- Content sites
- Static pages
❌ Avoid For
- Apps needing complex JS interactions
- Deeply customized design systems
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.