Welcome to Gutenberg

A semantic-first rendering system

Explore

Modern Design at Scale

Build hundreds of variations from one spec

Get Started

Act Now

Limited time opportunity

Join Now
🎭

Vibes

Emotional tone from serene to urgent

🎯

Intent

Purpose—engage, inform, persuade, or direct

📖

Narrative

Story arc from exposition to resolution

🔗

Cohesion

Relational flow between sections

🎨

Theme

Light, dark, or adaptive styling

🧩

Components

Reusable semantic elements

∞

1,296 Valid Combinations

Mix 6 vibes × 4 intents × 6 narratives × 9 cohesions

✓

Consistent Quality

Every combination produces visually distinct, cohesive output

💡

Intent-Driven Design

Design emerges from meaning, not decoration

♿

Accessible by Default

Semantic structure ensures accessibility

Understanding the Exercise

This page systematically tests Gutenberg's rendering engine. Each section combines different vibes, intents, narrative arcs, and cohesion patterns to validate that:

  1. All combinations render without errors
  2. Visual hierarchy is maintained across all variations
  3. Dark mode applies correctly to all components
  4. Spacing and layout remain consistent
  5. Typography scales appropriately

Key Observations

  • Serene vibes use soft colors and generous spacing
  • Urgent vibes employ bold contrast and compact spacing
  • Intent shapes the call-to-action prominence
  • Narrative arc influences visual pacing
  • Cohesion ties sections together thematically

Ready to Start?

Get everything you need to begin exploring semantic rendering.

Documentation Live Demo GitHub

Join the Community

Hundreds of designers and developers are building with Gutenberg.

Sign Up Now Learn More

The Rendering Pipeline

Gutenberg transforms semantic specifications into complete HTML documents:

Spec File (YAML)

  • Defines page structure, content, and semantic metadata

↓

Validation (validate_schema)

  • Checks YAML syntax and semantic rules
  • Returns errors or warnings

↓

Rendering (render_page)

  • Transforms YAML to HTML
  • Applies semantic styling (vibe/intent/narrative)
  • Embeds all CSS (no external CDN)

↓

Screenshot (snapshot_html)

  • Captures full-page PNG in headless browser
  • Validates visual output

↓

Deployment (deploy_directory)

  • Uploads to Cloudflare Pages
  • Returns live HTTPS URL

A Gentle Introduction

Semantic rendering starts with a simple idea: design should reflect intent.

When you mark a section as "urgent," the system knows to increase contrast, tighten spacing, and strengthen calls-to-action. When you mark it as "serene," the opposite happens—colors soften, spacing relaxes, language becomes inviting.

This isn't about decoration. It's about meaning-driven design.

Component Inventory

Gutenberg includes these semantic components:

  • Navigation - Site-wide navigation with semantic styling
  • Hero - Large, impactful entry sections
  • Features - Showcase highlights in grid layouts
  • Content - Flexible prose with markdown/HTML support
  • CTA - Call-to-action sections with button variants
  • Footer - Site-wide footer with links and copyright