Design Language System for JshMllr.com
01 — Foundations
All UI color derives from the custom 12-step sage scale. Emerald is the site's only accent — used sparingly because it is rare.
sage-100
#101211
App background
sage-200
#171918
Subtle / card inner background
sage-300
#202221
UI element background, code bg
sage-400
#272a29
Hovered UI element background
sage-500
#2e3130
Active / selected background
sage-600
#373b39
Subtle borders and separators
sage-700
#444947
UI element border, focus rings
sage-800
#5b625f
Hovered borders, image borders
sage-900
#63706b
Solid backgrounds
sage-1000
#717d79
Hovered solid backgrounds
sage-1100
#adb5b2
Low-contrast / secondary text
sage-1200
#eceeed
High-contrast / primary text
emerald-400
#34D399
Primary accent, links, hover
emerald-500
#10B981
Blockquote borders, link text
emerald-400/20
rgba(52,211,153,0.2)
Tinted glow / nav button fill
TASAOrbiterDisplay
Headings
TASAOrbiterText
Body text
Miller Display
Pull quotes
font-miller-display italic text-sage-1200 text-2xl leading-[110%]
text-4xl md:text-6xl font-display
text-3xl font-display
text-xl font-bold font-display
Default
text-base font-text text-sage-1200
Small
text-sm font-text text-sage-1100
Shadow stacking simulates lift on dark backgrounds. Surface types compose elevation tokens with optional GPU refraction for dark glass.
Flush with the page. A hairline ring is the only depth cue. Use for inline panels, code blocks, and subtle separators.
Hover the card
The default card. A top-edge highlight and a single drop at rest; gains a second drop and an outer edge on hover.
Hover the card
The hero card. Full stacking penumbra plus a 40px ambient drop. GlareEffect gradient lines sit on top. Hover adds emerald glow.
Hover the card
GPU-rendered refraction replaces backdrop-blur. The stacking system still handles elevation; liquidglass handles optics — edge highlight, fresnel, chromatic aberration.
Scrub through elevation levels. Hover a layer to isolate it on the preview.
elevation-2
Default card at rest. Soft top-edge highlight with a single 1px drop.
01
Fake the light, not the dark
On a dark surface a black drop shadow is almost invisible. The perceived lift comes from the inset top highlight — a sliver of sage-1200 that reads as light hitting the top edge.
02
Stack, don't blur
Each step adds a new drop layer with double the offset and blur of the previous one, clipped by a negative spread. That produces a natural penumbra instead of one muddy blur.
03
Ring before shadow
A 1px inset ring defines the silhouette first. Without it, low-elevation cards dissolve into the background. The ring alpha ramps with elevation to keep edges legible as the surface rises.
highlight
inset 0 1px 0 0 rgba(236,238,237,0.02)
ring
inset 0 0 0 1px rgba(236,238,237,0.02)
drop
0 1px 1px -0.5px rgba(0,0,0,0.18)
box-shadow: inset 0 1px 0 0 rgba(236,238,237,0.02), inset 0 0 0 1px rgba(236,238,237,0.02), 0 1px 1px -0.5px rgba(0,0,0,0.18);
Live · Dark Glass card
Resting card
Default card at rest. Soft top-edge highlight with a single 1px drop.
inset 0 1px 0 0 rgba(236,238,237,0.02), inset 0 0 0 1px rgba(236,238,237,0.02), 0 1px 1px -0.5px rgba(0,0,0,0.18)Menu
Floating menus, command palettes. Four drops; the surface feels airborne.
inset 0 1px 0 0 rgba(236,238,237,0.08), inset 0 0 0 1px rgba(236,238,237,0.04), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px rgba(0,0,0,0.18), 0 3px 3px -1.5px rgba(0,0,0,0.18), 0 6px 6px -3px rgba(0,0,0,0.18), 0 12px 12px -6px rgba(0,0,0,0.18)Glass card
Hero cards with full penumbra stack and ambient drop.
inset 0 1px 0 0 rgba(236,238,237,0.05), inset 0 0 0 1px rgba(236,238,237,0.04), 0 0 0 1px rgba(0,0,0,0.14), 0 1px 1px -0.5px rgba(0,0,0,0.18), 0 3px 3px -1.5px rgba(0,0,0,0.18), 0 6px 6px -3px rgba(0,0,0,0.18), 0 12px 12px -6px rgba(0,0,0,0.18), 0 24px 24px -12px rgba(0,0,0,0.18), 0 40px 80px rgba(0,0,0,0.5)Dark Glass card
GPU refraction with elevation stacking. edgeHighlight and fresnel replace the inset highlight.
inset 0 1px 0 0 rgba(236,238,237,0.06), inset 0 0 0 1px rgba(236,238,237,0.04), 0 0 0 1px rgba(0,0,0,0.16), 0 1px 1px -0.5px rgba(0,0,0,0.18), 0 3px 3px -1.5px rgba(0,0,0,0.18), 0 6px 6px -3px rgba(0,0,0,0.18), 0 12px 12px -6px rgba(0,0,0,0.18), 0 24px 24px -12px rgba(0,0,0,0.18), 0 40px 80px rgba(0,0,0,0.5)Standard card
Default resting card with a single drop.
inset 0 1px 0 0 rgba(236,238,237,0.02), inset 0 0 0 1px rgba(236,238,237,0.02), 0 1px 1px -0.5px rgba(0,0,0,0.18)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>Default
Design is not just what it looks like and feels like. Design is how it works.
<PullQuote >Example</PullQuote>Default
<AudioPlayer >Example</AudioPlayer>Dark Glass
<AudioPlayer >Example</AudioPlayer>Dark Glass
GPU refraction with CSS elevation stacking — opt-in per instance.
<GlassCard >Example</GlassCard>