Styling

The page loads your theme's stylesheet from assets/ ({{ 'theme.css' | asset_url | stylesheet_tag }} in the layout). How you write it is up to you: plain CSS, Sass, Tailwind or anything that produces a .css file. The platform never builds your CSS; ship it ready to use.

Tailwind CSS in the starter kit#

The starter kit uses Tailwind CSS v4. Its source is src/theme.css; npm run build:css (and npm run dev) compile it into assets/theme.css, scanning your Liquid files for the classes you use.

<a class="btn btn-lg" href="{{ routes.contact_url }}">Book a consultation</a>
<section class="bg-surface py-section">
  <h2 class="font-display text-3xl text-ink">…</h2>
  <p class="text-ink-muted">…</p>
</section>

Write full class names. Tailwind only generates classes it finds in your files, so grid-cols-{{ section.settings.columns }} won't work. Pick a whole class with if or case:

{%- case section.settings.columns -%}
  {%- when '2' -%}{%- assign columns = 'sm:grid-cols-2' -%}
  {%- when '4' -%}{%- assign columns = 'sm:grid-cols-2 lg:grid-cols-4' -%}
  {%- else -%}{%- assign columns = 'sm:grid-cols-2 lg:grid-cols-3' -%}
{%- endcase -%}
<div class="grid gap-6 {{ columns }}">

Design tokens#

Theme settings become --theme-* CSS variables (printed by snippets/css-variables.liquid), and src/theme.css turns them into utilities. The colours come from the colour schemes (see Colour schemes): the page's scheme sets them on :root, and each .color-scheme-N class re-declares them, so a section that picks another scheme recolours everything inside it. When the firm changes a colour in the theme editor, every utility using it follows.

Opacity modifiers work too: bg-brand/10, border-ink/10.

Add your own setting in three steps: add it to config/settings_schema.json, print it as a variable in snippets/css-variables.liquid, then map it in src/theme.css:

@theme inline reference {
    --color-highlight: var(--theme-highlight);   /* bg-highlight, text-highlight… */
}

Component classes#

src/theme.css also defines classes for things that repeat: page-width (centred container), section-y (section padding), h1–h3, eyebrow, kicker, lede, btn (with btn-secondary, btn-accent, btn-link, btn-sm, btn-lg), badge, card, card-interactive, media-frame, media-zoom, input, field-label, notice (notice-success, notice-error), empty-state, link, and rte for rich text the firm writes in the editor. Utilities override them.

A few of these classes move:

• btn lifts on hover and presses in when clicked.
• card-interactive is for cards that link somewhere: the card lifts with a soft shadow on hover, and its image zooms slightly.
• media-zoom zooms its image on hover without the lift, for borderless cards. Put the image in a box with overflow-hidden.

All of them stand still for visitors who prefer reduced motion. Do the same for your own hover effects with a @media (prefers-reduced-motion: reduce) block. Scroll animations come from the platform, not these classes (see Motion and animations).

Member pages#

The client portal's account pages are rendered by the platform and use their own stylesheet, which loads next to yours. To keep the two from clashing:

• Scope element styles (h1, p, a…) away from the platform's area: :where(h1, h2):not(#app *) { … }.
• In Tailwind, build with theme(inline reference) as the starter kit does. It keeps your build from defining CSS variables and utilities the platform also uses (rounded-lg, font-sans, bg-primary…). Use the theme tokens instead.
• Give the platform the firm's brand colour. The starter kit's layout/member.liquid renders css-variables with member_area: true, which prints --primary, --primary-foreground and --ring from the page colour scheme.

Assets#

Reference images, fonts and other files in assets/ with asset_url. In CSS, use relative URLs: url('./logo.svg') in assets/theme.css resolves next to it.