Jupiter Learning Ltd

Brand Guidelines · v1.2 · October 2026

Brand guidelines

The visual system for Jupiter Learning — colour, typography, spacing and core components 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
rgb(246, 114, 43)
oklch(0.70 0.18 45)
--primary

Ink

Foreground · headings and body text

#0B0B0D
rgb(11, 11, 13)
oklch(0.15 0.005 280)
--foreground

Warm White

Background · page canvas

#FAFAF9
rgb(250, 250, 249)
oklch(0.985 0.002 90)
--background

Card White

Surface · cards, panels, header

#FFFFFF
rgb(255, 255, 255)
oklch(1 0 0)
--card

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 — as implemented on primary buttons
Jupiter Orange on Warm White	`2.73 : 1`	Below AA — avoid for small text

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

Design tokens

Copy-paste block for any new build. Authored in OKLCH to match the live implementation.

/* Jupiter Learning — design tokens */
:root {
  /* brand */
  --primary:              oklch(0.70 0.18 45);   /* #F6722B */
  --primary-foreground:   oklch(1 0 0);          /* #FFFFFF */
  --ring:                 oklch(0.70 0.18 45);   /* #F6722B */

  /* surfaces */
  --background:           oklch(0.985 0.002 90);  /* #FAFAF9 */
  --card:                 oklch(1 0 0);          /* #FFFFFF */
  --popover:              oklch(1 0 0);          /* #FFFFFF */
  --secondary:            oklch(0.965 0.003 280); /* #F3F3F5 */
  --muted:                oklch(0.965 0.003 280); /* #F3F3F5 */
  --accent:               oklch(0.965 0.003 280); /* #F3F3F5 */

  /* text */
  --foreground:           oklch(0.15 0.005 280);  /* #0B0B0D */
  --muted-foreground:     oklch(0.55 0.02 280);   /* #6F717D */

  /* lines */
  --border:               oklch(0.15 0.005 280 / 0.08);
  --input:                oklch(0.15 0.005 280 / 0.08);

  /* system + data */
  --destructive:          oklch(0.577 0.245 27.325); /* #E7000B */
  --chart-1:              oklch(0.646 0.222 41.116); /* #F54A00 */
  --chart-2:              oklch(0.600 0.118 184.704); /* #009689 */
  --chart-3:              oklch(0.398 0.070 227.392); /* #104E64 */

  /* shape */
  --radius:               0.625rem;              /* 10px */

  /* type */
  --font-heading:         "Sora", sans-serif;
  --font-body:            "Manrope", sans-serif;
}