PXLGEN▮

Colour Roles

Derived from palette + seed. Same seed, same assignment. Change the seed for a new identity.

Spacing Scale

Art-pixel values × pixel scale → CSS pixels

Design Tokens

Typography

Bitmap headings rendered to <canvas> (internal 5×7 font + effects). Body copy uses CSS from theme tokens.

Page shell

createPage — full-bleed-ready shell, background layer, and content container; pair with buildAppStylesheet for standalone pages.

Cards

Content createCard — variants default, bordered, raised, inset; optional title bar with icon and close button.

Buttons

Pixel UI createButton — theme tokens via var(--pf-*), press and focus states per W3 spec.

Panel

createPanel — framed content regions; CSS or nine-slice borders.

Badge

createBadge — status chips and dot indicator.

Divider

createDivider — rules and optional centred label.

Loader

createLoader — spinner, progress bar, dots, or blinking sprite icon. Supports size: 'sm' | 'md' | 'lg'.

Nav

createNav — horizontal/vertical/tabs nav with active link state and a mobile drawer.

Hero

createHero — large landing section with procedural background, title, subtitle, and CTA.

Footer

createFooter — page footer with link list and optional seed display.

Input

createInput — text/password/email/textarea fields with optional label and aria-label fallback.

Modal

createModal — dialog with focus trap, ESC to close, optional buttons.

Toast

createToast — corner-pinned auto-dismissing notifications.

Tooltip

createTooltip — hover/focus tooltip attached to any target element.

W4 — Layout & hybrid mount

createLayout — pixel-snapped grid, BREAKPOINTS (art-px × scale → CSS media queries), snap. createHybridMount — PixelCanvas layer + DOM overlay (when canvas 2D is available).

Icons

28 hand-defined 12×12 templates mapped to theme roles (text, muted, primary, …). Unknown names use a deterministic symmetric sprite.

W4 — Backgrounds

createGradientBackground, createNoiseBackground, createPatternBackground, createSceneBackground — PNG data URLs + CSS (scene mounts a canvas).

W5 — Presets & hero

createLandingPage, createPortfolioPage, createBlogPage, createDashboardPage, createGameUI (hero-style blocks live in presets / createHero elsewhere). Uses master seed & palette above.

generateStaticSite supports landing, portfolio, blog, and DSL document exports. Dashboard and Game UI remain preview-only.

RenderedPage.animatedScene — populated only for the DSL preset when its background is an animated type: 'scene'.

Live Theme Preview

CSS custom properties applied — everything below uses var(--pf-*)

Generated CSS Variables

Inject this into your page to apply the theme