Jupiter Learning Ltd

Brand guidelines

The visual system for Jupiter Learning — colour, typography, spacing and core components, plus the AI that Lands alternate palette, recorded exactly as implemented on the live site. Use this sheet as the single source of truth for any new page, deck, document or asset.

Logo

The lockup is a solid orange square mark set alongside the wordmark in Sora SemiBold. The mark carries a soft orange glow, which is the one place the brand uses a shadow decoratively.

Primary lockup

Jupiter Learning

On dark

Jupiter Learning

Element	Specification
Mark	`24 × 24px · border-radius 4px · fill #F6722B`
Mark glow	`box-shadow: 0 0 15px rgba(249,115,22,.3)`
Wordmark	`Sora SemiBold 600 · 18px · letter-spacing −0.45px`
Gap	`8px between mark and wordmark`
Clear space	`Minimum 24px (1× mark height) on all sides`
Minimum size	`Mark 16px · full lockup 120px wide`

Colour

A warm near-white canvas, near-black text and a single high-energy orange. Orange is the only saturated colour in the core palette — it marks the one thing you want clicked or read on a given screen. Colours are authored in OKLCH; hex values are the sRGB equivalents.

Core palette

Jupiter Orange

Primary · CTAs, links, focus rings, accents

#F6722B
oklch(0.70 0.18 45)

Ink

Foreground · headings and body text

#0B0B0D
oklch(0.15 0.005 280)

Warm White

Background · page canvas

#FAFAF9
oklch(0.985 0.002 90)

Card White

Surface · cards, panels, header

#FFFFFF
oklch(1 0 0)

Neutrals

Mist

Muted / secondary / accent surface

#F3F3F5
oklch(0.965 0.003 280)

Slate

Muted foreground · supporting copy, labels

#6F717D
oklch(0.55 0.02 280)

Hairline

Borders, dividers, input strokes

rgba(11, 11, 13, 0.08)
oklch(0.15 0.005 280 / 0.08)

Extended · data & system

Data Orange

Chart 1

#F54A00

Teal

Chart 2

#009689

Deep Blue

Chart 3

#104E64

Alert Red

Destructive · errors only

#E7000B

Measured contrast (WCAG 2.1)

Combination	Ratio	Status
Ink on Warm White	`18.83 : 1`	Passes AAA
Ink on Mist	`17.74 : 1`	Passes AAA
Ink on Jupiter Orange	`6.89 : 1`	Passes AA
Slate on Warm White	`4.64 : 1`	Passes AA
White on Jupiter Orange	`2.85 : 1`	Below AA
Jupiter Orange on Warm White	`2.73 : 1`	Below AA

Recorded for reference. Orange is a display and interaction colour, not a text colour at small sizes — reserve it for fills, rules, icons and large type. Where orange must carry text, Ink reads cleanly on it; white does not.

Typography

Two typefaces, both open-source and available from Google Fonts. Sora sets every heading and the wordmark — geometric, slightly technical, tightened with negative tracking at display sizes. Manrope carries all body copy, labels and UI text at default tracking.

Sora

Headings, wordmark, section titles. Weights 500–600. Always apply negative letter-spacing at 18px and above.

Aa 400Aa 500Aa 600Aa 700

Manrope

Body copy, buttons, navigation, captions, eyebrows. Weights 400–700. Default tracking, except uppercase eyebrows at +2px.

Aa 400Aa 500Aa 600Aa 700

Type scale

Display / H1Sora · 600 60px / 75px −1.5px

Build product education

H2 largeSora · 600 36px / 40px −0.9px

Ready to educate your customers?

H2 sectionSora · 600 30px / 36px −0.75px

How we help you scale

H3 / card titleSora · 500 18px / 28px normal

Curriculum Design

WordmarkSora · 600 18px / 28px −0.45px

Jupiter Learning

Lead paragraphManrope · 400 18px / 29.25px normal

We help technology companies turn complex products into education their customers actually finish.

BodyManrope · 400 16px / 24px normal

From initial content strategy to a fully built learning programme, delivered as a system your team can run without us.

Body smallManrope · 400 14px / 22.75px normal

Strategic learning paths mapped to the moments where customers get stuck.

Label / buttonManrope · 600 14px / 20px normal

Book a Consultation

Inline linkManrope · 600 12px / 16px normal

Learn more →

EyebrowManrope · 700 10px / 15px +2px · uppercase

Trusted by growing product teams

Components

One primary action per view. Everything else is secondary or ghost.

Buttons

Book a ConsultationBook a Strategy CallLearn more

Padding	`10px 20px`
Radius	`6px`
Type	`Manrope 600 · 14px`
Focus ring	`0 0 0 1px #F6722B`

Navigation links

HomeServicesAbout (hover)

Type	`14px · weight 500 · line-height 20px`
Default	`#0B0B0D / muted #6F717D`
Hover	`#F6722B`
Gap	`32px between items · header height 64px`

Shape, space & elevation

Base radius token is 0.625rem (10px); component radii derive from it. Spacing follows a 4px base unit. Elevation is deliberately minimal — flat surfaces separated by hairline borders, not shadows.

Corner radius

4px · mark

6px · buttons, inputs

10px · cards

full · pills, avatars

Spacing scale (4px base)

2
8

3
12

4
16

6
24

8
32

12
48

16
64

20
80

Elevation & layout

Token	Value	Use
Border / divider	`1px solid rgba(11,11,13,.08)`	Cards, sections, header, inputs
Shadow — subtle	`0 1px 3px rgba(0,0,0,.1), 0 1px 2px −1px rgba(0,0,0,.1)`	Secondary buttons, raised cards
Shadow — brand glow	`0 0 15px rgba(249,115,22,.3)`	Logo mark only
Content width	`max-width 1280px (7xl)`	All page sections
Gutter	`24px horizontal padding`	All page sections
Header height	`64px`	Fixed across all pages

AI that Lands · alternate palette

The AI education offer runs on a dark variant of the system, used only on AI that Lands pages and assets. Type, spacing and the logo stay the same. What changes: the canvas goes dark, and Signal Cyan replaces Jupiter Orange as the action colour. Orange stays in as a small secondary accent. Recorded 16 September 2026 from /ai.

AI that Lands

AI capability your teams actually use.

We design AI education programmes that move people past novelty, building the literacy, judgement and workflows needed to get dependable value from AI tools.

Book an AI Readiness CallSee live sessions

Prompt Craft Labs

Hands-on sessions against the team's own real workflows.

AI-Native Workflows

Rebuild processes around AI instead of adding it to old habits.

Safer

Orange as the secondary accent, on outcome icons only

Alternate palette

Signal Cyan

Primary action · CTAs, eyebrows, icons, hover rings

#17D0D8
oklch(0.78 0.13 200) · --color-brand-cyan

Night Ink

Page background for AI that Lands

#0D151C
oklch(0.19 0.02 250) · --color-surface-ink

Deep Night

Band sections · text on cyan buttons

#040A11
oklch(0.14 0.02 250) · --color-surface-ink-deep

Mist (as text)

Headings and body copy on dark

#F3F3F5
oklch(0.965 0.003 280) · text-zinc-100

Haze

Muted copy on dark · supporting text

#A2A3B1
oklch(0.72 0.02 280) · text-zinc-400

Jupiter Orange

Secondary accent only · outcome icons, logo mark

#F6722B
oklch(0.70 0.18 45) · --color-brand-orange

Translucent layers (white or cyan over Night Ink)

Layer	Value	Use
Hairline	`white / 10%`	Section borders, card and image rings
Card surface	`white / 3%`	Programme cards
Secondary button	`white / 5% · ring white / 15%`	Every non-primary action; hover goes to white / 10%
Icon tile	`cyan / 10% · 10px radius`	40px tile behind cyan icons
Card hover	`ring cyan / 40% · lift 4px`	Interactive cards
Hero glow	`cyan / 10% · blur-3xl · 512px circle`	One per page, top of hero. The only decorative effect
Text selection	`cyan / 20%`	Page-wide

Measured contrast (WCAG 2.1)

Combination	Ratio	Status
Mist on Night Ink	`16.67 : 1`	Passes AAA
Deep Night on Signal Cyan	`10.45 : 1`	Passes AAA
Signal Cyan on Night Ink	`9.69 : 1`	Passes AAA
Haze on Night Ink	`7.42 : 1`	Passes AAA
Jupiter Orange on Night Ink	`6.46 : 1`	Passes AA
Signal Cyan on Warm White	`1.82 : 1`	Fails

The dark palette fixes the orange-button contrast problem in the core system: cyan buttons with Deep Night text pass AAA. Cyan does not work on the light canvas, so never use it there.

Rules

Only on AI that Lands. Core Jupiter pages stay light and orange.
One saturated action colour. Cyan marks the thing to click. Orange appears only as a small accent, never on a button.
Buttons and cards have square corners (0 radius), unlike the 6px/10px core radii. Icon tiles and images keep 10px.
Primary button: cyan fill, Deep Night text, Manrope 600 14px, 10px 20px padding (12px 32px for the closing CTA).
Eyebrow: Manrope 600, 12px, wide tracking, uppercase, in cyan with a sparkle icon.
Logo mark stays orange everywhere, including on dark.
Keep to Night Ink and Deep Night for backgrounds. Don't add gradients or extra hues.

Tokens · AI that Lands

/* AI that Lands — alternate palette (inside @theme inline) */
--color-brand-cyan:        oklch(0.78 0.13 200);   /* #17D0D8 Signal Cyan */
--color-surface-ink:       oklch(0.19 0.02 250);   /* #0D151C Night Ink */
--color-surface-ink-deep:  oklch(0.14 0.02 250);   /* #040A11 Deep Night */
/* text on dark uses existing tokens */
--color-zinc-100:          oklch(0.965 0.003 280); /* #F3F3F5 Mist */
--color-zinc-400:          oklch(0.72 0.02 280);   /* #A2A3B1 Haze */
--color-brand-orange:      oklch(0.70 0.18 45);    /* #F6722B accent only */