# Dimensional Layering > Crisp cards stacked at clear elevations, with offset sheets peeking out underneath and a gentle 3D tilt on hover. - Nickname: Stacked sheets - Also called: Layered depth UI, Z-depth layering, Elevated card stacks - Category: Soft & Dimensional - Moods: Trustworthy, Techy, Calm, Bold - Industries: Fintech & Banking, SaaS, Startup & Tech, Corporate & B2B, E‑commerce - Style page: https://uilingo.dev/styles/dimensional-layering/ Dimensional Layering builds hierarchy out of depth. Every surface sits on a defined elevation (canvas → card → floating → overlay), and important cards show the sheets stacked below them as offset, slightly narrower tinted layers. Hero visuals are overlapping cards rather than one flat screenshot, and hover tilts a card in perspective so the stack feels physical. Colours stay clean and confident; the depth does the talking. ## Best for - Fintech, banking and card/wallet products - SaaS dashboards with a few hero metrics - Product marketing pages that show overlapping UI - Onboarding flows that stack steps as cards ## Avoid for - Dense tables with dozens of rows (stacks add noise) - Flat, editorial or brutalist brands - Low-power devices if every card tilts in 3D ## Do - Define 4 elevations and use them consistently: canvas, card (z1), floating (z2), overlay (z3) - Show 1–2 offset sheets peeking 4px and 8px, inset 4px/8px per side - Overlap hero cards by 40–80px so depth is obvious - Budget stacks: 2 sheets on the hero cluster, feature illustrations, highlighted plan, CTA and alt-section sheets; 1 sheet on other pricing and testimonial cards; none on stats, rows, inputs and tables - Tilt at most 4–6° with perspective(900px) on hover ## Don't - Don’t give every element a stack — flat rows keep the hierarchy readable - Don’t use blur or transparency for depth; use shadow and offset - Don’t mix shadow directions — light always comes from the top, except small solid graphic tiles (4px 4px 0) - Don’t tilt text-heavy cards or form fields ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Dimensional Layering" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Crisp cards stacked at clear elevations, with offset sheets peeking out underneath and a gentle 3D tilt on hover. Design keywords: offset card stacks, peeking sheets underneath, clear elevation scale, overlapping cards, perspective tilt on hover, layered soft shadows, z-depth hierarchy, crisp white cards on cool canvas. ## Visual language Clean, confident opaque cards arranged in visible depth on a cool blue-grey canvas (#E8ECF6). Every surface sits on a named elevation — canvas, card, floating, overlay — and the most important cards show the sheets stacked beneath them: two narrower, indigo-tinted layers peeking 4px and 8px out from the bottom edge, inset 4px and 8px per side. The hero is a cluster of overlapping, slightly rotated cards at three depths, and hovering a feature illustration tilts it in perspective so the stack feels like real paper. Elevation light comes straight from the top; there is no blur, glass, translucency or texture — depth is made only with offset and shadow. ## Signature details (must be visible) - Offset sheet stack (full, 2 sheets) under key cards — peeks 4px and 8px below, inset 4px/8px per side: box-shadow: 0 8px 0 -4px color-mix(in srgb,#3D3BF3 16%,#E8ECF6), 0 9px 0 -4px rgba(14,23,51,.1), 0 16px 0 -8px color-mix(in srgb,#3D3BF3 34%,#E8ECF6), 0 30px 40px -18px rgba(14,23,51,.3). Single-sheet variant keeps only the first two layers plus 0 22px 30px -16px rgba(14,23,51,.24) - Stack budget per view. Full 2-sheet stack: hero cluster main card, feature illustrations, highlighted plan, CTA card, alt-section sheets, dashboard balance KPI + first chart card, the form card, article pull quote and figure, mobile featured card. Single 4px sheet: other pricing cards and testimonials. None: stats, list rows, inputs, table, nav, chips - Four-step elevation scale with light from the top (shadows fall straight down): canvas (no shadow), card (0 14px 28px -8px rgba(14,23,51,.18)), floating (0 32px 60px -14px rgba(14,23,51,.3)), overlay (sheet stack + floating) - Hero cluster = 4 layers at 3 depths: a tinted back plate rotated -3deg (linear-gradient(135deg, color-mix(in srgb,#3D3BF3 34%,#E8ECF6), color-mix(in srgb,#3D3BF3 16%,#E8ECF6))), the main chart card, and two KPI cards overlapping it by ~70px, rotated -2.5deg and +2deg, one of them dark ink #0E1733 - Deliberate graphic offset: small solid 'shadow tiles' 4px 4px 0 color-mix(in srgb,#3D3BF3 16–34%,#E8ECF6) under the logo, icons, eyebrow tags, chips, swatches and the active nav/sidebar item, and the up-right fan of the feature illustration sheets. These are flat graphic echoes of the stack, not light — elevation shadows stay vertical - Hover tilt only on feature illustration cards and the hero cluster: transform: perspective(900px) rotateX(5deg) rotateY(-5deg) translateY(-6px), 260ms cubic-bezier(.2,.8,.2,1). Pricing and testimonial cards only lift translateY(-4px), no rotation - Alternate landing sections become one big raised white sheet (radius 26px = token xl) inset from the window edge, with its own two sheets peeking below - Indigo gradient for highlighted plan, balance KPI, CTA and featured card: linear-gradient(150deg,#605EF5 0%,#3D3BF3 55%,#2E2CB6 100%); ink #0E1733 on white cards, mint #16C68F secondary, coral #FF7A59 accent ## Design tokens — use these exact values Colours (light mode): - background #E8ECF6 - surface #FFFFFF - surface-2 #F3F5FB - text #0E1733 - text-muted #4A5475 - primary #3D3BF3 (text on it #FFFFFF) - secondary #16C68F (text on it #03281C) - accent #FF7A59 - border #D6DBEA - success #0C8F62 · warning #B86E00 · danger #D9304A - chart series #3D3BF3, #16C68F, #FF7A59, #9B7BFF, #0E1733 Radius: sm 8px, md 12px, lg 18px, xl 26px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(14,23,51,0.06), 0 3px 8px rgba(14,23,51,0.06)`, md `0 2px 4px rgba(14,23,51,0.05), 0 14px 28px -8px rgba(14,23,51,0.18)`, lg `0 4px 10px rgba(14,23,51,0.06), 0 32px 60px -14px rgba(14,23,51,0.30)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 260ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Sora 600/700 with Thai fallback K2D 600/700 - Body: DM Sans 400/500/700 with Thai fallback Anuphan 400/500/700 - Mono: DM Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=K2D:wght@600;700&family=Anuphan:wght@400;500;700&display=swap - CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"DM Sans", "Anuphan", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 700, heading tracking -0.03em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: K2D shares Sora’s wide, geometric, slightly technical shapes; loopless Anuphan matches DM Sans’ open, friendly body text. ## Components - Buttons: radius 12px, bold; primary indigo with a coloured soft shadow 0 10px 20px -8px; hover lifts 3px and grows the shadow, press sinks 1px and collapses it - Cards: no border, opaque white, radius 18px, card-level shadow; highlighted plan is the indigo gradient lifted 14px above its siblings with the full stack - Feature illustration card: white sheet (aspect-ratio 16/10) with two sheets fanned up-right; centred 88px tinted icon tile with a 4px 4px offset tile, a small indigo chip at top-left and a mini invoice line (grey bar + indigo amount) at the bottom - Inputs: recessed (surface-2 fill + inset shadow); on focus they lift 2px, turn white, get a 2px indigo ring and a 6px solid tinted offset tile - Radio cards: padding 12px, gap 8px, 14px label with text-wrap: balance (≤2 lines in Thai); the selected one lifts up-left 3px and shows a small offset sheet beneath - Nav: opaque white bar with a small shadow; logo tile carries a 4px tinted offset - Sidebar: flat on the bare canvas (no decorative plates on dashboard or form pages); the active item is a raised white card with shadow and a 4px offset tile, nudged right 4px - KPIs: first KPI is the balance card (indigo gradient, white text, sheet stack); the rest are plain white cards - Charts: indigo line with filled area; donut with a solid tinted drop shadow; table rows lift 2px with a shadow on hover - Logos: plain wordmarks in Sora 600, text-muted, each with a 16px outline hexagon glyph, one row, gap 32px ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → stats → steps → testimonials → pricing → cta. Feature section as alternating. Split hero: copy left, the 4-layer card cluster right; faint opaque stacked plates may sit top-right behind the landing hero only. Then a one-row logos strip, alternating feature rows where each illustration card has two sheets fanned up-right, a stats row (no stacks), numbered steps whose numbers sit on stacked tiles, testimonials and pricing (single sheet; featured plan full stack and lifted highest), and the stacked indigo CTA card. Alternate sections are large raised white sheets inset from the window edge. Dashboards use a sidebar on the bare canvas, a balance KPI card with a stack, and white widget cards on one elevation. Type: uppercase and tracking apply to Latin labels only; Thai eyebrows are 12–13px, weight 700, no transform. Display numerals (KPIs, prices, stats) use Sora 700; DM Mono is for small tabular data, with Thai falling back to Anuphan. ## Content Use realistic product copy (fictional brand) suited to: Fintech, banking and card/wallet products. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Define 4 elevations and use them consistently: canvas, card (z1), floating (z2), overlay (z3) - Show 1–2 offset sheets peeking 4px and 8px, inset 4px/8px per side - Overlap hero cards by 40–80px so depth is obvious - Budget stacks: 2 sheets on the hero cluster, feature illustrations, highlighted plan, CTA and alt-section sheets; 1 sheet on other pricing and testimonial cards; none on stats, rows, inputs and tables - Tilt at most 4–6° with perspective(900px) on hover ## Don't - Don’t give every element a stack — flat rows keep the hierarchy readable - Don’t use blur or transparency for depth; use shadow and offset - Don’t mix shadow directions — light always comes from the top, except small solid graphic tiles (4px 4px 0) - Don’t tilt text-heavy cards or form fields - Same-colour extruded surfaces with dual light/dark shadows — that is Neumorphism - Blur, translucency or glass to show depth, including see-through decorative plates behind content - Stacks outside the budget (stats, rows, inputs, tables, nav) - Diagonal elevation shadows or coloured glows; only the small 4px graphic tiles are offset diagonally - Rotating pricing, testimonial, text-heavy cards, inputs or table rows - Glossy 3D renders or dramatic lighting (3D Hyperrealism) ## Stack notes One self-contained HTML file with a