One brand, every internal product.

Everything on this page is the Demo Builder's own system, taken from its shared stylesheet (turbo-it-generate/src/ui-css.js) rather than re-invented: the same palette, the same 40px controls, the same radii, the same 60px topbar with the gradient rule at half opacity. Copy a block from here into a product and it will match generate.turboit.uk, because it is the same values.

1. The mark

As shipped: the bare gradient bolt. The builder inlines it as a data URI and uses it for the favicon and the login lockup. No tile, no outline, no shadow.

bolt-mark.svg (primary)

favicon.svg

mono electric

mono ink

mono white

icon-tile.svg (app icon)

Lockups

Two patterns, both the builder's. Login: bolt 38px, "Turbo IT" 15px/600, product name 12px muted underneath. Topbar: bolt 24px, name, 1px divider, product name in muted.

lockup-login (stacked)

lockup-topbar (inline)

topbar, on dark

wordmark only

Clear space: a quarter of the mark's height on every side. Minimum 12px for the mono marks, 14px for the gradient. The tile is optional and is not what the builder uses; keep it for a favicon that needs an opaque square, an app icon or an avatar, never as the mark inside a product's own topbar.

2. Colour

ui-css.js, ":root". Two families: neutrals, and four status hues with a fill AND a text variant each.

Measured contrast

Pair	Ratio	Verdict
foreground on background	14.80	AAA
muted-foreground on background	6.15	AA
muted-foreground on card	6.65	AA
primary-foreground on primary	4.66	AA
info-fg on its tint over card	6.10	AA
success-fg on its tint over card	6.20	AA
destructive-fg on its tint over card	6.10	AA
warning-fg on its tint over card	6.60	AA
#f99c00 style warning as text on its own tint	1.94	the trap the -fg variants exist for
white on the gradient's teal end	3.50	never put white text on the gradient

The gradient

ui-css.js: the topbar's 2px accent line at 50% opacity, the wordmark lockups, and the progress fill. Nowhere else.

linear-gradient(100deg,#8a4af5 0%,#1276ce 46%,#0093cb 74%,#00b5bc 100%)

3. Type

ui-css.js sections 1-2. The system spans 11px to 24px and stops there: there is no 28px or 40px step in the builder, so there is none here.

24 / 700 / -.02em 12,480 .tile .v, tabular

22 / 700 / -.02em h1 · .ti-h1

18 / 600 / -.01em h2 · section heading

17 / 600 .modal-head h3

16 / 600 .empty .e-title

15 / 600 h3 · card head

14 / 400 Body: forms, buttons, table tabs, and the topbar name.

13 / 600 Field label and table cells, alerts, toasts.

12 / 500 Chips, badges, table heads

11 / 400 .ti-tiny, menu footers

4. Buttons

ui-css.js section 3. 40px tall, 8px radius, 500 weight, 16px side padding. Primary carries the electric fill and a 40px glow that widens to 60px on hover.

Sizes

Small is 32px by design for fine pointers; on a touch device the theme lifts every 32px and 36px control to 44px.

5. Forms

ui-css.js section 4. 13px/600 labels, 40px fields, 8px radius, and a focus ring of the primary at 18%.

Business name

Shown to the customer on the demo, and used for the site's title.

Art direction optional

Brief

Play and win Include the instant-win game

Drop the logo here, or click to choose a file

6. Navigation

ui-css.js sections 5 and 13: the segmented control for views, the underline tabs for a page's sections.

7. Cards, tiles and the shell

ui-css.js sections 6, 12 and 13. Cards are 12px radius with the warm card shadow; the topbar is 60px with the gradient at 50%.

Card with a head

20px padding, 12px radius

Live

Body copy inside a card sits at 13px in muted, with 15px/600 for the head.

Flat card

Same surface, no shadow: for a card inside a card.

Demos built

1,284

Conversion

18.4%

Avg build

3m 12s

The dotted background

A 1px dot on a 16px grid over the surface colour. The login page uses the same idea at 18px over the page colour.

8. Pills, badges and messages

ui-css.js sections 7 and 8. Every status hue has a fill for the pill and a darker text variant for the words inside it, because the bright fill as 12px text measures 1.94-4.40:1.

Neutral Info Live Degraded Failed Saved to the brief

Alerts

A neutral message, the default variant.

The demo is queued and will build on the next tick.

The KV entry expires in 3 days.

The build failed and was retried once.

9. Tables, empty states

ui-css.js sections 9 and 11. 48px rows, 12px heads on the surface colour, hover to muted.

Demo	Rep	Template	Built	Action
Ashgrove Coffee House	SI480	Auto	3m 12s
Fold and Field	JR211	Premium dark	4m 02s

No demos yet

Build one from a brief and it will appear here within a few minutes.

10. The link row (extension)

Not in the Demo Builder: this is the hub's destination row, built out of the components above (card row, pill, btn-sm). Section 7 of BRAND.md gives the metrics.

Ops dashboardLocked Internal operator control panel dash.turboit.uk Open

Demo Builder Instant AI client-site mock-ups for sales calls generate.turboit.uk Open 💷 Stripe Card payments and subscriptions dashboard.stripe.com Open

Hover a row: the background goes to muted (the builder's table hover) and the action becomes the primary button with its glow. The action is a fixed 32px .btn-sm, minimum 78px wide, 12px from the row edge, always visible, with a reserved 22px slot before it for a delete button, so a column of rows lines up exactly.

11. Do and do not

Import the token file and reference tokens by name.
Use a -fg colour for status words, the plain hue for the fill.
Keep controls at 40px (32px small, 48px large) and radii at 8/10/12.
Put the gradient on the accent line, the mark and progress, nowhere else.
Give every row one obvious action, always visible.

Do not

Invent a colour, radius, shadow or a second typeface.
Add a 28px or 40px headline step to a product UI.
Put white text on the gradient, or the bright status fill as small text.
Use a dark theme by default: the builder has no dark mode, so it is an extension.
Use an em dash. Anywhere. Ever.