Design system

The daylight smithy.

Cool paper canvas, white cards, quenched-teal actions, struck with forge-orange only where it counts. One dark surface remains: the deep-quench panel, for the sidebar and the closing strike. Every token, type ramp, and component lives here.

Identity

The mark: the forge swallow

Mark
RanksmithLockup
Ranksmith

Color

Forge palette

Forge, the strike

300

#ff9b6e

400

#ff7d47

500

#ff6b35

600

#ed4f15

700

#c43c10

Primary, the everyday action

400

#2dd4bf

500

#14b8a6

600

#0d9488

700

#0f766e

800

#115e59

Molten, the heat

300

#ffe08a

400

#ffce4d

500

#ffb800

600

#e09b00

Steel: text, heading → faint

100

#0d1f22

200

#22363a

300

#3b4f52

400

#5c7073

500

#839597

Ink: surfaces, canvas → edge

950

#f6f8f8

900

#ffffff

850

#eff3f3

700

#e3e9e8

600

#d3dcdb

Type

Lora display · Inter UI

Lora, display

Glāžšķūņa rūķīši

Glāžšķūņa rūķīši dzērā jāņtārpiņu žāvētās aknas.

Inter, UI / body

The quick brown fox

Ranksmith turns raw keyword ore into ranked, revenue-driving content. Inter carries every interface surface (dense tables, dashboards, and forms) at a calm, legible weight.

Components

Buttons

Components

Badges, surfaces & gauges

ForgeMoltenSteelApproved

Card · hover + glow

Glass surface that lifts and gains a forge edge on hover.

SpotlightCard

Move your pointer across me: the glow follows.

84score

Principles

Motion & restraint

  • Forge-orange is rare. Reserved for CTAs and active states, never decoration.
  • Every action answers. Press, hover, and reveal all carry spring-eased feedback.
  • Reduced-motion first. All animation collapses gracefully when the OS asks.
  • No spinners. Loading is shimmer; empty is illustrated.