Ten interfaces, one stylesheet
Each demo links to the same dotmatrix.css file.
The theme changes come from a few CSS variables and data-texture attributes.
The HTML stays semantic while the visual tone changes from page to page.
Textures and bevels
There are 10 textures and 2 bevels. Add one attribute to an element and the style is ready.
Texture options
data-texture="paper"
data-texture="dots"
data-texture="stripes"
data-texture="hatch"
data-texture="halftone"
data-texture="noise"
data-texture="carbon"
data-texture="phosphor"
data-texture="grid"
data-texture="scanlines"
Bevel options
Use it on cards, callouts, and buttons that should sit above the page.
data-bevel="out"
Use it for inputs, terminal windows, and areas that should feel recessed.
data-bevel="in"
Demo pages
Each page uses the same framework with a different theme and layout.
Product landing page
A hero section, feature grid, testimonials, and a pricing table in one page.
- data-texture="halftone"
- raised bevel
Sign-in, sign-up, and 2FA
Three authentication states with an OTP grid, password feedback, and errors.
- data-texture="dots"
- raised + cyan glow
RetroCRM
A desktop CRM with sidebar navigation, KPI cards, a bar chart, activity, and deals.
- data-texture="dots"
- data-texture="halftone"
- raised KPI cards
Pricing tiers and comparison
Three plans, a featured card, a comparison table, and an FAQ accordion.
- data-texture="halftone"
- deep raised tiers
Long-form article
A three-column reading layout with a contents list, related posts, comments, and signup.
- data-texture="paper"
- data-texture="dots"
Old book catalogue
Twelve books with CSS-only spines, a filter sidebar, and pagination.
- data-texture-preset="vintage"
- raised book cards
Sweetcrumbs
A pastry shop with CSS cake illustrations, an order form, and a cart.
- data-texture="dots"
- data-texture="paper"
- deep raised cards
NEONet IRC / BBS
A three-pane chat layout with channels, messages, a user list, and forum threads.
- data-texture="phosphor"
- data-texture="hatch"
- raised threads
PixelEncyclopedia
An encyclopedia article with a masthead, A–Z index, topic tree, infobox, and sidebar.
- data-texture="paper"
- data-texture="dots"
- raised infobox
Stride tracker
A running app with an SVG route map, kilometre splits, and a monthly training calendar.
- data-texture="halftone"
- data-texture="dots"
- raised stat cards
Design notes
Each demo changes only the variables and attributes it needs. The framework stays untouched, and the pages use no JavaScript.
The textures system follows the same philosophy as the rest of dotmatrix.css: semantic, opt-in, zero-cost.
The 10 textures + 2 bevels add ~1.2 KB to the framework. They use radial-gradient and repeating-linear-gradient — no extra HTTP requests, no PNG sprites, no JS lazy-loading.
A bevel combines two inset shadows. It uses the existing border, a one-pixel highlight, and a one-pixel shadow.