Styling and formatting

Let your frontend own tokens, fonts, and color mode while using board-language formatting helpers.

Your frontend should own its design tokens, font loading, component styles, and light/dark-mode behavior. The SDK does not ship UI components or require Cavuno’s hosted-board theme. This is the same ownership model used by open-code systems such as shadcn: theme decisions live in the consuming application.

Use Cavuno’s formatting helpers for board-owned vocabulary, dates, locations, salaries, and custom fields.

Own the visual system in your application

Define semantic variables in your global CSS or design-system package:

css

1:root {
2  --brand: oklch(0.58 0.18 255);
3  --surface: oklch(1 0 0);
4  --text: oklch(0.2 0 0);
5}
6
7.dark {
8  --surface: oklch(0.16 0 0);
9  --text: oklch(0.96 0 0);
10}

Load fonts through the framework’s preferred mechanism and let the application’s theme provider own color-mode state. That keeps the custom job board consistent with the rest of your product and avoids a remote board setting unexpectedly replacing application-wide design decisions.

Format a job card in the board language

1import {
2  formatPublishedRelativeDate,
3  formatSalaryRange,
4} from '@cavuno/board/format';
5
6import type { PublicBoard, PublicJobCard } from '@cavuno/board';
7
8export function presentJobCard(
9  board: PublicBoard,
10  job: PublicJobCard,
11  // Application-owned chrome (messages/ or your builder).
12  copy: { apply: { applyButtonText: string } },
13) {
14  return {
15    title: job.title,
16    location: job.locationLabel,
17    published: formatPublishedRelativeDate(board.language, job.publishedAt),
18    salary: formatSalaryRange(
19      board.language,
20      job.salaryMin,
21      job.salaryMax,
22      job.salaryTimeframe,
23      job.salaryCurrency,
24    ), // { text, timeframe, bound } | null
25    applyLabel: copy.apply.applyButtonText,
26  };
27}

formatSalaryRange returns structure, not a finished sentence: text is the amount only, timeframe is the wire enum (per_year, never a word), and bound names open-range chrome. Map the enum through your own catalog and attach From/Up to from application copy — the SDK does not join amount↔timeframe or choose chrome words (ADR-0103).

Formatting helpers require the board language so a non-English board does not silently format board-owned data in English. Omit nullable output rather than printing placeholders such as “Invalid date”.

Render custom fields from definitions

Jobs store custom-field values by definition key. Use context.customFields.job with resolveCustomFieldDisplay(language, definitions, values) to resolve labels, option keys, and display order. Multi-select returns kind: 'multi_select' with a values: string[] of resolved labels — join with Intl.ListFormat (or render chips) in the app. Never render a stored select key as if it were the visitor-facing label.

Verify styling and formatting

Switch the application’s own light/dark setting and confirm it does not depend on a Cavuno request.
Change the board language and verify dates, locations, salary units, and your application’s chrome copy update together.
Render select custom fields and confirm visitors see configured labels rather than stored keys.

Next, use Localization to keep requests, canonical slugs, document language, and formatting aligned.