True Upskill - Brand Guideline v1.0

01 · Brand position

A standalone brand. Not a TRUE product.

True Upskill is a course catalog where every course ends in a credential that can be verified at the source. It lives at trueupskill.com and carries its own name, mark, typeface, and palette.

What it is

Its own consumer brand at trueupskill.com, with its own guideline (this page).
The wordmark is True Upskill, in exactly that casing. Writing it as TRUE Upskill is wrong. This casing is a deliberate decision by Patrik.
Swedish first: the site defaults to Swedish, English lives at /en.
The verification technology behind the credentials comes from TRUE. That relationship stays in the background of the product, it does not appear in the brand surface.

What it is not

Not a sibling of TRUE Sign, Vault, Verify, or Profile. It is not part of that product family or its navigation.
Not set in Marcellus or Helvetica Neue. Those belong to TRUE Original. Upskill is Inter Tight, everything.
The mark is not the TRUE gem. It is Upskill's own shield in a rounded tile.
The TRUE style guide at style.true.gate1.dev does not govern this brand.

Rule of precedence, set by Patrik 2026-07-25: the live site sets the rules. Values on this page were read from TRUE-Catalog/develop/src/styles/global.css and from the HTML that trueupskill.com actually ships.

02 · Logo

Shield mark + wordmark.

The mark is a white outlined shield forming a T over a U, on a deep navy ground (#111924). It is a raster original: the exact file, never a redrawing. In product it is always rendered as a rounded tile, with corner radius applied in code.

Shield mark · logo-shield-hires.png · 1024 × 1024

On dark · the navy ground reads on both light and dark

True Upskill

Nav lockup, as shipped · mark 32px, radius 8px, gap 10px, wordmark 18px / 700

True Upskill

Lockup scaled up · radius stays at 25% of the mark's size

Invert version · logo-shield-invert.png · ink strokes on cream (#F2ECE0)

Favicon sizes · 16 / 32 / 180 px PNG on the live site

Hard rules

Use the actual file. The repo rule on the mark, verbatim intent: do not recreate it as an inline SVG or redraw the paths. That produced the wrong mark before.
Do not recolor, mirror, crop into the strokes, or change the shield's proportions.
Always pair with the wordmark True Upskill where space allows. The mark may stand alone at favicon sizes.

In practice

Nav renders the mark at 32 × 32 px with 8 px radius, the footer at 44 × 44 px with 10 px radius, both with object-fit: cover. Radius sits at roughly a quarter of the rendered size; keep that ratio when scaling.
Wordmark: Inter Tight 700, tracking -0.02em. 18 px in the nav, 24 px in the footer. Full values in the table below.
Clear space has no formal spec in the code. Recommendation until one exists: keep at least half the mark's width free on all sides, and never crowd the lockup's 10 px gap.

Wordmark, exact values

The wordmark is live text, not an image file. It is set in the site's own typeface, so it inherits every future type change automatically. Do not export it as a PNG or SVG and do not typeset it in any other family.

Property	Nav	Footer
Text	True Upskill, one space, both words capitalised
Font family	`'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif`
Weights loaded	400, 500, 600, 700 from Google Fonts, `display=swap`
Font size	18px	24px
Font weight	700	700
Letter spacing	`-0.02em`	`-0.02em`
Line height	1	1
Colour	`#26333d` (`--ink`)	`#ffffff` (`--bg-white`)
Wrapping	`white-space: nowrap`	inherits, never break the two words
Mark size	32 × 32px, radius 8px	44 × 44px, radius 10px
Gap, mark to text	10px	12px

Source: TRUE-Catalog/develop/src/components/Brand.astro, src/styles/partials/_nav.scss, src/styles/partials/_tokens.scss, public/assets/logo-shield-hires.png (shipped on trueupskill.com), public/assets/logo-shield-invert.png, favicon links in src/layouts/Base.astro. Ground navy #111924 sampled from the file itself. Every value in the wordmark table re-measured against the production stylesheet on trueupskill.com, 8 August 2026.

03 · Color

Soft dusty blues, one yellow.

The palette leads with soft blue white surfaces and near black ink. Yellow is the single accent: badges, dots, CTAs, and the highlighter behind key words. Never body text. On dark surfaces the accent shifts to Signal, a dusty light blue.

All fourteen tokens below were verified unchanged against the live code on 2026-07-25.

Blue white · --bg

Primary background

#EAEFF2

White · --bg-white

Cards, surfaces

#FFFFFF

Dusty blue · --bg-panel

Alt sections, panels

#DCE6EA

Warm cream · --bg-cream

Accent surfaces (testimonials)

#F0EBE1

Ink · --ink

Primary text, primary buttons

#26333D

Ink soft · --ink-soft

Body and lead text

#4A5763

Ink accent · --ink-accent

Highlighted words, hovers, links

#3D6478

Muted · --muted

Metadata, eyebrows

#7A8791

Yellow · --yellow

Accent: badges, dots, CTA

#F0D84D

Yellow soft · --yellow-soft

Highlighter background

#F5E78A

Signal on dark

Signal · --signal

Accent on dark backgrounds only

#92B8C5

Border · --border

Dividers, card outlines

#CFD9DE

Dark · --dark

Footer, marquee ground

#1E2B34

TRUE gradient · --gradient-true

Reserved for TRUE attribution only. Never in Upskill UI. Currently unused on live pages.

#7DCADE → #D82A80

Source: :root tokens in TRUE-Catalog/develop/src/styles/global.css.

04 · Typography

Inter Tight. Everything.

One family for every word. An editorial modern grotesk with tight tracking, loaded from Google Fonts in weights 400, 500, 600, and 700. Distinct on purpose from TRUE Original's Marcellus and Helvetica Neue. No italics for emphasis: use ink accent color plus the yellow highlighter instead.

Base: 16 px root, body line height 1.4, body tracking -0.01em.

Hero H1clamp(48px, 5.5vw, 89px)
weight 600 · line height 0.98
tracking -0.04em

Learn today. Prove it forever.

Section H2clamp(40px, 5.5vw, 72px)
weight 600 · line height 0.98
tracking -0.035em

Three promises. Nothing more.

Card H322 to 28px · weight 600
line height 1.1
tracking -0.03em to -0.025em

Every course ends with proof.

Category card title at 22px.

Leadclamp(18px, 2vw, 24px)
weight 400 · line height 1.35
tracking -0.015em

Find courses from trusted educators. Walk away with credentials you can verify at the source.

Body14 to 17px · weight 400
line height 1.5 to 1.55
tracking -0.005em

You don't just finish. You walk away with a credential that lives on the educator's own domain, one that any employer can verify at the source, forever.

Eyebrow / meta11px · weight 600 · uppercase
tracking 0.14em
badges: 10px · 700 · 0.12em

01 · Handpicked this month

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap" rel="stylesheet">

--font: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;

Source: font link in src/layouts/Base.astro and on trueupskill.com. Scale values from .hero h1, .section-title, .pillar h3, .cat-title, .hero-sub, .section-desc, .eyebrow, and .badge in global.css. The v0.1 draft overstated several sizes; these are the shipped values.

05 · Layout & spacing

One container, a calm rhythm.

Content sits in a 1360 px container with 32 px side padding. Sections breathe: 120 px of vertical padding on desktop, stepping down on smaller screens. The v0.1 draft said 1200 px; the site ships 1360.

Token	Value	Notes
`--max`	1360px	Container max width, everywhere
`--pad`	32px · 20px at ≤640px	Horizontal page padding
Section padding	120px · 80px at ≤1024px · 72px at ≤640px	Vertical rhythm between sections
Hero padding	80px top and bottom · 56px top at ≤640px
Card grid gaps	16 to 20px	Category cards 16px, providers and courses 18 to 20px
Breakpoints	1024px · 640px · 480px	Grids step 4 → 2 → 1 columns

Source: :root, .section, .hero, and the media queries in global.css, including the comment that fixes the container at 1360 and calls out 1200 as the old guideline's own layout width.

06 · Radius

Pills for actions, soft tiles for content.

Buttons, badges, tags, and search fields are full pills at 999 px. Content surfaces are rounded tiles between 12 and 24 px. The v0.1 claim that every element is pill rounded was wrong: cards never are.

999pxbuttons, pills

24pxhero visual

20pxcards

18pxcourse cards

16pxpanels, dropdowns

14pxavatars

12pxsmall avatars, menus

8pxlogo tile, selects

Source: every border-radius declaration in global.css. Most frequent values: 999px (21 uses), 20px (15), 16px (7), 24px (7), 12px (10).

07 · Shadow & motion

Barely there, always quick.

Shadows are soft, blue tinted, and rare: resting cards have none, only floating elements and the search pill carry one. Motion is fast and small: most transitions run 0.15 to 0.18 seconds, and hover lifts cards exactly 2 px.

Search pill / hero 0 4px 24px rgba(38,51,61,0.06)

Hover, floating cards 0 8px 32px rgba(38,51,61,0.08)

Dropdown panels 0 12px 40px rgba(30,43,52,0.14)

Hover me · the standard card hover

Border turns ink, the card lifts 2 px: border-color: var(--ink) + transform: translateY(-2px) over all 0.18s.

Timing

Hovers and color changes: 0.15s. Cards and buttons: 0.18s. Dropdown reveal: 0.18s with a 6 px slide. Marquee loop: 40s linear. Nothing bounces, nothing eases longer than 0.3s.

Source: box-shadow and transition declarations in global.css.

08 · Components

The working set.

Every component below is live: hover them. They are rebuilt here from the exact CSS the site ships.

Buttons

Primary → Yellow (search) → Ghost → Large →

Pill 999px · 13px/600, padding 11×20 · large: 14px, padding 16×28. Primary hovers to ink accent. Yellow and ghost hover invert to ink with yellow text.

Badge & eyebrow Verified educator

01 · Browse by field

Badge: yellow pill, 10px/700, uppercase, 0.12em. Eyebrow: 11px/600, uppercase, 0.14em, with an 8px yellow dot.

Highlighter accent

Courses worth your time.

Ink accent text over a yellow soft underlay: linear-gradient(180deg, transparent 62%, var(--yellow-soft) 62%). On dark grounds the text goes white over rgba(240,216,77,0.35).

Search pill

Search →

White pill, border, soft shadow, yellow CTA inside. The signature hero element.

Stat pills

10 000+kurser 200+utbildare 400 000+intyg

White pill, 14px, bold number + muted label. Used in page heroes.

Section link Alla kurser → Outlined pill, 13px/600, fills ink on hover. Sits at the right edge of section heads.

Card

Standard card

White, 1px border, radius 20px (course cards 18px). Hover: ink border, 2px lift.

Category card

01↗

AI & Maskininlärning

241 kurser12 utbildare

Photo background under a fixed teal to ink gradient: linear-gradient(155deg, rgba(61,100,120,0.72), rgba(38,51,61,0.92)), lightening on hover. White text always.

Marquee · dark strip, 40s loop, Signal accents

10 000+ verifierade kurser 200+ betrodda utbildare 400 000+ utfärdade intyg Varje intyg verifierbart vid källan 10 000+ verifierade kurser 200+ betrodda utbildare 400 000+ utfärdade intyg Varje intyg verifierbart vid källan

Source: .btn, .badge, .eyebrow, .hero-search, .cat-hero-stat, .section-link, .card, .cat, and .marquee in global.css. Marquee copy and numbers are the live site's own.

09 · Navigation & footer

Light head, dark foot.

The nav is sticky and translucent: the page background at 92% opacity behind a 20 px blur, with a 1 px border below. The footer is the one large dark surface, ink dark with a huge headline and a yellow accent word.

Navigation spec

Sticky, rgba(234,239,242,0.92) + backdrop-filter: blur(20px), bottom border.
Lockup left. Links 14px/500. A ghost pill button on the right.
Categories open a two column dropdown panel: white, radius 16px, soft shadow.
Language switcher: outlined pill with a globe, dropdown menu radius 12px.

Footer headline at clamp(40px, 6vw, 72px), weight 600, with the accent word in yellow. Below it: a five column link grid, then the legal line.

Source: .nav and .footer in global.css, Footer.astro, and the shipped homepage. Note: the live footer carries no Powered by TRUE strip. The only TRUE attribution on the live site is a quiet text link on the 404 page.

10 · Language

Swedish first. English at /en.

The site ships Swedish as the default language on the root domain and English under /en, declared with hreflang. Anything written for True Upskill exists in both, and the Swedish version is the primary one.

Surface	Swedish (default)	English (/en)
Hero H1	Lär dig idag. Bevisa det för alltid.	Learn today. Prove it forever.
Title tag	True Upskill - Verifierade kurser från ledande utbildare	True Upskill - Verified courses from leading providers
Footer ask	Är du utbildare?	Are you a training provider?
Legal line	Verifierade kurser du kan lita på.	Verified courses you can trust.

Source: <html lang="sv">, hreflang tags, and page copy fetched from trueupskill.com and trueupskill.com/en on 2026-07-25.

11 · Voice & tone

Curated. Concrete. Never hype.

Upskill speaks to the learner, not the educator. Confident but never loud. Everything must be provable: if we say verified, it can be verified. The real numbers, from the site itself: 10 000+ verified courses, 200+ trusted educators, 400 000+ credentials issued.

Do · all lines below ship on the live site

Say what it is.

Concrete over abstract. Course names, educator names, real numbers.

"Lär dig idag. Bevisa det för alltid." · "Learn today. Prove it forever."
"Riktiga människor. Äkta diplom." · "Real people. Authentic diplomas."
"Tre löften." · "Three promises."
"200+ betrodda utbildare. 10 000+ verifierade kurser."

Don't

Hype, jargon, or filler.

No superlatives, no urgency tricks, no "in today's world."

"Unlock your potential"
"World-class learning platform"
"Revolutionary credential marketplace"
"Discover your future today"

The look, sound, and feel of True Upskill.