Opacity and overlays · Inline design system

The alpha scale

Every translucent color is ink, Butter Yellow, or paper at a fixed percentage. The five ink steps ladder from a wash that is felt more than seen to a veil that covers the page.

Cities preserve monuments because they appear permanent. Removing one can reveal more about public memory than leaving it untouched. The debate became a question about who owns civic history, not only about the statue itself.

One ink, five strengthsalpha.ink-04 to ink-64

Over the draft32 dims the page, 64 covers it

Alpha tokens and their jobs
Token	Composition	Job
`alpha.ink-04`	ink-900 at 4%	Hover wash on quiet controls
`alpha.ink-08`	ink-900 at 8%	Pressed wash on quiet controls
`alpha.ink-16`	ink-900 at 16%	Keyline over tinted or unknown ground
`alpha.ink-32`	ink-900 at 32%	`bg.overlay`, the one dialog scrim
`alpha.ink-64`	ink-900 at 64%	Ink veil over marketing imagery
`alpha.brand-52`	brand-500 at 52%	Native text selection
`alpha.brand-strong-64`	brand-600 at 64%	Selection crossing a persistent mark
`alpha.paper-72`	paper at 72%	Paper wash over imagery, marketing only
`alpha.paper-88`	paper at 88%	Denser wash for full-bleed bands, marketing only

Rerun feedbackrest

Rerun feedbackhover a04

Rerun feedbackpressed a08

Quiet control washesalpha.ink-04 · alpha.ink-08

Paper washesmarketing imagery only

midnight stands in for a photo

One scrim

A blocking dialog dims the workspace with bg.overlay, ink at 32%, and nothing else ever does. Menus, popovers, and toasts separate with shadow alone; the shadow values and the dialog tier belong to elevation and shadow.

Blocking dialogbg.overlay · alpha.ink-32

Scrimbehind blocking surfaces only

Transient menushadow.overlay · no scrim

Canvaskeeps full contrast

No blur, no glass.

The scrim is flat ink over the page. Backdrop blur and glassmorphism do not exist anywhere in Inline, product or marketing.

Selection washes

Selection is a translucent Butter Yellow wash so words stay legible while marked, and it deepens when it crosses a persistent passage mark. The exact values and the highlight states are owned by color.

Cities preserve monuments because they appear permanent. Removing one can reveal more about public memory than leaving it untouched. The debate became a question about who owns civic history, not only about the statue itself.

Over textalpha.brand-52

Crossing a markalpha.brand-strong-64

Livedrag a selection across the paragraph

The edge fade

The question rail scrolls inside the workspace, so its clipped edge fades over 14px and a cut-off card reads as continuation. The fade exists only while content is actually clipped: at the true top and bottom it collapses, and the list never looks shorter than it is.

Argument01

What is the one claim this essay defends?

Evidence02

What evidence shows how residents described that change at the time?

Reasoning03

How does the archive example support the claim about memory?

Clarity04

Which reader is this paragraph written for?

Strength05

Which sentence does the most work, and what makes it work?

14px maskon the clipped edge only

At the endsthe fade collapses

without JavaScript both edges keep a static fade

.question-rail {
  overflow-y: auto;
  --fade-top: 14px;     /* static fallback on both edges */
  --fade-bottom: 14px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black var(--fade-top),
    black calc(100% - var(--fade-bottom)),
    transparent
  );
}

/* A scroll listener toggles these within 2px of each
   true end, and again on load and resize, so the list
   never looks shorter than it is. */
.question-rail.is-at-top    { --fade-top: 0px; }
.question-rail.is-at-bottom { --fade-bottom: 0px; }

The mask sits on the scroll container, so the fade stays fixed to the scrollport while cards move beneath it. The draft itself never fades; it sets the page height and is never clipped.

Disabled is a color

Disabled states recolor, they never fade. Text drops to ink-400 and a disabled primary fill drops to ink-200 with paper text, both defined as tokens, so contrast is chosen rather than accidental.

Do recolor: the fill drops to ink-200 with paper text, and disabled text drops to ink-400.

Don't fade the control with opacity. Every child dims by the same factor and the ground bleeds through the fill.

Rules

Eight checks keep transparency rare enough to mean something.

Opaque by default. Transparency is a named job, never a style.
One scrim. bg.overlay sits behind blocking dialogs only; menus, popovers, and toasts never dim the page.
No blur. Backdrop blur and glassmorphism do not exist anywhere in Inline.
Keep washes quiet. Hover is ink at 4%, pressed is ink at 8%; nothing stronger on an in-flow control.
Disabled recolors. Use ink-400 text and the ink-200 fill; never fade a control with opacity.
Fade only clipped edges. The 14px edge fade appears only while content is cut and collapses at the true ends.
Keep paper washes out of the product. 72% and 88% paper serve imagery and full-bleed bands in marketing only.
Reject local alphas. New percentages do not exist; compose from the nine alpha tokens.