UI

BrowserPod’s interface is built from two signature surfaces, Liquid Glass (the panel) and the Blueprint Grid (the backdrop), with neumorphic treatment for controls that invite touch. The specs, the working specimens and the code are all on this page.

The specimens below are the real components, running live. Drag the dividers inside the IDE; watch the grid lines bend through the bezel.

Liquid Glass

The glass is not a flat translucency. It blurs and subtly refracts whatever sits behind it (the grid lines visibly bend through the bezel), is tinted cool grey, and catches light on its top edge. The refraction is what keeps it liquid; without it you have frosted plastic.

Glass comes in two grades, the panel and the card, and every glass surface in the product is one or the other. Two grades exist for one reason: the refraction is the signature of the style, and it is too expensive to run on more than a surface or two. So the hero moment on a page gets the full effect, and every other glass surface is a quieter echo of the same recipe. The differences between the columns below all follow from that: the panel keeps its blur low so the refraction stays visible, while the card, having no refraction, does its softening with a stronger blur and draws its edge with a rim instead.

	The panel	The card
Use	The one or two hero moments on a page	Every repeated glass surface below the fold
Refraction	Yes; the grid bends through it	No
Blur	blur(4px) saturate(150%)	blur(12px) saturate(140%)
Glass Wash	Full strength, 5% peaking at 20%	Faint, 5% dipping to 1.5%
Tint	#D7DADD at 12%	None
Edge light	Inset highlights, top and bottom	1px conic rim, bright at the light-catching angles
Corner radius	30px outer, 24px inner panel, 16px bezel between	20px

Two notes on the panel’s geometry. The bezel is just padding: the glass shows as a 16px rim around the inner panel; keep the outer radius roughly equal to inner radius plus bezel, and use one value everywhere. Inside it, the content pane runs #0D0D0E at 80% with a #27272A border in dark, or white at 55% with a #9CB0EF border in light.

The panel is running live at the top of this page. This is the card, the actual class from Building it, over the brand world:

The Glass Wash: the one permitted gradient

The brand’s no-gradients rule has exactly one exception, and this is it. The Glass Wash is the diagonal band of light that every glass surface carries; you can see it live on the light specimen above, as the soft sheen crossing the panel. It is permitted because it is not a colour blend: it modulates the opacity of a single colour (white on light glass, black on dark glass) and never travels between two hues. It is light, not colour.

Three things about it are fixed, whatever the surface:

• One colour. Pure white or pure black at every stop; only the opacity moves.
• One angle. −75°: the axis leans 75° anticlockwise from vertical, so the band crosses the surface as a diagonal stripe, consistent with light entering high and to the right.
• Soft stops. The opacity glides between values; never a hard edge.

At full strength, on the panel:

/* Light glass; dark glass swaps every 255,255,255 for 0,0,0 */
background: linear-gradient(
  -75deg,
  rgba(255, 255, 255, 0.05) 0%,
  rgba(255, 255, 255, 0.20) 50%,
  rgba(255, 255, 255, 0.05) 100%
);

The wash appears at exactly three intensities, one per glass expression, and these are the “permitted gradients” the Color rules refer to:

Where	The wash, as
The panel	The band above at full strength: 5%, peaking at 20% mid-surface
The card fill	A faint veil: 5%, dipping to 1.5%, rising to 6% (a touch brighter on hover)
The card rim	A 1px conic sweep from the same −75°: bright (40%) at the two light-catching angles, faint (6%) between

Nowhere else. Not in backgrounds, buttons, type, illustrations or the logo. If a surface that isn’t glass seems to need a gradient, it doesn’t; redesign the surface.

Blueprint Grid

The backdrop is engineering paper: 1px lines on a 56px cell, fading out radially from the top centre so the grid frames content without competing with it. This is the UI’s rendering of the kernel grid: structural, faint, never busy. It also appears in empty states.

Token	Value
Cell	56px × 56px, 1px lines
Fade mask	radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 78%)
Dark pairing	page #0D0D0E, lines rgba(255, 255, 255, 0.05)
Light pairing	page #B7CEFF, lines #9CB0EF (solid)

• Don’t recolour the grid ad hoc; the two pairings above are the approved set.
• Keep the 56px cell everywhere. The one sanctioned exception is the homepage closing CTA, which uses a smaller 44px echo.
• Keep the fade mask unless the grid deliberately fills a small contained panel edge to edge.

Neumorphism

Soft, extruded surfaces that appear pressed from or raised out of the background, used for controls: buttons, toggles, sliders, inputs, cards that invite touch. Shadows come in pairs (one light, one dark) implying a single consistent light source, top-left, across the whole product.

• Raised means interactive and available; inset means active, selected or receiving input.
• Keep the extrusion shallow. The effect should whisper; deep embossing turns it into a toy.

Rules of use

• Glass is for hero-level highlights. One or two full panels per page, max. Everything else gets the card or a flat dark surface, so the refraction stays special.
• Glass needs something behind it. The effect only reads over texture: always pair it with the grid or imagery, never a flat solid background.
• Match glass contrast to the page: dark glass on #0D0D0E, light glass on #B7CEFF. A dark IDE window on the light grid is fine, but the glass rim stays light.
• Portal Blue marks primary actions, focus rings and live Portals; accents follow their state meanings: yellow warns, coral errors, magenta emphasises.
• Type is Stack Sans Text per the typography rules: Medium at 14 to 16px for controls, sentence case on all buttons and labels.
• Corner radii and spacing step by a repeating scale, honouring the pattern logic: pick a base unit and multiply, don’t eyeball.
• Motion loops and phases rather than playing once; easing is soft; nothing snaps.

Building it

Everything below is copy-paste ready. The specimens at /glass and /glass-light run exactly this.

The Blueprint Grid

Two repeating 1px lines draw the cells; a radial mask fades the grid out from the top centre.

.blueprint-grid {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 78%);
}

/* Light variant: solid periwinkle lines on the #B7CEFF page */
.blueprint-grid-light {
	background-image:
		linear-gradient(to right, #9cb0ef 1px, transparent 1px),
		linear-gradient(to bottom, #9cb0ef 1px, transparent 1px);
}

The glass card

For repeated content cards. The fill is a faint wash derivative, depth comes from the paired inset shadows, and the ::after pseudo-element draws the 1px rim, bright at the two light-catching angles.

.glass-card {
	position: relative;
	border-radius: 20px;
	isolation: isolate;
	background: linear-gradient(
		-75deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.015) 45%,
		rgba(255, 255, 255, 0.06)
	);
	backdrop-filter: blur(12px) saturate(140%);
	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, 0.06),
		inset 0 -1px 1px rgba(0, 0, 0, 0.4),
		0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

.glass-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(
		from -75deg,
		rgba(255, 255, 255, 0.4),
		rgba(255, 255, 255, 0.06) 5% 40%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0.06) 60% 95%,
		rgba(255, 255, 255, 0.4)
	);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

(Safari also wants the -webkit-mask and -webkit-mask-composite: xor twins on the rim, and -webkit-backdrop-filter on the fill.)

The full Liquid Glass panel

Four layers inside one rounded, overflow: hidden wrapper, back to front: a refraction layer that blurs and bends what’s behind, the Glass Wash, the tint, and the content. The content’s padding is the bezel.

<div class="glass-panel">
	<div class="glass-refraction"></div>
	<div class="glass-wash"></div>
	<div class="glass-tint"></div>
	<div class="glass-content">…</div>
</div>

<svg style="display: none;">
	<filter id="glass-distortion">
		<feTurbulence type="fractalNoise" baseFrequency="0.008" numOctaves="2" seed="92" result="noise" />
		<feGaussianBlur in="noise" stdDeviation="2" result="blurred" />
		<feDisplacementMap in="SourceGraphic" in2="blurred" scale="70" xChannelSelector="R" yChannelSelector="G" />
	</filter>
</svg>

.glass-panel {
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	isolation: isolate;
}

/* The liquid part: the SVG filter makes the blur wobble,
   which is what bends the grid lines through the bezel. */
.glass-refraction {
	position: absolute;
	inset: 0;
	backdrop-filter: blur(4px);
	filter: url(#glass-distortion) saturate(150%);
}

/* Light glass. See the Glass Wash section for the spec. */
.glass-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		-75deg,
		rgba(255, 255, 255, 0.05),
		rgba(255, 255, 255, 0.2),
		rgba(255, 255, 255, 0.05)
	);
	box-shadow:
		inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
		inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
		0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2);
}

.glass-tint {
	position: absolute;
	inset: 0;
	background: #d7dadd;
	opacity: 0.12;
}

.glass-content {
	position: relative;
	z-index: 1;
	padding: 16px; /* the bezel */
}

/* Dark glass: the wash runs in black and the highlights flip. */
.glass-panel.dark .glass-wash {
	background: linear-gradient(
		-75deg,
		rgba(0, 0, 0, 0.05),
		rgba(0, 0, 0, 0.2),
		rgba(0, 0, 0, 0.05)
	);
	box-shadow:
		inset 0 0.125em 0.125em rgba(254, 254, 254, 0.05),
		inset 0 -0.125em 0.125em rgba(0, 0, 0, 0.5),
		0 0.25em 0.125em -0.125em rgba(254, 254, 254, 0.2);
}

One warning: Safari cannot pair backdrop-filter with an SVG filter reference. Detect Safari and drop the filter line so it gets the same glass without refraction. Don’t remove that fallback.