Panels and surfaces
Everything sits on panels of dark glass over the moving gradient. Content panels carry Jewel’s signature corner: two hairlines cut through the top right.
- CSS
css/components/panel.css, css/components/knockout.css, css/background.css
01 — Glass and solid
Two surfaces
Glass (the default) is 86% near-black with a 24px blur, so the color behind it glows through. Solid is fully opaque. Same panel, same text colors; only the surface tokens change.
Glass · default
The background glows through, softly.
Solid · data-panel="solid"
Nothing shows through.
When to use solid
- Over photography, where color showing through would compete with the photo.
- For print, where blur doesn’t exist.
- Where blur is too costly: very large panels on low-powered phones.
- Everywhere else, use glass. Put
data-panel="solid"on any element and everything inside it switches.
02 — Panel shapes
Content panel
Any panel directly inside .panel-stack, or one with .panel--content: square top left, a 2px top right with the knockout lines, and 10px bottom corners.
Content panel.
Plain panel
Every other panel is square: cards, nested panels, the header.
Plain panel.
Knockout on anything
.knockout cuts the two lines into any element. .no-knockout removes them from a content panel. The lines are real holes, so the background shows through.
.knockout on a plain panel
.no-knockout on a content panel
03 — Background
The gradient
The five Jewel colors drift slowly behind every page. It’s the only expressive element in the system. It freezes for people who prefer reduced motion, and data-bg="paused" on <html> stops it.
Markup
Put the background and the cap first in <body>. The cap hides content scrolling in the gap above the sticky header.
04 — Shadow
Almost none
Separation comes from glass and hairlines. One soft shadow exists for things that float over content.
--shadow-none
--shadow-float
05 — Usage
Use it for
- Glass panels for all content.
- Content panels in a
.panel-stack, with the gradient showing between them. - Solid panels over photos and in print.
Avoid
- Panels inside panels with their own backgrounds. Nest plain blocks, or use hairlines.
- Shadows to separate things.
- Pop-ups that hang outside a content panel. The knockout mask clips them; open them with
Jewel.float().
06 — Tokens
| Token | Value | What it’s for |
|---|---|---|
--panel-radius | All panels | |
--panel-radius-top-right | Content panel, knockout corner | |
--panel-radius-bottom | Content panel, bottom corners | |
--knockout-offset | Corner to first line | |
--knockout-width | Line thickness | |
--knockout-gap | Space between the lines | |
--glass-blur | Glass blur | |
--glass-saturate | Glass saturation | |
--glass-fill | Glass fill | |
--bg-speed | One cycle of the gradient | |
--bg-intensity | Strength of the gradient | |
--bg-blur | Extra softening | |
--bg-dim | Dark scrim over the gradient | |
--shadow-none | Default | |
--shadow-float | Floating things |