---
id: portfolio.ds.texture-glass-default
name: "Default Glass Texture"
type: token
status: active
relations: [{"type":"related_to","target":"portfolio.ds.color-surface"},{"type":"related_to","target":"portfolio.ds.shadow-soft"}]
sources: ["apps/portfolio-site/src/design-system/docs/textures.astro","packages/design-system/src/components/CarouselArrow.astro","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"]
---
# Default Glass Texture

## Purpose

Reusable translucent blurred surface for compact controls placed over detailed imagery or animation.

## Tokens

- `--texture-glass-default-background`: `36%` Surface color mixed with transparency.
- `--texture-glass-default-backdrop-filter`: `blur(10px) saturate(140%)`.
- `--texture-glass-default-box-shadow`: subtle compact black elevation.

## Contract

- Consume all three tokens together to preserve the accepted Default Glass treatment.
- Keep the surface borderless; component shape comes from the consuming component.
- Foreground color, corner radius, interaction states, and focus rings remain component responsibilities.
- Use over media with enough local contrast for the component foreground.

## Use

- `Carousel Arrow` controls over Project media.
- Future compact media-overlay controls after explicit component-level approval.

## Do Not Use

- Do not use as a generic page or card background.
- Do not copy its numeric values into component CSS.
- Do not assume glass alone guarantees readable foreground contrast.

## Accessibility

- Validate foreground contrast across representative light and dark areas of the underlying media.
- Preserve an explicit focus indicator in interactive consumers.

## Verification

- Confirm the underlying media remains visible and softly blurred.
- Confirm `Carousel Arrow` consumes every Default Glass token.
- Run `scripts/design-system-graph --check --no-write`.