Syntyr CSS — Component Gallery

01 / Three visual systems

ONE MARKUP CONTRACT / TWO MODES

Create a custom palette with the interactive theme editor (optional docs-only JavaScript, no build step).

GRID / SIGNAL BLUEONLINE

NETWORK INTEGRITY

98.7%

Minimal luminous geometry with technical precision. TRON-inspired, without using any licensed imagery.

NOIR / AMBER DISTRICTONLINE

ARCHIVE CONSISTENCY

91.4%

Warm tungsten contrast and industrial framing. Atmospheric Blade Runner-inspired controls.

STUDIO / PROFESSIONAL LIGHTREADY

APPLICATION RELIABILITY

99.9%

Quiet, readable SaaS and business styling with accessible contrast-oriented tokens.

The three featured palettes are joined by Industrial, Terminal, Corporate and Minimal in the unreleased alpha.5 candidate. Compare all seven SYNTYR themes.

02 / Component laboratory

NO COMPONENT JAVASCRIPT

01 / CONTROLSBUTTONS

System ready. Native controls remain keyboard operable.

Warning state uses color plus a visible border.

02 / DATA ENTRYFORMS

03 / TELEMETRYDATA TABLE

Active network nodes
NODE	SECTOR	STATUS
AX-92	GRID 04	ONLINE
KX-14	NOIR 08	READY
TR-08	GRID 12	ONLINE

Native table elements, responsive overflow container.

04 / DISCLOSUREDETAILS

Why real HTML?

Buttons, forms, disclosures and popovers retain native keyboard and accessibility behavior.

Does it require Node or React?

No. Copy a CSS file and use any HTML renderer.

Can themes nest?

Yes. Set data-syn-theme="noir" on a section to override the Grid palette inside it.

05 / NAVIGATIONBREADCRUMBS + LINKS

Semantically marked current page; purely decorative separators.

These links navigate to real gallery sections. For actual pagination, link to real result pages and mark the active page with aria-current="page".

06 / LOADINGSTATIC PLACEHOLDERS

Loading preview — these placeholders are decorative, never animated. Applications must expose real loading status to assistive technology.

03 / Optional semantic styling

PICO-LIKE MARKUP / OPT-IN

NO COMPONENT CLASSES REQUIRED

Place syn-semantic on a container, and unclassed native elements gain the Syntyr theme. No globally invasive selectors.

<section class="syn-semantic">
  <article>
    <label>Operator
      <input placeholder="ID">
    </label>
    <button>Continue</button>
  </article>
</section>

Archive terminal

This panel, form and button are plain HTML, styled by the optional semantic layer.

Transmission details

Scoped to this article and its parent semantic container.

04 / Composable UI recipes

CONTAINER QUERIES / MIT / NO RUNTIME JS

Like Tailwind's composable building blocks, these original patterns assemble into working HTML without requiring a CSS compiler or a JavaScript runtime. Resize the window or embed them in a narrower region to see how they adapt.

SERVICE UPTIME

99.9%

ACTIVE AGENTS

026

INBOX ITEMS

004

QUEUE STATUS

No pending deployments

A complete empty state with real navigation, not a decorative screenshot.

EXPLORE CONSOLE

MARKETING BLOCK

Pricing cards

One-column mobile layout and three-column layout when the parent has enough space.

OPEN PRICING DEMO

Copy-paste snippets are documented in docs/recipes.md. These are complete MIT-licensed examples—not extracts from Tailwind Plus.

05 / Free production-shaped examples

MIT / REUSABLE / NO JAVASCRIPT

GRID / CONTROL CONSOLE

Free dashboard page

Native popovers, dialogs, responsive navigation, metrics and a data table in plain HTML.

OPEN CONSOLE DEMO

NOIR / LAUNCH PAGE

Free landing page

Atmospheric marketing layout with native HTML, semantic sections and a distinctive amber palette.

OPEN NOIR DEMO

STUDIO / SAAS

Professional app shell

Responsive sidebar, KPIs, activity, status and data table.

OPEN SAAS DEMO

STUDIO / BUSINESS

Contemporary website

Lightweight hero, feature grid and call to action.

OPEN BUSINESS DEMO

GRID / CLI

Browser terminal and ANSI

Terminal styles plus portable native CLI palette tokens.

OPEN TERMINAL DEMO

OPTIONAL / SVG + UNICODE + ASCII

Symbols and text art

Bring your own SVG icons, literal Unicode, and scroll-safe box drawing. No icon fonts, packages or runtime JavaScript.

OPEN SYMBOL LAB

SYNTYR / OPERATIONS SHOWCASE

Complete operations console

Responsive SaaS sidebar, KPI dashboard, deployment table, capacity readouts, activity timeline and diagnostics—all with sample data and zero runtime JS.

OPEN OPERATIONS DEMO

SYSTEM / MINIMALIST

Intrinsic layouts + classless forms

Responsive sidebar and switcher, fluid type, native form controls, and OS-following light/dark styling with no JavaScript.

OPEN MINIMALIST EXAMPLE

DESIGN SYSTEM / STATES

Semantic roles and interactions

Typography, keyboard focus, validation, density and nested themes. Class-based and native semantic modes.

OPEN DESIGN-STATE EXAMPLE

STUDIO / WORKFLOWS

Search, filters and settings

A complete static SaaS UI example with search form, data table, native settings and pagination. Server-ready markup; no live backend or JavaScript.

OPEN WORKFLOW EXAMPLE

VERTIGO / OPTIONAL ADMIN SKIN

Go admin styling demo

Optional MIT CSS adapter for Vertigo-style server-rendered admin pages. No runtime dependency or live backend.

OPEN VERTIGO SKIN DEMO

OPEN ORIGINAL PRICING PAGE OPEN NOIR RESOURCE ARCHIVE VIEW $59 KIT CONCEPT OPEN FRAME & TERMINAL LAB

READ SAAS, BUSINESS AND CLI GUIDE READ FRAME GEOMETRY GUIDE READ ICON & ASCII GUIDE

These examples are MIT-licensed. Future premium kits would be separate, complete page packs—not paywalls on essential UI components.

06 / Get started

COPY CSS / ZERO NPM / MIT

V0.3.0-ALPHA.2 / DISTRIBUTION

Use native HTML. Ship nothing extra.

Download the compiled stylesheet and host it with your application. The v0.3.0-alpha.4 release includes Grid, Noir and Studio themes, with separate CSS recipes for SaaS, business and terminal layouts. Semantic styling and decorative effects remain optional.

DOWNLOAD CORE CSS RELEASE & SOURCE MIT LICENSE

<link rel="stylesheet"
      href="/css/syntyr.core.css">

<section class="syn-root"
         data-syn-theme="grid">
  <button class="syn-button
           syn-button--primary">
    Initialize
  </button>
</section>

Host the CSS at your own path. For tokens, nested themes, and styling examples, read the customization guide. For optional modules, version pinning and CDN guidance, see the distribution guide.

07 / Review Syntyr in a real project

OPEN SOURCE / VOLUNTARY / NO PAYWALL

CALL FOR TEN DESIGN PARTNERS

Help make HTML-first SaaS interfaces better.

Developers using Go/templ, HTMX, Astro, Rails, Django or plain HTML can test the original MIT-licensed dashboards and report integration friction, missing complete screens and accessibility issues.

The proposed $59 Console Kit is only a research concept. Nothing is for sale, and no personal details or payment are required.

REVIEW AND SHARE FEEDBACK VIEW KIT CONCEPT

08 / Engineering principles

BUILT FOR PRODUCTION AUDITS

LOW ENTROPY

Just CSS

No browser JS, no external assets, no runtime package dependencies. Python only builds distributable files.

PLATFORM FIRST

Native controls

Real button, dialog, popover, select, details, input and progress. No faux ARIA tab or combobox implementations.

PROGRESSIVE ENHANCEMENT

Optional effects

Decorative glows and grids are isolated from core styling; reduced-motion and forced-colors are respected.

The future is semantic.