Design tokens

Every published Tortus site (and the builder canvas) carries a full set of CSS custom properties emitted from the org's brand. Reference them in any Custom Code block or converted section, and your work stays on‑brand and consistent, and re‑skins automatically if the broker changes their brand.

Source of truth: @tortus/design-tokens (toModularCssVars). Override any value per‑site via the brand's design_tokens — tell us the values and every page picks them up.

Color

Background is page/section only — it does not color buttons. A block's background (the backgroundColor role, or --color-background) sets the surface behind the content. Button fills come from --color-accent (the "CTAs" color) or the block's own button-style controls (buttonColor / buttonColorCustom).

Typography

Spacing · radius · shadow

Motion

Durations + easing curves + scroll/parallax/hover primitives. Animate against these so motion is consistent and on‑brand.

.reveal { opacity: 0; transform: translateY(var(--motion-scroll-reveal-distance));
  transition: opacity var(--motion-duration-slow) var(--motion-easing-decelerate),
              transform var(--motion-duration-slow) var(--motion-easing-decelerate); }
.reveal.in-view { opacity: 1; transform: none; }
.card:hover { transform: translateY(var(--motion-hover-lift));
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }

Art direction motion vars

Two extra motion vars are set per site by the art direction + motion level the site was built with. Unlike the tokens above they don't come from @tortus/design-tokens — they're injected as a managed :root{…} block in the site's Custom CSS at build time. Read them in your own motion so a parallax or reveal you hand‑write moves at the SAME intensity as the rest of the site, and re‑tunes for free if the direction or motion level changes.

/* a reveal that lasts exactly as long as the site's direction intends */
.reveal { opacity: 0; transform: translateY(var(--motion-scroll-reveal-distance));
  transition: opacity var(--tr-dur, 760ms) var(--motion-easing-decelerate),
              transform var(--tr-dur, 760ms) var(--motion-easing-decelerate); }
.reveal.in-view { opacity: 1; transform: none; }

Both carry safe fallbacks, so a block that reads them still works on a site with no direction set (the editor, or a legacy site).

Loader / preloader

The page‑load + route‑transition spinner. Colors follow the brand by default.

.preloader { position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--loader-overlay-color); backdrop-filter: blur(var(--loader-overlay-blur)); }
.preloader__spinner { width: var(--loader-spinner-size); height: var(--loader-spinner-size);
  border: var(--loader-spinner-thickness) solid var(--loader-spinner-track-color);
  border-top-color: var(--loader-spinner-color); border-radius: 50%;
  animation: spin var(--loader-spinner-duration) var(--loader-spinner-easing) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

Widget skins

Backend‑fed widgets follow your brand for backgrounds/type/text already; these are the small extra accents you can recolor.

:root { --rating-star-filled: var(--color-accent); }  /* brand-colored stars */

Navigation dropdown

The hover sub‑menu on the site navigation reads its own token group, derived from the core palette (so a brand change re‑skins it for free) but namespaced so you can restyle the menu surface independently of the page background. Every NavigationHeader variant reads these, so it's a one‑place change.

/* a darker, tighter sub-menu without touching the page background */
:root {
  --nav-dropdown-bg: var(--color-primary);
  --nav-dropdown-fg: var(--color-text-inverse);
  --nav-dropdown-hover-bg: rgba(var(--color-accent-rgb) / 0.14);
}

Cookie banner

The consent banner reads its own --banner-* token group so a broker can re‑skin the banner chrome without touching the page. Every value is a per‑site override (organizations.settings.cookie_banner.tokens); blank inherits the platform default below (and, for --banner-primary-bg + --banner-rail, the brand accent when one is set). The legal copy is fixed by compliance — these govern only the chrome. Value spec: @tortus/design-tokens (complianceBannerTokens).

/* a tighter, brand-forward banner */
:root {
  --banner-primary-bg: var(--color-accent);
  --banner-rail: var(--color-accent);
  --banner-radius: 20px;
  --banner-button-radius: 999px;
}

For deeper restyling than these tokens allow, the banner also exposes the .tortus-cookie-banner / .tortus-cookie-accept / .tortus-cookie-reject class hooks and a scoped Custom CSS field — see Cookie banner.

The design page

In the builder, the Design surface is where you mark up a page and drop in {{tortus:…}} modules (compliant search/listings, plus backend‑fed team, blog, reviews, Instagram, new developments, and the market surfaces — neighborhood index, published reports, live market data, neighborhood report, and place momentum). Those modules render our data inside your markup; the tokens above style everything around (and, where noted, within) them. See the Designer handbook for the module reference, the compliance rules, and the full workflow.