Logo

Orbit

Design Language System for JshMllr.com

ColorsTypographyComponentsRich Text

Colors

Sage Scale

#101211

App background

#171918

Subtle background

#202221

UI element background

#272a29

Hovered UI element background

#eceeed

High-contrast text

Semantic Colors

#34D399

Success, Primary action

#34D399

Text selection highlight

Gradients

bg-gradient-radial from-[rgba(17,184,131,0.1)] via-[rgba(16,74,56,0.1)] to-[rgba(16,18,17,0.1)]

Footer background

Typography

Fonts

TASAOrbiterDisplay

Headings

TASAOrbiterText

Body text

Miller Display

Pull quotes

Headings

h1

text-4xl md:text-6xl font-display

h2

text-3xl font-display

h3

text-xl font-bold font-display

Body

Default

text-base font-text text-sage-1200

Small

text-sm font-text text-sage-1100

Components

Button

Default

Default Button
<Button >Example</Button>

Glass

Glass Button
<Button >Example</Button>

With Icon

Icon Button
<Button >Example</Button>

Large

Large Button
<Button >Example</Button>

Rich Text Components

Blockquote

Default

A well-designed system is not simply a collection of these components. It is more than the sum of its parts.

<BlockQuote >Example</BlockQuote>

Pull Quote

Default

Design is not just what it looks like and feels like. Design is how it works.
- Steve Jobs
<PullQuote >Example</PullQuote>

Audio Player

Default

Listen to Example Audio (1.2x)
<AudioPlayer >Example</AudioPlayer>

Project Card

Default with Hover

Example Project

Project description goes here

<ProjectCard >Example</ProjectCard>