# Design Language for resar.one ## Aesthetics and Tone resar.one is **a research notebook that thinks it is a 1996 PC adventure game**. Imagine the lab journal of a fictional research collective ("RESAR" — *Recursive Experiments in Self-Assembling Routines*) rendered entirely in the pixel grammar of a CRT-era point-and-click: dithered skies, 16×16 sprite icons, a bottom inventory bar, a tiny blinking cursor, parchment-yellow text boxes with hard 2px drop shadows. The tone is **playful but earnest** — like a curious grad student who would rather make you laugh than impress you. Nothing is glossy. Nothing is blurred. Every edge is a hard pixel step. The mood is the warm hum of a beige tower booting up: the chunky confidence of low-resolution, the honesty of visible jaggies, the joy of a thing that does not pretend to be more than it is. This deliberately rejects the corpus defaults. There is **no glassmorphism, no parallax mush, no cursor-follow blobs, no warm gradient meshes**. Pixel-art aesthetic sits at ~3% of the corpus; pixel-art imagery at ~3%; this site commits to it fully — not as a retro gimmick layered on a modern site, but as the literal rendering model for *every* element including body copy framing, navigation, and scroll behavior. The narrative spine: you are exploring RESAR's "lab floor" — six rooms, each a research note disguised as a game screen. You walk a sprite-cursor through them. The content is real (essays, experiments, notes), the wrapper is a fictional 90s edutainment CD-ROM that someone found in a thrift store and got obsessed with. ## Layout Motifs and Structure **Layout family: full-bleed + diagonal-sections, expressed as game "screens."** The site is a single horizontal-feeling stack of six full-viewport "rooms," but transitions between them are **hard pixel-wipe cuts** (left-to-right column-by-column reveal, ~24 columns, 18ms each) rather than scroll fades — like changing screens in an adventure game. Persistent chrome (the only fixed UI): - **Top status strip, 28px tall:** a 1px-bordered bar reading `RESAR.ONE` in 8px bitmap caps on the left, a tiny pulsing 6×6 "REC" square, and a screen counter `02 / 06` on the right. Pure black on a 1-tone dithered grey. - **Bottom inventory bar, 64px tall:** six 48×48 "item slots" with hard inset bevels (light top-left, dark bottom-right — classic Win95 sunken look). Each slot holds a 32×32 sprite that is also the nav link to that room. The currently-active slot gets a 2px dashed "marching ants" selection border that actually animates (offset shift, 8 frames). - **The sprite-cursor:** a 24×24 custom cursor (a little hooded magnifier-on-legs character) replaces the OS cursor sitewide via `cursor: url(...)`. On clickable things it does a 2-frame "blink/wave" swap. Inside each room, content sits in **hard-edged dialogue panels**: parchment `#F4E4C1` rectangles with a 2px `#2B1B12` border and a solid (not soft) 4px offset shadow in `#2B1B12`. Panels are arranged on a strict **16px pixel grid** — everything snaps; no half-pixels, no sub-pixel positioning, ever. Diagonal sections appear only as **dithered terrain slopes** at room floors (a 45° staircase of 8px blocks transitioning one dither pattern into another), never as smooth CSS skew. No card-grid. No bento. No centered hero with a download button. The "rooms" are tableaux you read left to right, top to bottom, like comic panels. ## Typography and Palette **Type system — Google Fonts, bitmap/pixel families only:** - **Display & headings:** `Press Start 2P` — the canonical 8-bit bitmap face. Used at 16px, 24px, 32px for room titles and the status strip. Always uppercase or title-case, never lowercase (it has no real lowercase rhythm). Letter-spacing left at default; line-height 1.6 minimum because bitmap caps need air. - **Body & dialogue copy:** `Silkscreen` (formerly Kotta One's sibling — a clean pixel face with a workable lowercase) at 8px and 16px. This carries essays, captions, and inventory tooltips. For longer reading passages it sets at 16px / line-height 2.0 inside the parchment panels. - **Numerals, counters, "system" text:** `VT323` — the CRT terminal monospace — for the screen counter, timestamps, footnote markers, and any "the machine is talking" text. Renders at 18–20px with its characteristic phosphor-glow-free crispness. All three are pixel-native, so the whole site can be served with `image-rendering: pixelated` on every raster asset and the text will *match* the art instead of fighting it. **Palette — a deliberately limited 8-bit-ish ramp (think VGA, not modern):** - `#101820` — **CRT Charcoal** — near-black background of "outdoor"/void rooms and all hard borders. - `#F4E4C1` — **Parchment Cream** — dialogue panels, primary reading surface, the "paper" of the notebook. - `#2B1B12` — **Walnut Ink** — body text on parchment, panel borders, hard offset shadows. - `#3FA34D` — **Phosphor Green** — accent #1: active inventory selection, "GO"/link sprites, the REC dot, terrain grass dither. - `#E84855` — **Arcade Red** — accent #2: warnings, footnote markers, the cursor's wave-frame, "danger" room tint. - `#2E86AB` — **Dither Blue** — accent #3: sky gradients (achieved by *dithering* between this and white, never a smooth gradient), water, "info" panels. - `#F2C14E` — **Brass Yellow** — accent #4: highlighted keywords, treasure-glint sparkles, the magnifier lens. - `#9A9A9A` — **Fog Grey** — the 50% dither tone used everywhere a "midtone" is needed (status strip, distant terrain, disabled slots). Color is applied in **flat fills and ordered-dither patterns only**. No alpha gradients, no box-shadow blur > 0, no `filter: blur()`. A "gradient" on this site means a 4-step Bayer dither between two of these hexes. ## Imagery and Motifs **Everything is a sprite.** All artwork is hand-placeable pixel art at a base resolution of roughly 320×200 logical pixels, scaled up 3–4× with nearest-neighbour. Six room "establishing shots," one per section: 1. **THE LOBBY** — a beige CRT tower on a desk, fan whirring (2-frame blade rotation), a sticky note that reads "press any key." Floor: linoleum-tile dither. 2. **THE LOOP CHAMBER** — a room whose far wall *is* the near wall (an Escher-lite pixel illusion): a corridor that visibly wraps. A sprite of the magnifier-character walking it on a 6-frame cycle, looping seamlessly. This is the "recursion" essay room. 3. **THE GREENHOUSE OF ROUTINES** — pixel ferns and a grid of potted "scripts" (each pot a tiny terminal window growing a green vine). Sun rays done as a hard-edged diagonal block-beam, dust motes as single blinking pixels. 4. **THE COLD STORAGE** — Dither Blue room, frost crystals as 8×8 snowflake sprites, a row of "frozen experiments" in icy blocks. The "abandoned ideas / negative results" room. 5. **THE ARCADE ALCOVE** — a cabinet running a fake game ("RESAR ZERO"), Arcade Red glow done as a stepped red-to-dark dither halo. The "play / experiments / demos" room. 6. **THE EXIT TERMINAL** — a green-on-charcoal VT323 console, a door sprite, a save-game icon (floppy disk, naturally). The closing/contact-less sign-off room. Recurring motifs: - **Marching-ants selection borders** (animated 8-frame dash offset) around anything interactive. - **The floppy disk** as a universal "save / keep this" glyph. - **Dither slopes** as scene transitions inside rooms. - **Single-pixel sparkles** (4-frame twinkle) on keywords and "treasure." - **2-frame idle animations** on every sprite — nothing is ever fully still; the world breathes at ~3fps. - **A pixel "scanline" overlay** at 8% opacity max — *one* horizontal line every 3 logical pixels, applied via a tiled background, not a filter. ## Prompts for Implementation Build resar.one as **one HTML page, one CSS file, one ES module** — no framework, no build step. Treat it as a tiny adventure-game engine, not a website. **Global setup:** - `image-rendering: pixelated` on `html` and every ``/canvas. Disable all anti-aliasing you can. - Establish a single CSS custom property `--px: 4px` (the scale unit). *Every* size, gap, border, and offset is `calc(N * var(--px))` — never raw px, never `em`, never `%` for layout. The whole site is one big pixel grid. - Custom `cursor: url('cursor-idle.png') 12 12, auto;` swapped to `cursor-wave.png` on `:hover` of interactive elements. - All borders: `2px solid #2B1B12`. All "shadows": `box-shadow: calc(2*var(--px)) calc(2*var(--px)) 0 #2B1B12;` — **blur radius always 0**. Inset bevels for inventory slots use two stacked solid box-shadows (light + dark) to fake the Win95 sunken look. - No `transition` on opacity for scene changes — use **step()** easing (`steps(24)`) so wipes look like column-by-column reveals, and `steps(2)`/`steps(3)` for sprite idle frames. **Storytelling structure (six rooms, pixel-wipe between them):** 1. **Room 01 — THE LOBBY.** Boot sequence: VT323 text types out `RESAR.ONE :: lab floor :: loading...` line by line (typewriter via JS, one char per frame), then a hard wipe reveals the CRT-tower scene. A `Silkscreen` panel introduces RESAR in-character ("we left the door open"). The CRT fan is a CSS `steps(2)` background-position loop. Inventory bar slides up from below on a `steps(8)` animation. 2. **Room 02 — THE LOOP CHAMBER.** The recursion essay. The wrap-around corridor is a single tiled background image scrolling horizontally forever (`steps`-eased, slow); the walker-sprite is `position: sticky` and runs its 6-frame cycle. Body text appears one parchment panel at a time, each panel "stamped" in with a 1-frame scale-from-0 (no smooth scaling — it goes 0 → full in one step, with a tiny screen-shake of 1px). 3. **Room 03 — THE GREENHOUSE.** The "what we're growing" / projects-as-plants room. Each "plant pot" is a hover target: hovering grows the vine 3 discrete frames and pops a `Silkscreen` tooltip with a marching-ants border. The diagonal sun-beam is a CSS `repeating-linear-gradient` quantized to hard 8px steps (no soft falloff). 4. **Room 04 — THE COLD STORAGE.** Negative results / shelved ideas, written honestly and a little wistfully. Dither Blue dominates. "Frozen experiment" blocks crackle (3-frame ice-crack sprite) when scrolled into view via IntersectionObserver. Frost slowly creeps in from the screen edges as you read (a clip-path that advances in chunky steps tied to scroll position). 5. **Room 05 — THE ARCADE ALCOVE.** Live little experiments / demos embedded as fake "cabinet screens." The cabinet's red glow is a stepped radial dither (build it as a tiled PNG, not a CSS radial-gradient). One cabinet actually plays a 10-second looping canvas micro-animation ("RESAR ZERO" attract mode). Marching-ants border pulses around the "INSERT IDEA" slot. 6. **Room 06 — THE EXIT TERMINAL.** Sign-off as a green VT323 console on charcoal. No contact form, no newsletter, no "let's work together." Just a floppy-disk "SAVE & QUIT" sprite that, when clicked, does a full-screen pixel-wipe to black and types `[ session ended — come back any time ]`. Optionally a single mailto link styled as a `> _` prompt line. **Hard rules — what NOT to build:** No CTA buttons. No pricing tables. No stat-grids ("10k users"). No testimonial carousels. No logo walls. No cookie banner. No hero with a giant headline + signup. No smooth scroll-jacking, no parallax depth layers, no glassmorphic cards, no soft drop shadows, no gradient meshes, no cursor-follow physics blobs. If it would look at home on a 2024 SaaS landing page, it is wrong here. **Animation philosophy:** everything moves at a low, honest frame rate (2–6 fps) via `steps()` easing. The site should feel *hand-cranked*, like a sprite sheet flipping. Reduce motion: respect `prefers-reduced-motion` by freezing idle loops and replacing wipes with instant cuts (which still look fine — they're cuts). ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Pixel-art as the literal rendering model, not a decorative skin.** The corpus uses pixel-art at ~3% and almost always as an accent on an otherwise modern site. resar.one makes *the entire layout grid, the cursor, the scroll/transition model, the shadows, and even the "gradients"* obey 8-bit constraints — `box-shadow` blur is forbidden, all sizing is `calc(N * --px)`, and a gradient is by definition a 4-step dither. Nothing in the corpus commits this hard. 2. **Adventure-game navigation instead of scroll or nav-bar.** Against the 91% card-grid / 82% centered / 88% cursor-follow corpus defaults, this site has a **bottom inventory bar of sprite-slots** and **hard pixel-wipe screen transitions** — you "change screens," you don't scroll a feed. Marching-ants selection borders replace the ubiquitous hover-lift. 3. **A custom animated sprite-cursor character.** Most sites in the corpus do cursor-follow blobs or magnetic dots. This one replaces the OS cursor with a 24×24 hooded-magnifier *character* that has idle and wave frames — the visitor is literally a sprite walking the lab floor. 4. **Anti-blur, anti-gradient, anti-glass discipline.** Explicitly bans `filter: blur()`, soft `box-shadow`, gradient meshes, and glassmorphism — the three most overused things in the corpus (glassmorphism 82%, gradient palettes 94%, parallax 90%). All depth is faked with ordered dithering and hard 2px offset shadows. 5. **A research notebook wearing a 90s edutainment CD-ROM costume.** The content is genuine essays/experiments/negative-results; the wrapper is an in-character fiction ("RESAR lab floor"). This collapses the rare `playful` tone over `scholarly-intellectual` substance in a way that isn't pastoral-romantic, isn't corporate, and isn't terminal-hacker. **Chosen seed/style:** `90s pixel art playful` — *aesthetic: pixel-art, layout: full-bleed + diagonal-sections, typography: mono (bitmap — Press Start 2P / Silkscreen / VT323), palette: high-contrast limited 8-bit ramp, patterns: stagger + step-eased sprite frames + marching-ants, imagery: pixel-art / generative-art (canvas attract mode), motifs: retro-patterns + tech, tone: playful over scholarly-intellectual.* **Avoided patterns from frequency analysis:** glassmorphism (82%), warm gradient palettes (94%), parallax (90%), cursor-follow blobs (88%), card-grid (91%), centered hero-dominant (82%/15%), photography imagery (98%), spring/magnetic physics (84%/79%), pastoral-romantic tone (34%), soft `box-shadow`/`filter: blur()`. None of these appear; every one is consciously replaced with a pixel-native equivalent.