Build ClubBrand Kit
SolarisSolaris
.md
PRODUCT

Solaris

The enterprise home for your builders.

01

Overview

The Solaris product brings a private Build Club community, learning, and tooling into the enterprise — a single, premium surface for a company's builders.

01
Warm canvas

Cream and white surfaces keep the product light, calm, and welcoming.

02
Editorial

Brawler headlines and generous spacing give the interface a clear hierarchy.

03
Clear actions

Orange carries warm brand moments, while purple carries action text and controls.

03

Color

Primary
Orange#F4892C
Secondary
Purple#5A55E4
Neutral
Neutral#464246

Surfaces

Background#F7F0EA
Card#FFFFFF
Paper#F8F8F2
Muted#FBFAFA
Border#F2F1F3
#F4892C
Orange · 700
PrimaryExact
HEX#F4892C
RGBrgb(244, 137, 44)
Tokencore/orange/700

Ramps

OrangePrimarycore/orange
PurpleSecondarycore/purple
NeutralNeutralcore/neutral· Global

Gradients

Click to inspect the stops, direction, and CSS.

Elements

Content-type colors. Each pairs a deeper tone with a lighter tint — reverse background/icon as needed.

Functional

System states — a light surface with a deep icon, or reversed.

Levelling

The Solaris product uses purple for the learning ladder.

Tier / Leaderboard

Rank tiers shared across brands — each a metallic gradient.

Core tokens

The interface tokens used by Solaris Product.

04

Typography

The standard product page title uses Brawler at 32px with the semibold product weight, 130% line height, and −0.64px tracking.

Use the 24px regular style for a page section and the 18px regular style for a card header. Solaris Product uses no separate mono face.

AgDisplay
Brawler
See brand scale below
AgBody
DM Sans
150% line height · 0% tracking
012Utility
DM Sans
Numerics and utility labels
Page titleExplore
Detail titleProject details
Section titleContinue learning
Card titleUpcoming events
BodyKeep building with your team.
InterfaceView all
CaptionUpdated today
PillIN PROGRESS
05

Voice & Tone

ConsideredConfidentRefined
Do
  • Write with authority and calm.
  • Use the serif for headlines; keep body crisp.
  • Use the cream canvas, pastel wash, and restrained product accents.
Don't
  • Don't use playful or pixel motifs.
  • Don't crowd the layout — space is the luxury.
  • Don't go dark; Solaris is light and airy.
06

Motifs & Backgrounds

Pastel wash on cream

A lavender-to-peach wash fades into a warm cream canvas. A quiet starburst keeps the Solaris mark present.

07

Layout & Spacing

The cream page canvas frames the interface. Put each content group on a white card with a Mist hairline, as the product homepage does.

Continue learning

Practical AI foundations

Continue the course with your team.

60%

Surface rules

Section card12pxOne content group on the page canvas
Control8pxButtons, fields, tabs, and nested cards
Card inset16pxThe default content padding
Page gutter24–40pxMobile to desktop page spacing
08

UI Components

Actions and controls

Large actions · 40px
Compact actions · 32px
States and icon actions
Tabs
Search and input
Selection
Include completedRecommendations
09

Accessibility

Test the pairs in the product patterns where they appear. Do not use an abstract palette card as proof of an accessible interface.

Solaris product text uses Char, Purple, or a defined status foreground. Yellow and orange stay out of interface text.

Contrast checks

Card copyHeadings and body text on a card9.87:1AAA
Page copyHeadings and body text on the page canvas8.74:1AAA
Brand actionThe label on a brand button5.45:1AA
Primary actionThe label on a tinted primary button5.12:1AA
Supporting copySecondary text on a card4.49:1Large only
Info labelA blue label on its light-blue surface4.43:1Large only
Product issue: Supporting copy and Info label do not meet AA for normal text. Use these pairs only for large text until the product foreground tokens become stronger.