Noribel Design System

Logos

Change a path → logos update in the preview on the right.

Wordmark

On blue bar

Square

Safe

Wordmark file Square file Safe file

Colors

Each swatch says where it shows. Click or focus one — that part flashes in the preview.

Tip: if text looks wrong (all black), hit Reset then set Main / Secondary / Faint again.

Page background

Decoration behind My Races / race / Super Settings. Patterns use brand blue; photo is optional. Watch the preview content area.

Pattern strength Now: 100%

Now: rings · Push live → linked pages pick this up on next load.

Fonts

Change family or size → title and body in the preview change.

Font Big title size Body size Small label size Title weight Body weight

Ardennes Classic

This is body text. Same font as the preview.

Spacing

How tight the app feels. Click one — preview spacing updates.

Corners & blue bar

Change a number. Watch the example under it and the live preview on the right.

Button corners Now: 10px Card corners Now: 16px

Start Card in the preview

Big block corners Now: 22px

Header

Blue bar height Now: 64px

My Races

Shadows

Higher number = stronger shadow. Watch the boxes under each control.

Card shadow Now: 2

Card

Menu shadow Now: 16

Menu

Popup shadow Now: 28

Popup

Buttons

Corners = “Button corners” above. Size = text + padding below. Small is what most race / table actions use (Save in the preview).

Normal — text size Now: 14px Normal — tall / wide Pad: 10 × 22px

Small — text size Now: 13px Small — tall / wide Pad: 7 × 16px

Preview Save/Cancel use small. Color = Button blue under Colors.

Loading screens

One universal loader for pages and panels. Edit look here — full page (login / race boot), compact (inside a panel), and blur overlay. Ring color follows Soft highlight under Colors; logo follows Logos → Wordmark.

Backdrop style

For Jan — new loading look

Copy /assets/loading-skins/_template.css → jan-YYYYMMDD.css
Edit only that CSS (colors, spinner, logo size). Keep class names.
Here: pick Custom skin, paste the path, hard-refresh, use Try full-page demo.
Send Markus the CSS file + screenshots. No app JS/HTML needed.

Full notes: loading-skins/README.md

Full spinner size Now: 52px Compact spinner Now: 22px Spin speed (ms) Now: 850 Default message Default subtitle

Full-page logo

Rotating tips on full-page load

Full page — login, race boot, Super Settings

Compact — panels, tables, map tools

Blur overlay — on top of content

Ardennes Classic · map underneath

Now: brand · Push live updates every page that uses the shared loader.

Badges

Pick a shape. Same as buttons makes Marshal / Live use the button corner number — for a universal UI.

Badge text size

Marshal · 2 Live Past due Draft Beta

Now: pill · compare to the Save button above.

Dropdowns

Canonical action menu used on Overview (Sort, race ⋮ Share / Edit / Delete). Class .nor-menu in nor-ui-parts.css. Shadow follows Menu shadow above.

Use .nor-menu + .nor-menu__item (+ --danger / --on). Trigger: .nor-menu-trigger. Overview is linked under Linked pages — Push live or Preview applies there.

Menu layout

Where the side / top nav sits, how active items look, width, corners, and spacing. Watch the preview rail.

Placement

Active item style

Side menu width Now: 104px Menu item corners Now: 8px Space between items Now: 4px

Now: side · filled

Forms

Fields use the same corners as buttons.

City Error exampleEnter a number.

Popups

Where the dialog sits. Open one to test shadow + corners.

Surfaces

How panels look. Cards = normal.

Linked pages

These pages load nor-ui-boot and receive Design System tokens. Overview (/index.html) is included. Use Preview / Save draft for this browser, or Push live for everyone.

Overview / login / pricing Race Super Settings