Surface 8-Material Taxonomy & Gatekeepers
Why professional desktop interfaces require physical materiality; the rendering pipeline, typical target and cost of eight materials such as refraction, glass, acrylic and mica, the absolute rule for the default material and the confirmation gatekeeper for switching.
Surface 8-Material Taxonomy & Gatekeepers
Flat design eliminated spatial depth, while early skeuomorphism created visual clutter. Tuff introduces "sub-surface materiality" to establish lightweight yet grounded spatial order.
Why Professional Desktop UIs Require Sub-surface Materials
Physical materiality is an intuitive cognitive anchor, not decorative garnish:
- Spatial Continuity: Transmitting ambient cues through translucent media preserves awareness of underlying context.
- Depth Hierarchy: Varying refractive indexes and blur radii immediately communicate focal boundaries.
- Cognitive Relief: Translucent surfaces relieve visual tension compared to monolithic solid blocks.
The 8-Material Physical Matrix
TxBaseSurface's mode (BaseSurfaceMode) takes nine values, but pure and flat paint the same material, so there are eight. Each is built from a few layers: the glass layer (TxGlassSurface) for glass and refraction, a backdrop-filter layer for blur, acrylic and refraction, a tint layer for mask and acrylic, and a refraction rim on refraction alone; mica and flat paint the container itself, and plain paints nothing.
| Surface Mode | Rendering Pipeline (Default Parameters) | Physical Metaphor | Typical Target & Cost |
|---|---|---|---|
refraction (Default) | Glass layer: an SVG displacement map shifts R, G and B apart (dispersion); over it a backdrop blur-and-saturation layer and highlights placed by the light position, then a 1px refraction rim | Crystalline Prism | The default of every component with a surface layer: cards, the flip overlay and every pop-up panel. Both layers sample the backdrop, so it costs the most; it degrades layer by layer in motion |
glass | Glass layer: the same displacement and dispersion, then saturate(1.8); on Safari and Firefox it falls back to blur(10px) saturate(1.8) brightness(1.06) with a 1px specular ring | Prism Glass | Small panels that should bend light without frosting it; text on them reads only over a quiet backdrop. One layer samples the backdrop, so it costs less than refraction |
acrylic | A backdrop blur three times as wide (30px), saturation ×1.2 and brightness ×1.06, under a tint at 0.6 whose alpha carries fractal noise tiled at 140px (88%–100%) | Diffuse Acrylic | Large secondary panels such as system sidebars and status panels. It samples the backdrop with three times the blur radius of blur, and costs more for it |
mica | An opaque base, the surface colour with 5% of the brand, under two wide glows anchored to the viewport (background-attachment: fixed): 12% of the brand at the viewport's top left and 8% of a neighbouring hue (the brand's hue +40°) at its bottom right; nothing is read from the backdrop | Mica Sheet | Root window foundations that do not scroll. It reads no backdrop and costs very little, but repaints every time its container scrolls, so keep it off bases that scroll |
mask | Translucent tint at 0.75 opacity, no blur | Ink Film | What blur, glass and acrylic fall back to by default while they move; dense list rows. It reads no backdrop and costs little |
blur | backdrop-filter: blur(10px) saturate(1.5) under a 10% tint of the overlay colour | Basic Frost | Low-end integrated GPUs and power saving: autoDetect swaps refraction, glass and acrylic for it under power saving or a reduced frame budget. It samples the backdrop once, at moderate cost |
flat (same as pure) | Opaque fill (--tx-fill-color-lighter); nothing shows through | Dense Polymer | High contrast (where every material but plain paints this), the fallback for a minimal frame budget, and bases that must be fully opaque. It costs the least |
plain | No material layer at all, only the radius and the overflow clip; no fill even in high contrast | Empty Space | Structural layout wrappers that need only the radius and the clip. It costs nothing |
The Absolute Rule: Default to Refraction
In the TuffEx component family, every container component featuring a surface layer must strictly default to refraction.
This establishes the visual signature of Tuff. Whether in cards, the flip overlay, pop-overs, dropdown and context menus or select panels, refraction delivers one unified, refractive aesthetic across the desktop surface, and no component may choose its own.
The component defaults follow the rule: TxBaseSurface's mode, TxCard's background, TxFlipOverlay's surface, and the panelBackground of TxPopover, TxTooltip, TxDropdownMenu and TxContextMenu (and their submenus), TxSelect and TxSearchSelect (which all render through TxBaseAnchor) are all refraction. Dialogs and drawers such as TxModal and TxDrawer do not go through TxBaseSurface and have no material to choose.
Explicit Confirmation Gatekeeper for Mode Switching
If a specialized scenario (a plain white back-office table, say, or a very low-end embedded industrial device) demands switching the material (mode, background, surface or panelBackground) from refraction to another one (such as flat, mask, glass, acrylic or mica):
- Explicit manual user confirmation is mandatory!
- Neither AI coding agents nor engineers may arbitrarily override the default material.
- This gatekeeper preserves design system integrity across distributed teams and automated workflows.
Temporary swaps at run time are not switches: the fallbackMode a surface takes in motion and autoDetect's degradation under power saving or a strained frame budget leave the declared material alone, and the surface returns to it once the condition clears.