Skip to main content
[ LOADING ]
◆ Strata · Layered Design System

Welcome to
NW' Digital Space

Layered surfaces · Hairlines · Blue accent

A blog interface powered by Strata — with a five-step surface ramp and eight hue rails, every block of content has a place of its own.

Explore Components About Me GitHub
0
Section hue rails
0
Band treatments
0
Surface ramp
0kb
Runtime CSS · gzip
[ 01 ]

Why Strata

The biggest problem with flat design isn't “simple” — it's that every block looks the same. Strata turns hierarchy back into visible information with a surface ramp plus hue rails.

  • semantic tokens only
  • hairline structure
  • no colour transitions
  • concentric radii
Surface

Five-step surface ramp

From void to surface-3, plus an inset well that sits darker than the page. Light and shade are the structure itself: change it once and it changes everywhere.

Runtime

Attribute-driven · Zero-config interactions

Modal, Toast, Dropdown and the command palette are all driven by data-strata-* attributes through a single delegated runtime — not one line of page JS.

Astro

Static builds · Fast out of the box

Zero client-framework overhead; theming driven by CSS variables, ⌘K opens the in-page command palette, and you can move freely between light and dark.

css strata.css 

      /* Surface ramp — structure is carried by light and shade */--base:      #060b14;--surface-1: #0b111f;--surface-3: #161f33;--inset:     #04070f; /* Accent (blue) and the 8 section hues */--accent:    #3b82f6;--h-cyan:    #22d3ee;--h-purple:  #a855f7; /* Three hairline weights — borders carry all the structure */--line:        rgba(255,255,255,.09);--line-strong: rgba(255,255,255,.17);
  • [*]content base15px
  • [*]headingssentence case
  • [*]radii4 / 6 / 10 / 14 / 18
  • [*]spacing4px rhythm
  • [*]hovercolour swap, no tween
  • [*]static surfacesborder, never + shadow
[ 02 ]

Start Exploring

The component library is the most complete sample of this language: every component ships with monospace spec notes and real interactions.

  • 12 sections
  • live interactions
  • copy-ready markup
30+ Components

Component Library

Buttons, forms, data tables, overlays, terminals, feedback states — all interactive, with spec annotations.

Open Demo ▸
About

About the Blogger

A jack-of-all-trades▲ full-stack developer across hardware and software — an ordinary person who keeps pushing the boundaries of technology and design.

Get to know me ▸
Article

Article Archive

Hands-on projects, data visualization, ASCII players — turning hard-won lessons into reusable experience.

Read the articles ▸
[ 03 ]

Design Philosophy

Restrained minimalism is one step away from “no differentiation at all”. Strata's answer: make hierarchy readable information instead of patching it with decoration.

  • isolation
  • reuse
  • evolution
Isolation Reuse Evolution

Make components living documentation

Everything in Strata is built on readable, editable, composable CSS variables: no showing off — just the conviction that “every element is worth observing”.

“Flat design isn't about deleting the hierarchy, it's about drawing it more accurately. A hairline is enough — there's no need to add another shadow.”

— NW, 2026, on Strata v1.0

Section hue rails

8 hues
01 Foundation
02 Accent
03 Forms
04 Philosophy
05 Data
06 States
07 Alerts
08 Media

[*] Each hue appears only inside its own band: index badge, top hairline, softly tinted base. No colour bleeds across sections, so every block carries its own sense of belonging.

Stay in Touch

If you're also interested in technology, design, and “experiments off the beaten path”, feel free to find me on any platform.

Powered by Strata · Astro · FontAwesome