# Design Language for desca.works ## Aesthetics and Tone desca.works is **a 1962 mission-control room rebuilt for a software-engineering practice that does not exist yet** — imagine the General Electric Computer Department in Phoenix, Arizona, on a Tuesday afternoon in late November 1962, except the cathode-ray screens are rear-illuminated by hot-electric magenta plasma instead of phosphor green, and every chart is hand-drafted in the studio of *Charley Harper* with a Rapidograph 0.25 nib. The whole site is staged as **the front console of a fictitious analog-digital hybrid named DESCA-1 (Descriptive Engineering Synthesis & Control Apparatus)**, a console whose job is to *describe what a piece of software is actually doing*, not to make it go faster. The console is mid-century furniture — a teak surround, anodized-aluminum trim, brass nameplates engraved in *San Serif Bold* — and into that warm, professional cabinet someone has bolted a **black-glass HUD** running in dark-neon magenta, electric cyan, and gas-discharge yellow. The mood is **professional, slightly sleepy, completely confident** — the way the air feels in a control room thirty seconds before a routine procedure begins. Nobody is excited. Nobody is selling anything. The visitor is greeted as *a senior engineer arriving for the morning briefing*, not as a prospect. The page never raises its voice. It blinks, hums, and settles. Animation is low-amplitude and *purposeful*; when something is wrong (a failing input, a 404, a dead link), the page **shakes** — a brief, very specific 4Hz horizontal tremor with a slight rotational coupling, exactly the way a needle gauge in a real 1962 console would react when its driver coil briefly desaturated. That shake-error tremor is the only loud thing the site ever does, and it earns its loudness because it almost never fires. The aesthetic deliberately cross-wires **mid-century modern (11% in the registry — claimed in full)** with **dark-neon palette (4%)** and **sci-fi-hud motifs (5%)**, three strands that almost never appear together. Most mid-century-modern websites resolve into Eames-chair photography over cream backgrounds and orange accents; desca.works refuses that move and instead asks: *what would the same 1962 art directors have built if they had been given a 4K OLED panel and told it had infinite black?* The answer is a console that is warm where it touches your hand (teak, brass, knurled aluminum) and cold where it shows you data (HUD-magenta on absolute black). That tension — **hand-warm chassis, eye-cold readout** — is the controlling affect of the whole design. ## Layout Motifs and Structure The site uses a strict **F-pattern (only 3% in the registry — actively underused, claimed)** because an F-pattern *is what a real console operator's eye does* when scanning a panel of gauges: hard left margin first, top instrument cluster scanned left-to-right, then a long vertical scan down the left rail of secondary instruments, then short horizontal stabs into the right-hand readouts as needed. Most websites that claim "F-pattern" merely mean "left-aligned text with headlines" — desca.works commits to F-pattern as a **literal eye-track diagram**, with the eye-track itself rendered as a faint dotted SVG path that the cursor can summon by holding the `f` key. The grid is a **12-column, 8-row console grid**, but it is *not* a card grid. Each cell is a **named instrument**, and the instruments have asymmetric sizes drawn from a fixed inventory of seven console-panel proportions (1×1 indicator, 2×1 gauge, 3×1 strip-chart, 1×2 column meter, 4×2 master display, 6×3 chart-recorder, 12×1 rail). The page reads top-to-bottom as: 1. **Top brass rail (12×1)** — engraved nameplate, reading `DESCA · WORKS · CONSOLE 01` in centered Futura Bold, white-hot on brushed-anodized-aluminum. Permanent. Never animates. 2. **Master display (8×3, top-left, sets the F's top bar)** — large CRT-style readout, the project's name and one-line thesis, slow horizontal scanline. 3. **Right-hand auxiliary cluster (4×3, top-right)** — three small round indicator lamps (PWR / RDY / FAULT) and a four-digit Nixie-style counter showing time-on-console for the visitor (counts up from arrival, never resets). 4. **Left rail (3×5, the F's vertical stroke)** — five vertically-stacked strip-chart cells, each one a navigation target: *Practice*, *Method*, *Library*, *Cases*, *Contact*. Each strip-chart is a live-drawn line-illustration of an idea, not a thumbnail. 5. **Center field (9×4, the F's middle bar)** — long-form text staged as a *teleprinter scroll*, monospaced output of the active section, line-by-line revealed at a consistent 38ms cadence (matching the real mechanical cadence of a Teletype Model 33 ASR at 110 baud). 6. **Lower instrument bay (12×1)** — six small footer instruments: brass plate (build number), gas-discharge clock (UTC + local), cyan link rail to other works, a magenta failure-state indicator, a yellow caution lamp for accessibility-mode toggle, and a master power switch (real toggle, latches between dark and *very* dark). The F-pattern is reinforced by **one eye-track guide** — a faint 1px dotted line tracing the canonical F-shape, normally invisible, fading in under the cursor with a 220ms ease-out when the visitor pauses motion for >900ms. This gives the layout a self-documenting quality: the page literally shows you *how it expects to be read*. The grid does not break to a card-grid on mobile. Instead, on viewports below 768px, the console **rotates 90° in CSS perspective** and presents itself as a portrait-oriented control strip — the F-pattern collapses into an L-pattern, with the top-rail-and-left-rail merging into one continuous vertical scroll, and the center field becoming a teleprinter column. The page never uses a hamburger menu; the left rail simply remains visible as a sticky 56px-wide gutter with five tiny indicator lamps. The whole composition is rendered against **#020308** (a near-black with 2 points of blue-bias) with no full-bleed photographic hero, no card-grid cluster, no pricing block, no testimonial wall, and no statistics row. The console *is* the page. ## Typography and Palette **Typefaces — Google Fonts only, every face confirmed live on Google Fonts:** - **`Jost`** (variable weights 100–900, italics) — the principal display face, standing in for *Futura* across the entire site. Jost is the project Indestructible Type's open-source reinterpretation of the geometric sans tradition; it is on Google Fonts; and it carries the **futura-geometric** commitment (4% in the registry — claimed). Jost is set in *400 Book* for body, *500 Medium* for instrument labels in small caps, and *700 Bold* for the brass nameplate. The wordmark `desca.works` is set in **Jost 700 Bold, all-caps, +120 letter-spacing**, which gives it the squared, slightly stencil-cut feel of mid-century industrial nameplates without quoting any specific 1960s logotype. - **`Space Mono`** (regular 400, bold 700, italic) — the *teleprinter* face, used exclusively in the center-field readout to simulate the output of a Teletype Model 33 ASR. Space Mono's slight typewriter warmth (rather than the colder IBM Plex Mono) reinforces the mid-century chassis feel — the readout looks *typed*, not *rendered*. - **`Major Mono Display`** (regular 400) — used at exactly two sizes: *14px* for the indicator lamp labels (PWR · RDY · FAULT) and *48px* for the four-digit Nixie counter. Major Mono Display's all-caps geometric squareness matches the look of mid-century engraved nameplates and avoids the over-familiar "developer mono" register of Fira / JetBrains / Source Code Pro. **No third typeface enters this design.** Three faces, three jobs: nameplate, teleprint, instrument label. **Palette — dark-neon (4% in the registry — claimed in full), seven values fixed:** - **`#020308`** — *Console Black.* The primary background. Not pure black; 2-point blue bias makes it feel like the inside of a CRT viewing hood, not a void. - **`#0A0E1A`** — *Panel Charcoal.* The instrument-bay background. 4% lighter than Console Black; used for cell separation without ever drawing a hard line. - **`#1F1A14`** — *Teak Shadow.* The warm-bias band that frames the lower instrument bay. Mid-century chassis warmth, signaling the *furniture* layer of the design. - **`#FF1F8F`** — *HUD Magenta.* The primary readout color. This is the active-data ink: the master display headline, the strip-chart lines, the live cursor of the teleprinter. Chosen at 1F8F rather than the safer 00B7 because the slight push toward red gives it a hot-cathode quality on OLED panels. - **`#1FE8E8`** — *Cyan Lamp.* The secondary readout color, used for affirmative state (RDY indicator, link rail, healthy strip-chart segments). - **`#FFD23F`** — *Caution Amber.* Tertiary readout, gas-discharge yellow. Used for the caution lamp, the accessibility toggle, and the FAULT prefix when shake-error fires. - **`#C9A66B`** — *Brass Plate.* The single warm metallic, used only for the top-rail nameplate engraving and the build-number footer plate. Not a gradient, not a shimmer; a flat sampled pantone of real polished cast brass. The palette enforces a **rule of three readouts** — magenta is for *what this is*, cyan is for *where to go*, amber is for *what to watch out for*. No element ever wears two readout colors. The brass and teak warms touch only the chassis layer, never the data layer. This separation is the whole reason the dark-neon palette feels mid-century rather than cyberpunk: the warmth is structural, the cool is informational. ## Imagery and Motifs **Zero photography (98% of registry sites use it — its exclusion is the largest single deviation here).** Zero stock illustration. Zero 3D render. Zero icon set. Every visual element is **hand-drafted line-illustration (3% in the registry — claimed in full)** rendered as inline SVG, drawn in a single line weight of **1.25px** with rounded line-caps, in the style of *Charley Harper* by way of *Otto Aicher's 1972 Munich pictograms* — geometric, reductive, deeply professional, never cute. **1. The Strip-Chart Line-Illustrations (left rail, five panels).** Each navigation cell on the left rail is a small SVG line-drawing illustrating its idea: - **Practice** — a single drafting compass, slightly opened, rendered as five line-segments. The compass tip *blinks* once every 6.4 seconds (one frame, 80ms). That single blink is the entire animation budget for that panel. - **Method** — a stylized analog oscilloscope showing one full sine-wave cycle. The sine is drawn live with `` on a ``'s `stroke-dashoffset`, completing one full cycle in 9.6 seconds, then pausing 3.2 seconds before re-drawing. - **Library** — a row of seven line-drawn book-spines with magenta gas-discharge spine-stripes. The line-illustrations are based on the proportions of *Penguin's 1961 King Penguin series* — tall, narrow, no embossing. - **Cases** — a stylized briefcase in three-quarter view, line-drawn with one *brass clasp* in #C9A66B. The clasp catches light when the cursor passes within 60px. - **Contact** — a 1962-era rotary-dial telephone, rendered in 14 line-segments. The dial is interactive: clicking it spins it 60° clockwise with a 320ms ease-out, then snaps back. No call is made; the dial *is* the gesture. **2. The Master Display Wordmark.** Above the master display, the wordmark `DESCA · WORKS` appears as line-illustration: each glyph is drawn as a Jost-Bold path with `stroke-dasharray` keyed to its perimeter, drawn in over 1.8 seconds in HUD Magenta the first time the page loads, then held as a filled-in white-hot magenta fill. The middle dot is a small geometric hexagon, not a period — a nod to the *brass register marks* on mid-century industrial nameplates. **3. The Sci-Fi-HUD Overlay (motifs: sci-fi-hud, 5% in the registry — claimed).** A faint 0.5px crosshair-and-bracket overlay sits permanently in the four corners of the viewport: an L-bracket at each corner, 24px legs, in #1FE8E8 at 18% opacity. The brackets *snap* — they jitter to a new position by exactly 1px every 11.2 seconds, simulating the sub-pixel update of a CRT-driven HUD. There is also a single permanent crosshair at the geometric center of the master display, a 16px cross of two 1px lines in HUD Magenta at 8% opacity, which moves with `mousemove` events at a 0.04 multiplier — slow parallax, visible only on close inspection. **4. The Teleprinter Tape.** The center field is staged as a *yellow-amber teleprinter tape* drifting downward, except the tape itself is invisible — only the printed monospace text is rendered, character-by-character, in #FFD23F dimmed to 84% on the immediate line and decaying by 6% per line backward, so the most recent line glows and older lines fade into Console Black. This produces the visual feel of a long roll of fanfold paper without ever drawing the paper. **5. The Brass Nameplate.** The top rail bears a flat brass plate at the geometric center, rendered as a single 240×40 SVG rectangle in #C9A66B with engraved-letter `DESCA · WORKS · CONSOLE 01` in #020308 (the engraving is darker than the page background, simulating the recessed shadow of a real machined cut). The nameplate has a single vertical highlight at 70% across its width, a 2px-wide white at 12% opacity, simulating the soft top-light of a 1962 fluorescent panel. **6. Texture.** A single, very faint **horizontal scanline overlay** runs across the entire page — alternating 1px lines of #02030800 and #02030880 (50% black at 50% alpha), repeated every 3px vertically. This scanline is fixed to the viewport, not the document, and never moves. It is the only screen-space texture in the design. ## Prompts for Implementation Build desca.works as **one HTML document, one CSS file, one ES module (`console.js`), and zero raster assets** — no PNGs, no JPGs, no icon fonts, no Lottie, no WebGL, no canvas. Inline SVG for every illustration. Google Fonts CDN for Jost, Space Mono, and Major Mono Display only. **The opening 1.6 seconds.** On `DOMContentLoaded`, the page is Console Black with a single 1px cyan crosshair at center. At 200ms, the four HUD corner-brackets fade in over 320ms. At 600ms, the brass nameplate slides down from `translateY(-40px)` to `translateY(0)` with a spring (stiffness 240, damping 22), accompanied by an 80ms `aria-hidden` brass-click sound (one short Web Audio square wave at 1800Hz, 40ms decay; opt-in only via `prefers-reduced-motion: no-preference`). At 1000ms, the master display wordmark `DESCA · WORKS` begins its line-draw, finishing at 2800ms. At 1400ms, the left-rail line-illustrations stagger in with a 160ms offset between each, drawn from top to bottom. At 2200ms, the teleprinter begins printing the active section's first line. At 2800ms, the four-digit Nixie counter starts counting up from 0000 in seconds. By 3000ms, the page is fully alive and breathing. **Continuous motion budget.** No bouncing, no parallax-on-scroll except the master display crosshair (0.04×), no marquee, no auto-rotating carousel. The only persistent motion is: - The left-rail oscilloscope (Method) sine wave, redrawing every 12.8 seconds. - The Practice compass-tip single-frame blink every 6.4 seconds. - The Nixie counter incrementing once per second. - The teleprinter advancing one character every 38ms whenever a section is being read. - The HUD corner-brackets jittering 1px every 11.2 seconds. Total kinetic energy of the page is *deliberately low*. The whole console *idles* like a real analog instrument bay. **Shake-error (patterns: shake-error, 4% in the registry — claimed in full).** The shake is the design's signature gesture and is reserved for exactly four conditions: 1. The visitor submits a contact-form field that fails validation. 2. The visitor clicks a navigation cell while it is already active. 3. The visitor attempts to load a 404 path. 4. The visitor right-clicks the brass nameplate (an Easter egg — the nameplate refuses to be saved as an image and shakes once to say so). The shake is **horizontal-with-coupled-rotation**, executed in pure CSS via a custom `@keyframes shake-needle` animation: 4 cycles at 4Hz (240ms total), peak amplitude 6px on x with 0.6° on rotateZ, eased with a `cubic-bezier(0.36, 0.07, 0.19, 0.97)` curve, applied to the offending element with `transform-origin: center`. Simultaneously, the FAULT indicator lamp on the top-right cluster *latches on* in #FFD23F for the duration of the shake plus 800ms decay, and the master display's scanline color shifts from HUD Magenta to Caution Amber for the same duration. The whole event is **one tremor and a brief amber stain**, then the page resumes its idle. This is the only time desca.works ever raises its voice, and the rarity is the point. **Storytelling.** The site is staged as a *guided console tour*. The five left-rail cells (Practice, Method, Library, Cases, Contact) load their content into the center-field teleprinter without ever changing the URL until the third cell-click of a session, at which point a small `(?)` mark fades in by the address bar lamp inviting the visitor to bookmark. This deferred URL-binding signals that desca.works is treating itself as **one continuous console session**, not as a set of pages. **Avoidance list.** No CTA buttons. No "Book a call" / "Request quote" / "Get started" anywhere. No pricing block. No testimonial slider. No client-logo wall. No statistics grid (no "150+ projects", no "98% satisfaction"). No newsletter signup modal. No cookie banner styled as a card. No hero photograph. No card-grid of services. No "How it works" 3-step. No "Our Process" timeline. No FAQ accordion. No social-proof rail. The page is a console, not a marketing funnel. **Sound (opt-in, off by default).** A single 60Hz mains-hum is generated via Web Audio when the master power switch in the lower instrument bay is toggled to ON (the switch defaults to OFF on first visit). The hum is -42dB, a pure sine at 60Hz with a 0.4Hz amplitude wobble. Toggling the switch off silences the hum with a 600ms exponential ramp. The hum is the only sound the page ever makes except for the 1800Hz brass-click on first load (also opt-in via the `prefers-reduced-motion` gate). **Reduced motion.** Under `prefers-reduced-motion: reduce`, the opening 1.6-second sequence collapses to a 200ms cross-fade, the oscilloscope sine becomes a static line, the compass-tip blink stops, the corner-bracket jitter stops, and the shake-error becomes a 600ms color-flash of the offending element from Console Black to Caution Amber and back. The teleprinter cadence drops from 38ms/char to instant. The page remains *spatially* the same — only the motion is removed, not the layout. **Cursor.** The cursor is replaced by a 14px cyan crosshair (`+`) over interactive elements and reverts to the OS default elsewhere. The crosshair has a 1px center-dot and a single thin 0.5px outer ring. No magnetic snap, no oversized custom blob, no cursor-trail. ## Uniqueness Notes This design commits to differentiators that no other CMassC site has staked out, drawn directly from the frequency analysis: 1. **Mid-century-modern executed as a 1962 mission console, not as an Eames-chair shop or Memphis-pattern blog.** Mid-century is at 11% in the registry but is overwhelmingly rendered as warm-cream + orange + photography of vintage furniture. desca.works refuses every one of those moves: no cream backgrounds, no terracotta accents, no chair photography. It commits instead to the *industrial control-panel branch* of mid-century modern — Dieter Rams's Braun lab equipment, the GE Computer Department, the original 1962 IBM 1401 console — and pushes that branch into a dark-neon registers it never historically reached. 2. **F-pattern claimed literally, not metaphorically (3% in the registry).** Most F-pattern designs in the registry are merely "left-aligned text with headings." desca.works draws an actual F-pattern eye-track as a faint dotted SVG that the visitor can summon, and the page's grid is composed *as* an F: top brass rail, left instrument rail, center teleprinter field with short right-hand stabs. The layout is self-documenting and self-referential. 3. **Dark-neon palette restricted to a strict three-readout rule (magenta = identity, cyan = navigation, amber = caution).** Dark-neon is at 4% in the registry but is usually deployed as full-saturation cyberpunk (Akira-style overload). desca.works uses dark-neon as *instrument lighting*, not as decoration: each readout color has exactly one semantic role, and the warmth of the chassis (teak shadow + brass plate) is what makes the palette feel mid-century rather than cyberpunk. 4. **Line-illustration as the only image format (3% in the registry).** No photography (98%), no stock, no 3D render, no icon set. Five hand-drafted SVG line-drawings — compass, oscilloscope, book-spines, briefcase, rotary phone — drawn in a single 1.25px stroke weight in the *Charley Harper × Otto Aicher* register. This alone deviates from 97% of the registry. 5. **Shake-error claimed as the page's signature gesture, fired exactly four times in defined conditions (4% in the registry).** Most sites with shake-error use it on form-validation only, often as an afterthought. desca.works elevates shake to a designed event: horizontal-with-rotational-coupling, 4Hz, 240ms, accompanied by a FAULT indicator latch and a master-display scanline color shift. The rarity of the firing is what makes the shake meaningful — the page is *quiet* precisely so the shake can land. 6. **Sci-fi-hud rendered as 0.5px ambient L-brackets at 18% opacity, not as a layered overload (5% in the registry).** Sci-fi-hud is usually executed as a stack of fake telemetry overlays, scrolling code, animated tickers. desca.works strips the HUD down to **four corner brackets and one center crosshair**, both nearly subliminal. The HUD is *atmosphere*, not *content*. 7. **Three Google Fonts, three jobs, no fourth face.** Jost (display + body), Space Mono (teleprinter readout), Major Mono Display (instrument labels and Nixie counter). No serif. No handwriting. No variable-axis showpiece. The discipline of three faces is itself a mid-century commitment — the original Braun design team worked from a similar restraint. 8. **No CTA, no pricing, no testimonials, no statistics, no hero photography, no card-grid.** The page is a console, not a funnel. It refuses every standard SaaS-marketing pattern. The contact moment is a rotary phone dial that spins 60° and snaps back. 9. **Continuous-session URL model.** The site does not change URL on navigation until the third cell-click, at which point bookmarkability is offered, not demanded. The page treats itself as *one operating console*, not as a tree of routes. 10. **Mains-hum and brass-click are the only two sounds, both opt-in.** Most sites with audio either default it on (intrusive) or omit it entirely. desca.works treats sound as a chassis affordance — flip the master power switch, the room hums; flip it off, silence — gating the entire audio layer behind a deliberate mid-century physical gesture. **Chosen seed (assigned by the orchestrator and claimed in full):** `aesthetic: mid-century, layout: f-pattern, typography: futura-geometric, palette: dark-neon, patterns: shake-error, imagery: line-illustration, motifs: sci-fi-hud, tone: professional`. Of the eight tokens, **f-pattern (3%), line-illustration (3%), shake-error (4%), and dark-neon (4%) are all underused** in the registry; their joint commitment is the structural backbone of the design. **mid-century (11%)**, **futura-geometric (4%)**, **sci-fi-hud (5%)**, and **professional (5%)** are moderate-frequency tokens deliberately recombined to subvert their usual executions (no Eames photography, no full-cyberpunk overload, no marketing-copy "professional"). **Avoided patterns from frequency analysis:** photography (98%), gradient palette (97%), parallax (95%), full-bleed layout (92%), cursor-follow (80%), spring (80%), card-grid (79%), stagger (75%), magnetic (70%), warm palette (96%), hand-drawn aesthetic (96%), centered layout (81%), mono typography (96% — used here only in two restricted display roles, never as the body face), and humanist typography (46%). The page commits to none of these as its primary register.