CSS Texture System · v0.8.3.9.0

Texture Library

Phase 1 gives Monarch an image-free surface vocabulary: a CSS-generated texture pattern, independent texture opacity, and an independent blend mode. These utilities can be composed over existing Monarch colors without fading the content inside the element.

Phase 1 Contract

Pattern + Opacity + Blend

The texture layer is rendered through a non-interactive ::before overlay. Opacity applies to that overlay only, never to the text, controls, borders, or child content.

Pattern

Choose one CSS-generated surface class such as .texture-linen, .texture-fine-dots, or .texture-brushed.

Opacity

Add a measurable utility such as .texture-opacity-05. The underlying element remains fully opaque.

Blend

Add a blend utility such as .texture-blend-soft-light or .texture-blend-multiply to change how the texture interacts with the surface color.

Texture Catalog

18 CSS-generated textures

Every swatch below uses the same neutral surface, 10% texture opacity, and normal blending so the pattern itself can be compared fairly.

Lines

Fine Lines
.texture-fine-lines
Horizontal Lines
.texture-horizontal-lines
Vertical Lines
.texture-vertical-lines
Diagonal Lines
.texture-diagonal-lines
Crosshatch
.texture-crosshatch

Grid / Geometry

Fine Grid
.texture-fine-grid
Grid
.texture-grid
Check
.texture-check
Diamond
.texture-diamond

Dots

Fine Dots
.texture-fine-dots
Dots
.texture-dots
Halftone
.texture-halftone
Perforated
.texture-perforated

Material / Fabric

Paper
.texture-paper
Linen
.texture-linen
Canvas
.texture-canvas
Weave
.texture-weave
Brushed
.texture-brushed

Independent Texture Opacity

One texture, twelve strengths

.texture-linen is shown across the Phase 1 opacity scale. The label remains fully opaque because opacity belongs to the texture overlay, not the element.

1%
.texture-opacity-01
2%
.texture-opacity-02
3%
.texture-opacity-03
4%
.texture-opacity-04
5%
.texture-opacity-05
6%
.texture-opacity-06
8%
.texture-opacity-08
10%
.texture-opacity-10
15%
.texture-opacity-15
20%
.texture-opacity-20
25%
.texture-opacity-25
30%
.texture-opacity-30

Blend Modes

One pattern, eight interactions

The same canvas texture is shown at 20% opacity. Screen uses a light texture-color override in this demonstration because screening black contributes little visual information; the public Phase 1 contract remains Pattern + Opacity + Blend.

Normal
.texture-blend-normal
Multiply
.texture-blend-multiply
Screen
.texture-blend-screen
Overlay
.texture-blend-overlay
Soft Light
.texture-blend-soft-light
Hard Light
.texture-blend-hard-light
Darken
.texture-blend-darken
Lighten
.texture-blend-lighten

Real UI Composition

Textures remain independent of Monarch color

Texture utilities can be added to existing cards, sections, containers, and other surfaces without creating color-specific texture classes.

Paper · 4%

Reading Surface

A restrained paper treatment can add material character without competing with body copy.

Linen · 6%

Branded Panel

The same texture system can sit over a stronger surface color and use Soft Light for integration.

Grid · 8%

Utility Surface

Geometric textures can support technical or structural sections while remaining entirely image-free.

Authoring

Composable class grammar

<section class="texture-linen texture-opacity-06 texture-blend-soft-light">
    ...content remains fully opaque...
</section>

Advanced precision is also available through the underlying custom properties --texture-opacity, --texture-color, and --texture-blend-mode. Phase 1 intentionally does not add public scale, angle, mask, fade, noise, SVG, JavaScript, or Houdini texture systems.