REIS IA SUPERFÍCIES DESIGN SYSTEM v1.0

Sistema de Superfícies

Depth is commúnicated through 5 tiers of background lightness, not through shadows. Each tier is a step closer to the viewer. Elevation comes from background value, creating a layered visual hierarchy on the dark canvas.

[01] Camadas de Superfície

5 tiers from pure black (Void) to the lightest elevated layer (Float). Hover over each tier card to see its accent highlight. Each card is rendered ON the surface it describes.

S-0 #000000

Void


--surface-0

The absolute base. Used as the page background on all pages. Nothing sits behind this.

Page background, deepest layer

S-1 #0A0A0A

Base


--surface-1

Sections alternate between Surface-0 and Surface-1. The lightest page-level background.

Alternating section backgrounds

S-2 #111111

Raised


--surface-2

The default background for cards, panels, and contained content areas.

Card backgrounds (default)

S-3 #161616

Elevated


--surface-3

Used for interactive hover states (card hover shifts from S-2 to S-3) and form input backgrounds.

Card hover, input backgrounds

S-4 #1A1A1A

Float


--surface-4

The topmost layer. Reserved for elements that float above the content plane: dropdowns, tooltips, popovers.

Dropdowns, tooltips, floating elements

Regra de Alternância de Seções

Sections alternate between Surface-0 and Surface-1. Hero always starts on Surface-0. Never jump more than one surface tier between adjacent sections. Cards on Surface-0 sections use Surface-2. Cards on Surface-1 sections also use Surface-2.

[02] Hierarquia de Profundidade — Demo Interativo

Click on any surface tier button or nested layer to highlight it. The info panel shows the active tier's hex value, CSS variable, and usage. This is a fully interactive depth exploration.

Notice how each nesting level creates perceptible but subtle depth. The blue accent border activates only on the selected tier.

S-0 Void#000000

S-1 Base#0A0A0A

S-2 Raised#111111

S-3 Elevated#161616

S-4 Float#1A1A1A

[03] Texto em Superfícies — Contrast Matrix

The opacity-based text system ensures readable contrast on every surface tier. Because text uses white at varying opacities, it automatically harmonizes with any background lightness.

Surface

Primary

Secondary

Tertiary

Quaternary

Muted

S-0 Void

100%

70%

50%

35%

20%

S-1 Base

100%

70%

50%

35%

20%

S-2 Raised

100%

70%

50%

35%

20%

S-3 Elevated

100%

70%

50%

35%

20%

S-4 Float

100%

70%

50%

35%

20%

[04] Bordas em Superfícies

Like text, borders use white at varying opacities and naturally harmonize with all surface tiers. The accent border uses blue at 30% opacity. Hover each box to see the border brighten.

S-0

Sub

Def

Vis

Str

Acc

S-1

Sub

Def

Vis

Str

Acc

S-2

Sub

Def

Vis

Str

Acc

S-3

Sub

Def

Vis

Str

Acc

[05] Padrões de Uso de Superfície

Common patterns showing which surface tiers to use for different UI compositions.

Page Layout

Page bg: S-0

Alt sections: S-0 / S-1

Header: S-1 + blur

Footer: S-1

Card Composition

Card default: S-2

Card hover: S-3

Input inside card: S-3

Nested element: S-3 or S-4

Floating Elements

Dropdown: S-4

Tooltip: S-4

Modal: S-3 or S-4

Popover: S-4

Alternate sections between Surface-0 and Surface-1
Start hero sections on Surface-0
Use Surface-2 for all card backgrounds
Shift to Surface-3 on card hover

Don't

Jump more than one tier between adjacent elements
Put Surface-4 content on a Surface-0 background (skip)
Use more than 2 surface tiers on mobile
Use shadows instead of surface tiers for elevation

[06] Demo de Hover de Card ao Vivo

Hover over these cards to see the surface transition from Surface-2 to Surface-3. The border shifts from --border-default to --border-visible. This is the standard card hover behavior.

Standard Card

S-2 default, S-3 on hover. Border brightens from 8% to 12% white.

Featured Card

Adds blue glow shadow on hover. Border shifts to accent blue at 30%.

Glass Card

Background rgba(255,255,255,0.05) with backdrop-blur(16px).

[07] Referência CSS

Token

Value

Usage

Surface 0

#000000

Page background (Void)

Surface 1

#0A0A0A

Alternating sections (Base)

Surface 2

#111111

Card backgrounds (Raised)

Surface 3

#161616

Card hover, inputs (Elevated)

Surface 4

#1A1A1A

Dropdowns, tooltips (Float)

Surface System CSS

/* Surface Layering System */
--surface-0: #000000;  /* Void  -- page background */
--surface-1: #0A0A0A;  /* Base  -- alt sections    */
--surface-2: #111111;  /* Raised -- card default    */
--surface-3: #161616;  /* Elevated -- card hover    */
--surface-4: #1A1A1A;  /* Float -- dropdowns        */

/* Card hover transition */
.card {
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  transition: background 200ms, border-color 200ms;
}
.card:hover {
  background: var(--surface-3);
  border-color: var(--border-visible);
}