Styling Blocks

Style your blocks with Tailwind and Geppetto's theme classes. Add style blocks where it makes sense.

Styling the Geppetto way

One of the core features of Geppetto is that blocks adapt to your theme settings. This lets you adjust color, typography, spacing and more across your entire site. It gives your design consistency and it's what allows you to reuse your blocks on completely different projects.

Making blocks themeable is not hard. Instead of giving your block Tailwind classes you give them Geppetto theme classes. Each class represents a setting from the theme including mobile styles.

<!-- Tailwind -->
<div class="p-8 rounded-sm border border-gray-700 shadow-xl/20
     bg-linear-to-t from-gray-800 to-gray-900">
  <h3 class="font-[Bodoni_Moda] font-bold text-xl leading-6 tracking-wide
      lg:text-2xl lg:leading-7 lg:tracking-widest
      text-gray-100 mb-4">
    {{title}}
  </h3>
  <p class="font-[Open_Sans] text-base leading-4 lg:text-2xl lg:leading-5 
     text-gray-200">
    {{description}}
  </p>
</div>

<!-- Geppetto theme classes -->
<div class="card">
  <h3 class="heading-md text-fg mb-md">{{title}}</h3>
  <p class="body-sm text-fg-muted">{{description}}</p>
</div>

This takes a little getting used to. You're probably used to setting spacing and typography as tailwind units, rems or pixels. Five headline styles is limiting. But here's the thing, once you've figured out those five great headline styles you can stop thinking about it. Move on to other decisions. Working this way makes you faster and more confident.

Part of this confidence comes from always being able to change things. If you think one of your headlines wasn't quite perfect tweak it and the changes apply across your site. If you actually need a special heading size somewhere go ahead and add it in the block. You still get the modularity the block itself provides so you won't be updating it in more than one place.

Here's the other thing. You don't have to use theme classes for everything. Use them where they make life easier. Use Tailwind classes where it makes sense to you. If you like plain css you can add style blocks to your site. Sometimes it makes sense to use all three techniques.

Typography

Consistent headings and body copy typography across your site.

<!-- Five Heading Styles -->
<h1 class="heading-xl">Biggest</h1>
<h2 class="heading-lg">Large</h2>
<h3 class="heading-md">Medium</h3>
<h4 class="heading-sm">Small</h4>
<h5 class="heading-xs">Smallest</h5>

<!-- Three Body Styles -->
<p class="body-lg">Large body text</p>
<p class="body-md">Default body text</p>
<p class="body-sm">Small body text</p>

Class Adds - Font family, weight, size, line height, letter spacing and text transform

Mobile too!

The mobile overrides are the reason you don't need responsive utilities on every headline. Set heading-xl to shrink on phones once, in the theme, and every block that uses it follows.

Color

12 semantic system colors organized by purpose. Use them for backgrounds, text, and borders.

Brand Colors

Your primary brand color and another that works over it.

brand
on-brand

<button class="bg-brand text-on-brand">Primary CTA</button>
<div class="bg-brand/10 text-brand">Subtle brand tint</div>

Accent Colors

Two secondary colors for decorative touches.

accent-1
accent-2

<span class="bg-accent-1 text-fg">New</span>
<div class="border-l-4 border-accent-2 pl-4">Callout</div>

Surface Colors

Three colors for backgrounds and containers.

base - Primary page background
base-muted - Subtle background for alternating sections
base-alt - Alternative base for visual variety

<body class="bg-base">Main page background</body>
<div class="bg-base-muted">Card or section</div>
<div class="bg-base-alt">Alternating section</div>

Panel Colors

Panels and nested containers.

panel - Panels, nested containers, sidebars

<div class="bg-panel">Nested panel or sidebar</div>

Text Colors

Typography and content.

fg - Primary text
fg-muted - Secondary text
fg-alt - Tertiary text; pairs with base-alt

<h1 class="text-fg">Primary heading</h1>
<p class="text-fg-muted">Secondary text or captions</p>
<span class="text-fg-alt">Hints, placeholders, tertiary text</span>

UI Colors

Interface elements.

border Borders, dividers, separators

<div class="border border-border">Card with border</div>
<hr class="border-border/50">  <!-- Subtle divider -->

Opacity Support

All system colors support Tailwind-style opacity:

<div class="bg-brand/50">50% opacity brand background</div>
<p class="text-fg/70">70% opacity text</p>
<div class="border-border/25">25% opacity border</div>

Any opacity works, not just round numbers: /10, /50, /72 are all valid.

Custom Colors

You can also define custom colors in your theme (like gray-100, brand-dark, etc.) when the 12 system colors aren't enough. They work exactly like the system colors, opacity variants included (bg-brand-dark/50). (Names that would shadow a system color are reserved.)

Spacing

Your theme defines a spacing scale so padding, margins, and gaps stay consistent across blocks. The scale has five steps: xs, sm, md, lg and xl.

<!-- Padding: p / px / py / pt / pr / pb / pl -->
<div class="p-lg">Padded</div>

<!-- Margin: m / mx / my / mt / mr / mb / ml -->
<div class="mt-md">Spaced from above</div>

<!-- Gap: gap / gap-x / gap-y -->
<div class="flex gap-sm">…</div>

Change a step in the theme and every block that uses it updates

Section Rhythm

Blocks are wrapped in a .section, which applies your site-wide vertical and horizontal padding (with separate mobile values). This is what gives every block consistent breathing room top-to-bottom without you setting it each time.

.section - full vertical + horizontal padding
.section-y - vertical padding only
.section-x - horizontal padding only
.gap-section - the standard gap in grids and flex

<section class="section-y">
  <div class="section-x max-w-7xl mx-auto">
    <div class="grid grid-cols-3 gap-section">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

Buttons

Define your button styles once in the theme and apply them with classes. Combine the base class, a size, and a variant.

Sizes:
btn-sm
btn-md
btn-lg

Variants:
btn-primary
btn-secondary
btn-outline
btn-ghost

<a href="/signup" class="btn btn-md btn-primary">Get started</a>
<a href="/learn" class="btn btn-sm btn-outline">Learn more</a>

Cards

Cards come in two variations with three sizes each. They offer reusable container styling (padding, corner radius, border, shadow, and background).

<div class="card">Default card (medium)</div>
<div class="card-lg">Larger card</div>
<div class="card-secondary-sm">Secondary style, small</div>

Images

The image class comes in three sizes and allows you to apply consistent decoration to your images. Each size has settings for border, border radius and shadow.

<img src="{{photo}}" alt="{{photo.alt}}" class="image-md">

Prose

Prose allows you to map typography settings and margins to specific tags. When you render a WYSIWYG field as rich text, wrap it with the prose class so it picks up this styling.

<div class="prose">
  {{{article-body}}}
</div>