Everything TRUE looks like this.

Brand architecture, the family

TRUE is the parent brand, and currently also the logo on trueoriginal.com. Under it sit five products: TRUE Sign, TRUE Verify, TRUE Vault, TRUE Wallet (formerly TRUE Profile) and TRUE Upskill. Every product lockup is the same two parts in the same order: the TRUE gem plus wordmark, then an ordbild after it. The gem plus wordmark never changes. Only the ordbild changes, and it comes in exactly two forms: the shared plain text default, or a product's own designed ordbild, which TRUE Sign and TRUE Verify have. TRUE Upskill is its own brand with its own shield and name, and carries no TRUE wordmark.

Centring the name on the wordmark

The plain text name is centred on the TRUE letters, in every browser and every font. Never centre it with align-items: center alone: that centres the text's line box, and where the capitals fall inside that box depends on the font file's own vertical metrics, which differ between fonts, operating systems and browser engines. A product that fell back to the system font on a Mac showed VAULT 2.4px above the TRUE letters. Pin the name to the wordmark instead. align-self: baseline on both puts the name's baseline on the wordmark's bottom edge in every engine, because an SVG's baseline is its bottom edge. position: relative with top: calc(0.36em - 0.5055 * var(--wm-h)) then lifts it into place: 0.5055 is one minus where the TRUE capitals centre inside the SVG (y 8.607 to 23.042 of the 32 unit viewBox), 0.36em is half the capital height of Helvetica Neue (0.714), and --wm-h is the rendered wordmark height, which the SVG reads too (its width is 3.125 times the height, the 100 by 32 viewBox), so the two cannot drift apart when a lockup is resized. line-height: 1 and margin-bottom: -1em keep the name from making the row taller than the wordmark. Measured in Chromium, WebKit and Firefox, the name then sits within a pixel of centre, which is the rounding every browser applies. This is for the plain text name only: Sign's script and Verify's ordbild are images whose ink is already centred, so they keep plain flex centring.

The exception, TRUE Sign's designed ordbild

TRUE Sign is so far the only product with a designed ordbild: the handwritten signature, shipped as a PNG sitting on the same optical baseline as the wordmark. It replaces the plain text for Sign alone. Treat it as the exception, not the norm: every other product keeps the shared default above until it has an approved ordbild of its own.

Outside the system, True Upskill

True Upskill is deliberately not part of this architecture and not a sibling of Sign, Vault, Verify and Profile. The separation is concrete, not just declared: it lives on its own domain, trueupskill.com; its wordmark is True Upskill in mixed case, a deliberate decision, never normalised to caps; its typeface is Inter Tight, not Marcellus; and its mark is its own rounded tile, not the TRUE gem. No rule in this guide applies to it, so never build a TRUE lockup for it and never restyle its identity with these tokens. Its mark is not reproduced here on purpose: this repo does not carry the asset, and approximating a logo is never acceptable. It has its own guideline: the True Upskill Brand Guideline.

Rules

Core palette

Functional colours

Smaller roles, still read straight out of production.

White on dark, the opacity ramp

On ink sections nothing is ever gray. Depth comes from white at six fixed opacities. The one people get wrong: secondary text on dark is white at 0.80, and 0.56 belongs to placeholders only.

Roles

Gradient text, one word only

The strongest use of the gradient is a single word inside a serif title. Clip it to the text, keep the rest of the line in ink or white.

The closing band: the last CTA runs into the footer

The one place the gradient covers a surface, and it happens once, at the bottom. The last call to action is itself a full bleed gradient section, with no bottom padding, and it runs straight into the footer's gradient band, where the dark footer card sits. The eye reads one band from the heading down to the footer. Straight from TRUE Sign's .contact-grad and TRUE Verify's issuer call to action. On it, in order: a heading in white Marcellus at 30px or larger, at most one supporting sentence under it in white at 17px, then the button. The sentence belongs to the heading, so it sits with it on the band; a sentence left above the band in ink reads as a stray paragraph. Keep it to one sentence and no wider than 580px, since white body text is at its faintest on the blue end.

Thin gradient strip

A 4px to 6px strip along the very top of a page quietly brands a product surface without spending the hero moment.

The sanctioned variations

Five ways the one gradient may appear, each traced to real code. Nothing else.

Numbers sit on ink, never on the gradient

Step numbers, ordinal badges and icon tiles with a numeral or letter are solid var(--true-dark) with the numeral in white. The gradient is never the background behind a number.

The scale

Nine steps cover every real use. The specimen below is the copyable heading kit: paste the CSS once and use the classes everywhere.

Links in running text

A link inside a sentence is marked by its underline, not by a colour. It sits in body gray, and only on hover does it darken to ink. Decided by Patrik on 15 September 2026 after five variants were rendered on a real page: "Rosa länkar skriker för mycket."

Weights and facts

The title block

The standard opening of any section: kicker, title, preamble. Copy it as one unit.

Kicker as a pill

In heroes the kicker may wear a pill: same text style, wrapped in a white surface with a hairline border and full radius.

Paragraphs and links

Running copy is 16px over 24px in gray, at most 640px wide. Blog and long form articles drop to 14px over 24px in ink. Emphasis steps to weight 500 in ink. Inline links are pink and underlined on light, brand blue and underlined on dark; standalone links with a trailing arrow use ink with a bottom border that turns pink on hover. Never brand blue for a link on white, it is unreadable.

Lists

Feature lists use a leading tick in brand blue. Plain lists keep standard bullets in gray. Both stay at body size.

Voice

The rhythm

Major sections sit 160px apart, sixteen times over on the live site, expressed as a top margin. New product sections use symmetric 84px padding instead, as the approved mockup does, because margins collapse against neighbours and padding does not. Inside a section, related blocks sit 48px to 80px apart; inside a component, 8px to 32px. If you take two numbers from this guide, take 48px for every panel's padding and 160px for the space between sections.

Containers

Production never settled on one container; these are the widths that actually ship. For a product page use the 1180px container. One warning: 1360px is not a container, it appears once on a single panel, even though the old guide and one product adopted it as the page width.

Recurring distances

Breakpoints

Three breakpoints, straight from the Webflow build: 991px, 767px and 479px. Grids collapse to one column below 991, heroes drop their stage below 767, type steps down one size below 479.

Glass

Two glass recipes exist, both for content floating over imagery or dark surfaces. The badge blurs a little and lets more white through; the panel blurs hard and stays darker. Both sit on radius 8px.

Backdrop blur steps

Blur strengths in production: 8px for the fixed navbar over content, 16px for glass badges, 20px and 40px for decorative overlays, 80px for glass panels. No other values.

The standard hover

Hover feedback runs at 150ms with plain ease: a filled button drops to opacity 0.85, a ghost darkens its border, a link turns pink. Nothing scales, nothing glows, and a button picks one effect, never two.

Spinner

The one production keyframe: a 0.8s linear spin.

Ambient float

Floating proof chips in hero stages drift 9px up and back over 5.5 seconds. Stagger siblings with animation delays so they never move in unison. From the approved product mockup.

Slammen, the seal stamp loop

The TRUE Sign landing hero animation: a three second loop in which a signature draws itself onto a document, then TRUE's mark slams into the bottom right corner with an impact squash and a 2px document shake, holds, fades and restarts. It runs on transform and opacity only, so every frame stays on the compositor. The stamp is the official hexagon path copied verbatim from the mark, never redrawn. The scene lives in a fixed 320 by 360 box reserved up front, so the loop never contributes layout shift on the page that hosts it.

The CTA pair

The standard call to action: filled leads, ghost follows. The one exception is the header, where a plain Log in action sits left of the primary. The two always travel together.

On dark

On ink sections the ghost border switches to white at 0.4, the secondary to white at 0.48, and the primary inverts to white with ink text.

Sizes

Three sizes: compact for navbars at 8px by 16px, standard at 12px by 24px, large for heroes at 16px by 32px. Same radius, same border, same face at every size.

Wide CTA and pill

The wide CTA is a full width button on radius 16px with the text stepped up to 24px over 32px, used at the end of long content. The pill is for load more and filter actions.

Anatomy

Label above, field, help text below. The label points at the field with for and id, help text is wired in with aria-describedby, and required fields carry the required attribute with a pink asterisk the screen reader skips. No product marks required fields yet; the asterisk is the proposal, tracked in Provisional.

The product field and its states

Sign and Vault ship the same outlined field: white fill, hairline border, 15px type, padding near 10px 13px. Its shipped focus is a blue border with a 3px halo in the product tint #EEF8FB, the one focus treatment in production that is not an outline, and it is still blue. Read only fields switch the fill to the tint; that is Sign's copy friendly signing link row. No product styles a disabled input, so the grey here is derived from Sign's disabled primary button and is provisional. Tab into the example to see the real ring.

Sizes

Production uses two. The website field is 16px type with 12px 16px padding; the product field is 15px with 10px 13px. Vault's variant adds a 44px minimum height for touch, and Sign's sidebar squeezes a third, 13px micro size that ships without any focus ring; do not copy that one, it is recorded as a mistake in the do and do not pairs below.

Icon and unit adornments

No product ships an input icon, a unit suffix or a search field yet, so these three are compositions of existing tokens and sit in Provisional. The icon is 16px in the body gray inside the field's padding; the unit is body gray text the field is described by.

Textarea

The textarea is the field grown taller. One rule comes from the single textarea in production, in Vault's admin: it resizes vertically only. resize: vertical with a minimum height keeps the column intact while the user pulls.

Validation

Success is the one semantic colour the brand owns: a green #1CA800 tick beside a message in body ink. Error has no brand colour yet; Sign raises errors in pink, Vault and Verify in two different reds, and none of the three is a brand decision, so the guide will not pick a side. Until the central decision lands, tracked in Provisional, an invalid field turns its border ink, sets aria-invalid, and says what went wrong in words through aria-describedby and role="alert". The state is carried by the border, the message and the attribute, never by hue alone.

Select

All three shipped selects are native, and none of them customises the arrow: the chevron treatment in TRUE is the operating system's own. The select wears the product field's clothes and gains a pointer cursor; the compact filter variant shrinks to its content. Disabled options are native too, as in Sign's SMS option when no sender is configured.

Radio group

Vault ships the only radios in TRUE, and they are cards: the whole label is the control, the native input stays in the accessibility tree but off screen, and the checked state is a blue border on a tinted fill. Vault wrote them in Tailwind blues, #2563EB on #EFF6FF; the token form maps those to the focus blue and the product tint, the closest values the system owns. Vault also ships them with no visible focus ring, so the ring below is the required repair, not an invention. The group is a fieldset; Vault hides its legend, and when the group has no other visible heading, show it styled as the label.

Checkbox and switch

No TRUE product ships a checkbox, a switch or an accent-color anywhere, so both controls below are proposals, listed in Provisional. The checkbox derives from the radio card: same selected blue, 4px radius from the small step, box border in the body gray so it passes three to one on white. The switch track is the border token at rest and ink when on, matching the primary button's logic that ink carries the action; green would read as a status and blue as focus.

File input and the drop zone

Every TRUE product takes files, and every one of them the same way: the native file input stays real but visually hidden with the clip pattern, and a dashed zone is the visible control. Two pixel dashed hairline, the product tint as fill, generous centred padding. On drag over, Sign and Vault's verify demo turn the border pink on a soft pink fill; Vault's try zone turns blue and Verify turns ink instead, a divergence the products should settle. The zone is a label, so click, keyboard and screen reader all reach the real input.

Input with a button

Email capture pairs an input with a primary button in one row. The input keeps radius 8px, the button keeps 12px; the mismatch is correct, and Verify ships exactly this row for its URL check, 8px gap and all.

The worked form

Everything above assembled the way a product would ship it: fieldsets for the groups, the compact product field, a native select, card radios, the drop zone, and one primary action beside a ghost. Copy this one wholesale and delete what you do not need.

FAQ item

The one card on radius 12px. Surface tint, 32px padding, a 32px gap between question and answer.

Interactive tile

Linked tiles may lift 3px on hover with the soft shadow, over the slow duration. This is the only hover movement in the system.

The product header, marketing product page pattern

The header from the approved product redesign mockup: lockup left, section nav centred, ghost plus filled right. Full recipe in product page anatomy. Note the divergence: the shipped TRUE Sign app header below keeps the lockup left but moves everything else into one right cluster and has no centred nav. Both patterns are real; whether they converge is a central design decision, do not resolve it locally.

The shipped app header, TRUE Sign

The header TRUE Sign actually ships, one component in two colour variants, structurally identical: same 68px min height, same 0.75rem 2rem padding, same 0.75rem nav gap, only the colour scheme flips. Light is the public signed out chrome, white at 0.92 over a saturate and blur backdrop with a hairline below. Dark is the signed in dashboard, flat ink, white text, no border. The nav is one cluster on the right; there is no centred section nav.

The floating pill bar

The marketing shell: fixed to the top with an 8px offset, 1000px wide, 8px internal padding, radius 16px, items on a 16px gap. Two variants ship: dark, fully transparent over a hero with white text and 0.4 white button borders, and light, white with a one pixel hairline, text in #2D2D2F and 0.4 ink borders. There is no scroll swap: each page chooses its variant once, at build time.

Dropdown

Dropdown panels are white on radius 12px with the wide soft dropdown shadow and 10px vertical padding. Items are 14px with an 8px radius hover in the surface tint.

Language switcher

The control below is the standard for product surfaces: a globe, the current language as a two letter code, a caret, and a menu holding the flags and the full names. Decided 26 July 2026 by Patrik, on the TRUE Verify implementation. Any product surface showing something else is behind, not an alternative: TRUE Sign currently spells the full language name in its toggle and is being brought onto this control.

TRUE Original is the one exception, and it is explicitly temporary. It carries a single flag in the footer, no label and no menu, and it stays that way until someone decides otherwise. Do not copy it onto a product surface, and do not tidy it away either.

Three rules hold either way. The menu is only as wide as its longest row, never a fixed width, so it widens by itself when a longer language or country name arrives and no one has to remember a number. It is anchored to the right edge of its toggle, so it grows leftwards and stays under the control. And the two languages are never both on screen as plain text side by side; the toggle shows the current one, the menu holds the rest. That last one was rejected twice in review.

Where the card sits

On a product page (TRUE Sign, TRUE Verify, TRUE Vault) the card floats on the closing band: the full bleed gradient, with the card 120px below the top of the band. When the page ends in a call to action, that call to action is the top of the same band, so the gradient appears once. On trueoriginal.com the card sits on the white page instead, 120px below the last section, and the page's gradient moment is its own call to action panel above.

The product hero

From the approved product redesign. Title at the H1 step, 48 over 56. The gradient word is the one moment the gradient gets on this page.

The photo hero

Marcellus SC at the hero step over imagery, white on a 0.4 black scrim, with #470505 behind the photo while it loads. Production padding is 200px top, 88px sides, 40px bottom.

Focus rings

A two pixel outline: #0050BD sitting tight against the element on light surfaces, #7DCADE with a two pixel offset on dark. Production has no pink focus ring anywhere; a pink ring is the fastest way to look off brand. Tab through the example.

Contrast facts

Measured against WCAG 2.1. Learn the failures; they define where colours may not go.

Reduced motion

Every ambient animation, float, pulse, ticker and draw, stops under a reduced motion preference. Ship this block with any page that animates. One caution: a loop whose resting style is empty, like the Slammen stamp, also needs its final frame pinned explicitly, or this guard freezes it on nothing.

Checklist