---
id: portfolio.ds.textures
name: "Textures"
type: token
status: active
relations: [{"type":"composes","target":"portfolio.ds.texture-glass-default"},{"type":"related_to","target":"portfolio.ds.colors"},{"type":"related_to","target":"portfolio.ds.shadows"}]
sources: ["apps/portfolio-site/src/design-system/docs/textures.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/styles/tokens.css"]
catalog: ["apps/portfolio-site/src/design-system/docs/textures.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/textures.astro"]
---
# Textures

## Purpose

Approved composite surface-treatment tokens for Portfolio Design System.

## Contract

- Use texture tokens before composing local translucent fills, filters, and shadows.
- Treat every texture family as one visual contract even when CSS exposes several custom properties.
- Textures define surface appearance; foreground color and interaction feedback remain owned by consuming components.
- Do not create a new texture without an explicit reusable role and owner approval.

## Current Tokens

- `Default Glass`: translucent surface, backdrop blur, saturation, and subtle elevation for controls over detailed media.

## Use

- A reusable component needs an approved layered surface over imagery or animation.
- The same fill, filter, and shadow treatment would otherwise be copied between components.

## Do Not Use

- A flat color or existing shadow token is sufficient.
- The treatment is purely decorative and has no reusable semantic role.
- A texture would reduce foreground contrast or obscure important media.

## Code Paths

- `packages/design-system/src/styles/tokens.css`
- `apps/portfolio-site/src/design-system/docs/textures.astro`

## Accessibility

- Validate foreground contrast over representative areas of the underlying media.
- Do not use texture as the only signal for state, hierarchy, or interactivity.
- Preserve explicit focus feedback in every interactive consumer.

## Verification

- Review every texture over detailed media.
- Confirm consuming components reference tokens rather than duplicating values.
- Run `scripts/design-system-graph --check --no-write`.