Skip to the main content
Menu

Edition 02 / the working component system

Every detail, in one language.

Use the classes in this reference and the exact values in theme.json. These components inherit this identity's fonts, colors, proportions, and controls.

Typography

Display / lora

Stories worth staying for.

Reading text is 16px with a 1.7 line height and a maximum line length of 65 characters. A useful hierarchy is a first-class part of the system.

The independent imprint

Color & surfaces

Midnight
#233048

Marigold
#E6C46B

Page
#FAF4E6

Mauve
#C5A5AD

Ink on paper and ink on accent are approved normal-text pairings. Support color is a decorative surface until a specific text pairing is checked.

Controls

Buttons are at least 48px tall. Focus is visible. Keep existing handlers, links, and form behavior when applying the theme.

Cards & information

01 / Books

A voice of their own

Work chosen for its character, care, and unmistakable perspective.

02 / Writers

Books as objects

Considered paper, good typography, and room for the words.

03 / The imprint

A conversation that lasts

Stories to return to, pass on, and keep close.

Forms

Notices

This is an informational component. Use the ink / accent pairing for clear, readable supporting information. Connect status text to your real application state.

Tables

Theme system specifications
ElementValuePurpose
Spacing unit4pxA consistent compositional rhythm
Body text16px / 1.7Comfortable, readable content
Controls48px minimumUseful touch and keyboard targets

Accordions

How do I install this exact theme?

Download the complete kit. Read INSTALL.md, run install-theme.mjs against your project, and attach the exact data-openform attribute to your root or intended subtree.

Can I use it with my existing application?

Yes. Use theme.css and map your components to the provided of-* classes. Preserve your routes, application data, interactions, and actual business content.

The complete identity

Paloma complete visual identity