Brand system

Depth And Glass System

Depth for INTO Consulting must create tactile hierarchy without turning the

Requirement

Depth for INTO Consulting must create tactile hierarchy without turning the system into generic frosted SaaS chrome. Glass is the only allowed transparent surface treatment, and it is reserved for dark, photo, command, or editorial focus contexts.

Constraints

Warm Light remains the default reading and working surface.
Blueprint Dark is reserved for governed focus, command, title, section, and dramatic conclusion moments.
Glass is not used on routine Warm Light document or proposal surfaces.
Shadows are restrained and never the primary hierarchy mechanism.
Browser-facing implementation uses tokens/into-consulting.theme.css.

Bet

The system uses a small elevation ladder and one glass recipe instead of many panel styles. The cost is restraint: default surfaces will often feel flatter, but hierarchy stays editorial and easier for agents to reproduce.

Failure Modes

Depth is used as decoration instead of containment.
Glass appears on every card and makes the surface feel like a template.
Shadows replace spacing, type, and hairlines as hierarchy.
Text over glass or photography loses contrast.
Blueprint Dark glass omits the inset highlight and reads as flat blur.

Philosophy

Depth is tactile: paper, glass, grain, and controlled shadow. It is not skeuomorphic. It should clarify layer, state, or focus while preserving the editorial containment ladder: no box, hairline, full-width exhibit, then card only for discrete peer evidence.

Surface Elevation Ladder

Level	Warm Light	Blueprint Dark	Use
Page surface	`--into-surface-page`	`--into-surface-page`	Default reading, work, and body surfaces.
Raised card	`--into-surface-raised` plus hairline	`--into-surface-raised` plus hairline	Peer cards, forms, quiet panels, repeated evidence.
Floating exhibit	`--into-shadow-floating` plus hairline	`--into-shadow-floating` plus hairline	Popovers, command surfaces, drag overlays, focused evidence.
Modal / overlay	`--into-shadow-command`, scrim, focus trap	`--into-shadow-command`, scrim, focus trap	Dialogs, drawers, blocking confirmations.
Scrim	`--into-surface-overlay` or `--into-surface-scrim`	`--into-surface-overlay` or `--into-surface-scrim`	Backdrop separation for overlays and modals.

Glass Treatment

Glass is allowed only on Blueprint Dark, photo overlay, dark editorial, command, and media-stage surfaces. It requires all of these layers:

Translucent surface color.
Backdrop blur.
Hairline border.
Inset top highlight.
Hover delta that increases surface and border clarity without adding glow.

Theme	Surface	Border	Highlight	Blur	Hover Delta
Warm Light	`--into-glass-surface`	`--into-glass-border`	`--into-glass-highlight`	`--into-blur-surface`	`--into-glass-surface-hover`, `--into-glass-border-hover` only on photo or dark editorial overlays.
Blueprint Dark	`--into-glass-surface`	`--into-glass-border`	`--into-glass-highlight`	`--into-blur-surface`	`--into-glass-surface-hover`, `--into-glass-border-hover` for command, media, and focus surfaces.

The inset highlight is non-negotiable. Without it, glass becomes generic frost instead of a precise tactile surface.

Scrim Treatment

Warm Light modal scrim: dark base, moderate opacity, no decorative color.
Blueprint Dark modal scrim: near-black base with enough opacity to separate foreground from the page.
Blur behind scrims is optional and must stay subtle; it is not used for flat body content.
Scrims are interaction state, not brand atmosphere.

Photo Overlay Gradient

Use --into-gradient-photo-overlay for text over photography. The gradient pulls shadow zones toward petrol/teal while protecting text contrast:

linear-gradient(135deg, rgba(15,21,24,.88) 0%, rgba(15,21,24,.58) 52%, rgba(26,74,77,.24) 100%)

Text sits on negative space, a quiet third, or a controlled overlay. Never put text on the focal subject.

When To Use Depth

Command palette, popover, drawer, or modal separation.
Photo overlay text protection.
Drag overlay or media-stage focus.
A full-width exhibit that needs foreground separation.
A decision or approval state where layer change clarifies attention.

When Not To Use Depth

Do not use drop shadows for hierarchy.
Do not blur flat content surfaces.
Do not use glass on Warm Light document, proposal, invoice, table, or normal app work surfaces.
Do not stack cards inside cards.
Do not add glow or blur to make routine content feel premium.

Elevation Transitions

Elevation changes use the motion tokens defined in brand/motion-system.md. The state-transition table there owns the binding; this section names the common bindings for depth so they stay consistent.

Transition	Duration	Easing	Notes
Raised card surfaces on hover	`--into-motion-micro`	`--into-ease-standard`	Border or hairline opacity shift only; no elevation jump.
Popover or command surface opens	`--into-motion-measured`	`--into-ease-decelerate`	Scrim fade plus content `0.5rem` rise.
Modal or drawer opens	`--into-motion-measured`	`--into-ease-decelerate`	Scrim fade plus content `0.5rem` rise; trap focus on completion.
Modal or drawer closes	`--into-motion-quick`	`--into-ease-accelerate`	Reverse path. Faster than open.
Drop-target receives drag	`--into-motion-quick`	`--into-ease-standard`	Surface and outline tokens shift; no depth jump.

If a depth change cannot bind to one of these recipes or a closer match in brand/motion-system.md, the change is probably decorative.

Agent Rule

Start with no box. Add a hairline if grouping is needed. Use an exhibit when evidence needs width. Use cards only for discrete peer evidence. Use glass only when the surface is dark, photo-based, or a command/focus layer with a real interaction job.