# Design Language for lsware.net

## Aesthetics and Tone

lsware.net is presented as **a working engineering field manual — the kind of spiral-bound, ink-smudged technical binder a structures team keeps on the shop floor — rebuilt as an interactive isometric exploded-view document.** The conceit is exact: lsware is positioned not as a "platform" or a "solution," but as a *workshop* that builds load-bearing software the way a fabrication shop builds load-bearing steel. So the entire site reads as the manual *for* that workshop: section tabs, datum lines, fold-out plates, revision stamps, torque tables redrawn as capability tables, and — at its center — a single large machine drawn in **axonometric (isometric) projection** that the visitor disassembles by scrolling, each component sliding apart along its own 30°/150° axis to reveal what it does.

The tone is **grounded-earthy meets tech-tutorial** — confident, plainspoken, slightly dry, the voice of someone who has shipped things and would rather show you the drawing than sell you a feeling. There is humor in it, but it is deadpan margin-note humor (a hand-stamped "AS-BUILT" over a diagram, a footnote that says *"yes, it really is just a queue"*). Nothing sparkles. Nothing floats prettily. Everything is bolted to a grid that you can see. The mood owes more to a 1970s NASA assembly manual, a Haynes car repair guide, and a printed PCB fabrication packet than to any contemporary SaaS site. Critically, this is **not** the overused "terminal/IDE/dark-mode developer" look — there is no green-on-black, no fake code editor, no neon. It is paper-white, ink-blue, and risograph-red, printed and registered slightly off, the way real two-color shop prints always are.

The emotional payoff: by the time the visitor has scrolled the machine fully apart and watched it click back together, they should feel they have *read a real document about a real practice* — not browsed a brochure.

## Layout Motifs and Structure

The organizing structure is **isometric exploded-view as the spine, with a vertical-timeline rail of plate numbers as the only navigation.** It is decidedly not a card-grid, not a bento-box, not a hero-with-CTA stack — those are the corpus defaults and are explicitly rejected here.

- **The Drawing Sheet.** The whole site is staged on a single off-white sheet with a printed **engineering border** — a double-rule frame inset 24px from the viewport edge, with tick marks every 1/8th of the width along the top and left, lettered A–H across the top and numbered 1–8 down the side, exactly like a real D-size drawing. This frame is `position: fixed` and stays put while content scrolls "behind the glass" of it. In the bottom-right corner of the frame sits a permanent **title block**: DRAWN BY: lsware / SCALE: NTS / SHEET 1 OF 1 / REV: ▲3 — and the REV triangle increments visibly as you pass section boundaries.

- **The Machine.** Center-stage, occupying roughly 60vw, is one large object rendered in true isometric projection (30° axes, no perspective convergence) — call it "the apparatus." It is abstract but legibly mechanical: stacked plates, a spindle, a manifold, a finned block, a small enclosed cavity with a window. It is built entirely from CSS-transformed `<div>`s and inline SVG — **no 3D library, no WebGL, no canvas.** As the visitor scrolls, the apparatus performs a slow **exploded-view disswith**: each of its ~9 components translates outward along its mounting axis (always parallel to one of the three iso axes), a thin **leader line** draws itself from the displaced part back to its seat, and a **balloon callout** (a circle with a number, then a typeset label) fades in at the leader's far end. Scroll back up and it reassembles, components sliding home with a short overshoot-and-settle.

- **Plate Rail.** Down the left interior margin runs the navigation: nine small drawn rivets, each labeled PL.01 … PL.09. The active plate's rivet is "set" (filled ink); inactive ones are outline only. Hovering a rivet pops a 1-line plate title in a typeset tag to its right. No top nav. No hamburger. No logo cluster floating in a bar. The wordmark lives once, **letterpressed into the title block**, and nowhere else.

- **Plates (the nine sections), each a full-height register:**
  1. **TITLE PLATE** — sheet header, the apparatus shown fully assembled, one-sentence statement of what lsware is.
  2. **GENERAL NOTES** — the practice, written as numbered shop notes (N1, N2, N3…), set in a single justified column with hanging numbers.
  3. **EXPLODED VIEW A** — first disassembly pass: the visible subsystems, balloon-called.
  4. **DETAIL B (enlarged)** — one component blown up 4×, shown in a circular "scrap view" with a torn-edge mask, annotated.
  5. **PROCESS DIAGRAM** — how an engagement runs, drawn as a left-to-right flow of iso boxes connected by routed orthogonal arrows (the "routing" animates as a drawn polyline with right-angle bends).
  6. **CAPABILITY SCHEDULE** — a real engineering *schedule table* (ruled rows, monospaced cells, MARK / DESCRIPTION / NOTES columns) — this replaces what a normal site would make a "features grid."
  7. **SECTION CUT** — a vertical slice through "how we work" rendered as a hatched section view (45° section-lining fill), showing the layers of a project.
  8. **REVISION HISTORY** — selected past work, formatted exactly as a drawing's revision block: REV / DATE / DESCRIPTION / BY, newest at top, each row stamping in.
  9. **APPROVED / SIGN-OFF** — closing plate; the apparatus reassembled and "stamped" APPROVED in risograph-red; a single quiet contact line set as a note, not a button.

There is no parallax-velocity layering and no cursor-trailing — the depth illusion comes entirely from the honest isometric geometry, and motion is scroll-bound and mechanical, never floaty.

## Typography and Palette

**Type system (Google Fonts only — three families, strict roles):**

- **Display & section titles — `Zilla Slab`** (weights 400/500/700, italic available). A slab serif with squared, drafting-table bones — it reads like the inked title lettering on an old technical plate. Used for plate titles (PL.0X — TITLE PLATE), the wordmark in the title block, and big callout numbers. Set tracked +0.04em uppercase at plate titles, clamp(38px, 6vw, 92px). Its true italic is reserved for "scrap view" and "enlarged detail" labels, mimicking a draftsman's slanted annotation hand.
- **Annotation, labels, schedules, balloons — `IBM Plex Mono`** (weights 400/500). Every dimension-style label, balloon callout text, table cell, leader-line tag, the engineering-frame letters/numbers, and the title-block fields are Plex Mono — uppercase, +0.06em, small (11–13px). This is the *machine's own handwriting*. (Note: monospace is common in the corpus, but it is used here strictly as drafting annotation, never as a "code editor" motif — that distinction is the point.)
- **Body & shop notes — `Newsreader`** (weights 400/500, optical sizing on, italic available). A warm modern serif with a literary, technical-report feel — used for the GENERAL NOTES column, the section-cut prose, and any running text. Justified with hyphenation in the notes column, ragged-right elsewhere. ~17px, line-height 1.62. Newsreader keeps the document feeling like a *manual you read*, not a UI you click.

**Palette — a registered two-color shop print on warm paper, plus ink:**

- `#F4EFE3` — **manila / drawing-sheet paper.** The dominant ground everywhere. Faintly warm, slightly uneven.
- `#FBF8F1` — **fresh vellum.** Used for the inner "live" area of detail scrap-views and the schedule table fill, very subtly lighter than the sheet.
- `#1B2A4A` — **drafting ink blue.** Primary text, all rules, leader lines, the engineering frame, isometric edges. Nearly all line work is this, not pure black.
- `#0E1626` — **deep press black.** Reserved only for the apparatus's deepest interior shadows and the title-block hairlines — used sparingly so the page never feels dark-mode.
- `#D6452F` — **risograph red (revision/stamp ink).** The single accent. Revision triangles, the "AS-BUILT"/"APPROVED" stamps, the active plate rivet, the balloon-number rings on hover, and the routed process arrows. Deliberately printed ~1.5px off-register from the blue layer on the stamps.
- `#C9BBA0` — **light pencil / construction-line tan.** For the faint underlying construction grid, dimension extension lines, and the 45° section-hatching — the marks that "shouldn't have been erased."

Contrast is high between ink-blue and manila; the red is the only thing that ever shouts, and it shouts maybe four times in the whole document.

## Imagery and Motifs

No photography. No gradient meshes. No glassmorphic frosted cards. No hand-drawn doodle illustrations. Everything is **constructed line work** — vector geometry, CSS transforms, and printed-paper texture.

- **The Apparatus (the hero artifact).** One coherent isometric machine built from ~9 named components, each a small assembly of CSS-3D-transformed faces (top face, two side faces, each a flat fill in manila/vellum with a `#1B2A4A` 1.25px edge). It is abstract-mechanical, not a literal product render. Components: BASE PLATE, STANDOFF SET (×4 little posts), MANIFOLD BLOCK, SPINDLE, FINNED HEAT BLOCK, ACCESS COVER (with a small window cut), GASKET RING, INDEX WHEEL, CAP NUT. Each has a real "explode axis" and a real seat.
- **Balloon callouts.** Classic engineering balloons: a thin-ruled circle, a centered number in Zilla Slab, a leader line (Plex Mono tag at the far end). On the explode, balloons stagger in; their number-rings briefly fill risograph-red then settle to ink-blue outline.
- **Leader & dimension lines.** Hairline `#1B2A4A` polylines with tiny filled arrowheads and the occasional dimension witness-line with the gap-and-tick convention. Used both functionally (pointing at parts) and decoratively (a few "dimensions" along the sheet edges that measure nothing in particular — a sly authentic touch).
- **Scrap / detail views.** Circular enlargements with a **torn-paper edge mask** (irregular SVG `clip-path`) and a thin double rule, labeled DETAIL B — SCALE 4:1 in slab italic, with a tiny leader connecting back to the main view's location.
- **Hatching & section-lining.** 45° parallel-line fill (`#C9BBA0` on vellum) wherever a "cut" is shown — the Section Cut plate, and the cross-sectioned cavity in the apparatus.
- **Stamps.** Rubber-stamp-style text in risograph-red, slightly rotated (−4° to +6°), with a faint ink-mottle texture and intentional ~1.5px misregistration from the artwork beneath: "AS-BUILT", "REV ▲3", "FOR REVIEW", and the closing "APPROVED".
- **Rivets & fasteners.** The plate-rail nav dots are drawn as little dome rivets (radial highlight + ink ring). Section corners get tiny drawn corner-bolts.
- **Paper texture.** A subtle, near-invisible fibrous grain over the manila ground (a tiled noise texture at ~3–4% opacity), plus the faintest cyan/red channel separation along high-contrast edges to sell the two-color print. **Grain-overlay, not gloss** — nothing on this page is shiny.
- **Construction grid.** A barely-there `#C9BBA0` 1px grid at ~32px, only visible where the manila is "thin" (slightly higher opacity behind the title block and tables), implying every element was laid out on it.

## Prompts for Implementation

Build lsware.net as **one HTML document, one CSS file, one ES module — no framework, no build step, no canvas, no WebGL, no Lottie.** The entire visual is HTML/CSS/SVG; the apparatus is `transform-style: preserve-3d` divs plus inline SVG leaders. There is **no CTA grid, no pricing block, no pricing tiers, no testimonial carousel, no stat-counter grid, no logo wall, no newsletter, no cookie banner, no chatbot, no contact form** — closing contact is a single typeset note in the sign-off plate, nothing more.

**The page is a document you read in nine plates, scrolled top to bottom, ~90 seconds.** Storytelling, not navigation: land on the title plate with the apparatus assembled and the engineering frame snapping into place rule-by-rule (top rule draws L→R, left rule draws T→B, ticks pop in staggered, title block letterpresses last). Then:

1. **Plate-bound scroll choreography.** Use `IntersectionObserver` (or a scroll-progress calc) so each plate "owns" a scroll segment. Within Plate 03 and Plate 04, the apparatus's explode progress is driven directly by scroll position within that segment — at 0% assembled, at 100% fully exploded with all balloons in. Scrolling back up reassembles it 1:1. Components translate **only along iso axes** (precompute three axis vectors at 30°/150°/vertical); each gets a slightly different distance and a 60–120ms stagger; arrival uses a short overshoot (`cubic-bezier(.34,1.3,.64,1)`), ~420ms.
2. **Leaders draw, balloons stamp.** When a component reaches its exploded position, its leader-line `<path>` animates `stroke-dashoffset` from full→0 over 260ms, then the balloon scales in from 0.6→1 with the red-ring flash (`@keyframes`: ring fill `#D6452F` for 180ms, then transition to transparent fill / ink outline).
3. **The frame is fixed glass.** The double-rule engineering border, ticks, A–H / 1–8 lettering, and title block are `position: fixed`, above content. The REV triangle in the title block increments (▲1→▲9) as plates pass — a tiny `transform: scale` punch + red flash each time, like a fresh stamp.
4. **Plate rivets (left rail).** Nine fixed dome-rivet buttons; active one filled risograph-red, others ink-outline; hover reveals a Plex Mono plate-title tag sliding 10px out. Clicking smooth-scrolls to that plate. Keyboard ↑/↓ also steps plates.
5. **Schedule table (Plate 06).** A genuine ruled engineering schedule: `#1B2A4A` hairline rules, Plex Mono cells, alternating vellum/paper rows, a heavier rule under the header (MARK / DESCRIPTION / NOTES). Rows reveal top-to-bottom with a 1px rule wiping across before the text fades in. **This is where "features" live — as schedule rows, never as cards.**
6. **Section Cut (Plate 07).** A tall vertical "cut" with 45° `#C9BBA0` hatching (CSS `repeating-linear-gradient`), layers labeled with leader tags; the cutting-plane line (long-dash / two-short-dash, with bent end-arrows) draws across the apparatus on entry.
7. **Revision History (Plate 08).** REV / DATE / DESCRIPTION / BY rows, newest at top; each new row "stamps" in (drops 6px, settles, faint red REV-triangle to its left flashes once).
8. **Sign-off (Plate 09).** Apparatus reassembles fully; the "APPROVED" stamp rotates in at +5° with red misregistration and ink-mottle; the engineering frame's REV triangle does one final increment; the contact note fades in beneath, set as a shop note (N-numbered), not a button.
9. **Texture & restraint.** Tile a low-opacity fibrous noise PNG (or SVG `feTurbulence`) over the manila at 3–4%. Add a 0.5px cyan-left / red-right channel offset only on the heaviest ink edges and on the stamps. Honor `prefers-reduced-motion`: skip explode-on-scroll, show the apparatus pre-exploded with all balloons static, keep only opacity fades.

Bias the whole thing toward **a full-screen narrative read** — the visitor is taking a guided tour through a real engineering binder, watching one honest machine come apart and back together. No conversion funnel, no marketing chrome — the document *is* the pitch.

## Uniqueness Notes

Differentiators this design commits to — none should be duplicated by any other CMassC site:

1. **True axonometric exploded-view as the page spine, hand-built without 3D libs.** The corpus's "isometric" sites (~10%) and "isometric-icons" (~3%) use isometry as flat decoration. Here the *entire site is one isometric assembly drawing* that the visitor physically disassembles by scrolling — leaders, balloons, explode-axes and all — and it is implemented in plain CSS 3D transforms + SVG, no WebGL/canvas/Lottie. Nothing else in the registry does scroll-driven exploded-view.
2. **An honest engineering drawing-sheet chrome.** A fixed D-size drawing border with A–H / 1–8 grid lettering, tick marks, a live incrementing REV triangle, and a working title block (DRAWN BY / SCALE / SHEET / REV) — not a hero bar, not a nav. This rejects the corpus defaults of card-grid (89%), centered hero (86%), full-bleed (92%), and hero-dominant layouts in favor of `timeline-vertical` rivets + a fixed frame.
3. **Risograph two-color shop-print palette, not warm-gradient or dark-mode.** Manila `#F4EFE3` + drafting ink-blue `#1B2A4A` + a single risograph-red `#D6452F` accent, with deliberate misregistration and a grain (not gloss) overlay. This sidesteps the near-universal warm (98%) + gradient (96%) palette habit, and explicitly avoids the dark-mode/terminal developer cliché despite the domain being a software site.
4. **Schedule table instead of a feature grid; revision block instead of a portfolio grid.** "Features" are a ruled engineering MARK/DESCRIPTION/NOTES schedule; "past work" is a drawing revision-history block (REV/DATE/DESCRIPTION/BY). The site never renders a single feature card or pricing block.
5. **Slab + drafting-mono + report-serif trio used as a real document, not a UI.** `Zilla Slab` for inked plate titles, `IBM Plex Mono` strictly as drafting annotation (never as fake code), `Newsreader` for shop-note prose — three Google fonts in disciplined drawing-manual roles, no handwritten/hand-drawn anything (the corpus's 97% hand-drawn habit is fully avoided).

Chosen seed/style: **isometric technical docs** (from seeds.json) — interpreted as a scroll-driven axonometric exploded-view engineering field manual.

Avoided patterns per frequency analysis: hand-drawn (97%), glassmorphism (72%), photography imagery (98%), warm palette (98%), gradient palette (96%), parallax (95%), cursor-follow (88%), card-grid (89%), centered hero (86%), full-bleed (92%), dashboard (34%) — and the off-list-but-pervasive "dark-mode terminal developer" trope, which a `.net` software domain would normally fall into.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:25:10
  domain: lsware.net
  seed: unspecified
  aesthetic: lsware.net is presented as **a working engineering field manual — the kind of sp...
  content_hash: 6a036745644a
-->