---
title: "ORC's theme"
description: "The look of orcwg.org's blocks, the ORC redesign on Tailwind CSS: where it lives, its tokens (colours by role, type, corners, shadows), its looks and its motion."
canonical_url: "http://localhost:3000/orc/theme"
---
# ORC's theme

> The look of orcwg.org's blocks, the ORC redesign on Tailwind CSS: where it lives, its tokens (colours by role, type, corners, shadows), its looks and its motion.

The solstice-ui blocks are headless: orcwg.org's look is **ORC's theme** of them, the ORC redesign on Tailwind CSS v4. A block's options that change its look (`variant`, `background`, `color`…) take their values from this theme: the [component pages](http://localhost:3000/components/cards-and-grids/card) show them in their "Theme" section, and [ORC's looks](http://localhost:3000/orc/looks) lists them all.

## Where it lives

<table>
<thead>
  <tr>
    <th>
      File
    </th>
    
    <th>
      What it holds
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        app/theme/<block>.ts
      </code>
    </td>
    
    <td>
      A class map per block (and for the header, footer and page frame): Tailwind classes by part and by option value. Its option values are the values editors get.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        app/assets/css/theme.css
      </code>
    </td>
    
    <td>
      The tokens (<code>
        @theme
      </code>
      
      : brand scales, type scale, page column, corners, shadows, easings), the surface colours of the light and dark page, the base styles of the Markdown in pages, utilities (<code>
        container-page
      </code>
      
      , <code>
        bg-band
      </code>
      
      , <code>
        eyebrow
      </code>
      
      , <code>
        shine
      </code>
      
      , <code>
        link-underline
      </code>
      
      , the <code>
        styled-list
      </code>
      
       markers) and keyframes.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        app/assets/css/looks.css
      </code>
    </td>
    
    <td>
      ORC's own looks: the grid lines behind page headers, the sections' backgrounds and glows, the watermark word.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        app/assets/css/search.css
      </code>
    </td>
    
    <td>
      Nuxt UI's <code>
        orc
      </code>
      
       colour (the site search, and this documentation) from the primary scale, and its surfaces from the site's.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        app/theme.config.ts
      </code>
    </td>
    
    <td>
      The module's theme settings, shared by the site and this documentation: tailwind-merge's knowledge of the theme's own tokens, and the motion presets.
    </td>
  </tr>
</tbody>
</table>

The site's `nuxt.config.ts` gives them to the module (`solsticeUi`), with the defaults of the live data blocks (`publishTarget: 'orc'`, `workingGroup: 'orc'`) and the event pages (`/events`).

## Colours

### Brand scales

Three scales, from 25 (lightest) to 975 (darkest):

- **primary**, ORC teal: the brand colour, for accents, links, icons and the main buttons.

<theme-swatches scale="primary">



</theme-swatches>

- **secondary**, ORC coral: calls to action and highlights.

<theme-swatches scale="secondary">



</theme-swatches>

- **tertiary**, ORC navy: text and deep surfaces (the dark page).

<theme-swatches scale="tertiary">



</theme-swatches>

Key steps: primary `#54b4c3` (400, buttons), `#3e9faf` (500), `#006472` (700, links and accents on light surfaces); secondary `#ec6262` (500, call-to-action buttons), `#b83d3d` (700); tertiary `#003963` (700, solid fills), `#001b2e` (900), `#000e18` (950, the dark page).

### Colours by role

Class maps name roles, not colours: each role has a light value (`:root`) and a dark one (`.dark`, deep navy), so a block styled by roles works in both colour modes.

<table>
<thead>
  <tr>
    <th>
      Utilities
    </th>
    
    <th>
      Role
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        text-default
      </code>
      
      , <code>
        text-highlighted
      </code>
      
      , <code>
        text-toned
      </code>
      
      , <code>
        text-muted
      </code>
      
      , <code>
        text-dimmed
      </code>
      
      , <code>
        text-inverted
      </code>
    </td>
    
    <td>
      body text, headings, strong UI ink (outlines, hovered links), secondary text, placeholders, text on an inverted fill
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bg-default
      </code>
      
      , <code>
        bg-muted
      </code>
      
      , <code>
        bg-elevated
      </code>
      
      , <code>
        bg-accented
      </code>
      
      , <code>
        bg-inverted
      </code>
      
      , <code>
        bg-border
      </code>
    </td>
    
    <td>
      the page and floating panels, tinted sections, cards (a white veil in dark), soft fills, solid fills (navy, white in dark), lines drawn as boxes
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-default
      </code>
      
      , <code>
        border-muted
      </code>
      
      , <code>
        border-accented
      </code>
      
      , <code>
        border-inverted
      </code>
      
       (and <code>
        ring-*
      </code>
      
      )
    </td>
    
    <td>
      lines, faint lines, hovered inputs, outlines
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        text-primary
      </code>
      
      , <code>
        text-secondary
      </code>
      
      , <code>
        outline-focus
      </code>
    </td>
    
    <td>
      the teal and coral accents (eyebrows, links, highlighted words), the focus ring
    </td>
  </tr>
</tbody>
</table>

A dark band (`surface-dark`: the brand band, filled and gradient cards, photo heroes) takes the dark values in either mode; inside it, `surface-default` gives a box the page's colours again (a tab's card). The `dark:` variant styles what the roles don't, mostly the brand scales' tints (`bg-primary-50 dark:bg-primary/10`). Member logos and embedded frames stay white in dark mode on purpose.

## Type

Inter, from a type scale that grows with the window (`clamp()`): `display` (page titles, up to 112px), `h1` (section titles), `h2`, `title` (card titles and Markdown `##`), `h3`, `lead`, `body` (18px) and `eyebrow` (small uppercase labels). Markdown in a page takes them by itself:

```mdc
::page-section{spacing-top="small" spacing-bottom="small"}
## A Markdown heading 2 (title)

### A Markdown heading 3 (h3)

#### A Markdown heading 4

  :::typography{variant="lead"}
  A lead paragraph, a little larger than the text.
  :::

A paragraph of body text, with a [link](/participate/) and **strong words**.

  :::typography{variant="caption"}
  A small, muted caption.
  :::

#eyebrow
An eyebrow

#title
A section title (h1)
::
```

The largest sizes are the page headers' (`display`, a `hero`'s title) and the sections' (`h1`: a `page-section` with the `heading` title style; `h2`: `subheading`).

## Corners, shadows, the page column

- **Corners** are Tailwind's scale times `--roundness`, 0.3 in ORC's theme: nearly square. Buttons, badges and tabs have a small fixed radius (`rounded-pill`, 0.2rem); icon tiles and portraits `rounded-tile`.
- **Shadows**: `shadow-soft` (a hairline), `shadow-raised` (an elevated card), `shadow-lifted` (a linked card on hover), `shadow-floating` (popovers), all navy-tinted.
- **The page column**: `container-page`, 77.5rem wide (1240px) with gutters of 20px to 48px; sections span the window, their content in the column.

## Looks

ORC's own looks, in `looks.css`, and the utilities of `theme.css` the class maps use:

- `hero-grid`: a faint grid behind the page headers (the plain `hero`, `hero-split`), drifting up as the page scrolls.
- `bg-tint`, `bg-aqua`, `bg-band-glow`: the sections' tinted (teal and coral glows), aqua (light teal to mist) and band (dark teal) backgrounds; `section-glow`, the soft glow drifting across the tinted and dark ones. `bg-band` is the brand gradient of the filled and gradient cards and of the `call-to-action`.
- `watermark`: the large outlined word behind a section's title (its `#decoration`).
- `eyebrow` (small teal uppercase labels), `shine` (a light sweeping across a button on hover), `link-underline` (an underline drawn from the left), `list-checks`, `list-bullets`, `list-numbers` (the `styled-list` markers), `skeleton` (loading placeholders).

## Motion

The blocks' motion is set in the class maps (their `motion` entries), with the module's presets and ORC's, in `app/theme.config.ts`:

<table>
<thead>
  <tr>
    <th>
      Preset
    </th>
    
    <th>
      What it does
    </th>
    
    <th>
      Where
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        rise
      </code>
    </td>
    
    <td>
      Fades in from 56px below (ORC's longer rise)
    </td>
    
    <td>
      The blocks of sections, grids, steps, people lists
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reveal
      </code>
    </td>
    
    <td>
      Rises from 48px with a blur
    </td>
    
    <td>
      A section's eyebrow, title, intro and actions
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
      
      , <code>
        wipe
      </code>
      
      , <code>
        grow
      </code>
      
      , <code>
        pop
      </code>
    </td>
    
    <td>
      The module's: fade in, wipe from the left, grow from the left, pop
    </td>
    
    <td>
      Photos among cards wipe in; the deliverables bar grows
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        drift
      </code>
    </td>
    
    <td>
      Follows the scroll sideways
    </td>
    
    <td>
      The watermark word
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      Moves the glow of a section as it scrolls
    </td>
    
    <td>
      Tinted and band sections
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gridShift
      </code>
    </td>
    
    <td>
      Moves the grid lines up as the header leaves the viewport (<code>
        exit: [0, 1]
      </code>
      
      )
    </td>
    
    <td>
      The page headers
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fadeOut
      </code>
    </td>
    
    <td>
      Fades and rises the text from half of the header out of view (<code>
        exit: [0.5, 1]
      </code>
      
      ), from 1024px
    </td>
    
    <td>
      The page headers
    </td>
  </tr>
</tbody>
</table>

Editors pick a container's entrance (`motion`: rise, fade, wipe, grow, pop, reveal, or none) and turn a page header's load-in off (`motion: none`). The page headers' texts slide up from the first frame (CSS: they are the page's largest paint), the ticker scrolls and badges pulse (CSS). Nothing moves for visitors who ask for less motion, nor in Studio's editor.


## Sitemap

See the full [sitemap](http://localhost:3000/sitemap.md) for all pages.