---
title: Surface 8-Material Taxonomy & Gatekeepers
description: 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 |

:::TuffDemoWrapper{demo="ConceptSurfaceModesDemo"}
:::

## 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.