Requiem Garden — personal design language

Requiem Garden — personal design language

Related: Personal site · README · Y2K · Nekoweb and plain HTML

Brand voice

• SITE_TITLE: Requiem Garden (src/consts.ts)

• SITE_DESCRIPTION: swoosh (intentionally tiny — motion/feeling over marketing copy)

• Soft, tender, bilingual (zh-CN primary on the live site). Infrastructure as care: servers named after plants, flowers in the wires, quiet systems.

• Signature close on blog posts: Fleur De Leah script spelling Noa Virellia, then Torus-light meta line (YYYY-MM-DD，N字，M分钟 • 已读完).

• Herbarium welcome epigraph (garden voice, not chrome):

  如果有一天我忘记了自己是怎样走到这里的，
  希望这些记录还能替我记得。

  尽情闪耀

• Not Frutiger aqua optimism, not dark Everforest terminal chic, not GeoCities maximalism. A pale sage paper garden with wide letter-spacing and ornamental glyphs.

---

Information architecture (nav)

From NAVIGATOR_LINKS in src/consts.ts — order matters (view-transition direction uses this order):

Label	Route	Role in repo today	Porch mapping (natural)
Noise	/noise	Blog index + posts (NoiseEntry list)	Posts / field notes
Vine	/vine	ConstructionSprout only	Works / growing projects
Solarium	/solarium	ConstructionSprout only	Observe-only fleet pulse (light, glass, watch)
Citadel	/citadel	ConstructionSprout only	About / foundations / systems home

Home (/) is separate: full-viewport Yipes title “Requiem Garden” + vine PNG bottom-right + Navigator. Star glyph (filled #556B58) links home.

Bodoni Ornaments watermark glyphs (Noise / Vine / Solarium / Citadel) sit bottom-right on framework pages at text-[#EAF3E9] text-8xl.

---

Color tokens (src/styles/global.css @theme)

Exact values — do not “garden-green invent” or swap in aqua:

Token	Value	Use
--color-primary	rgba(85, 107, 88, 1) ≈ #556B58	Body text, headings, star fill, scroll-to-top bar
--color-muted	#BBC5BB	Inactive nav links
--color-secondary	rgb(147, 166, 149) ≈ #93A695	Subtitles, meta lines
--color-separator	#D6E3D6	HR / dividers
body bg	#f4f8f2	Page paper
link chip	#e9f2e8 → hover #DDEBDC	Inline prose-a pills
glyph wash	#EAF3E9	Bodoni page glyphs
sprout stroke	#E3EDE2	ConstructionSprout SVG
prose hr	#d6e3e6	(note: slight blue-gray vs separator)
scroll bar fg	#f4f8f2 on #556B58	Blog “back to top” bar

prose-garden remaps all Tailwind prose ink to primary.

How this differs from generic Y2K aqua / Frutiger

Generic Y2K / Frutiger aqua porch	Requiem Garden
Sky aqua #5ec4d0, cyan rims, glassy frost	Sage primary #556B58 on pale leaf paper #f4f8f2
Pixel / Verdana shouty headers	Torus extralight + wide tracking; Yipes for the proper name
Chrome bevels as the palette	Bevels can stay as structure; color stays garden
“Optimistic tech utopia” gloss	Quiet memorial garden + living systems (“swoosh”)

---

Type tokens

@font-face in global.css + Google import for Leah:

Family	File / source	Role
Yipes	/fonts/yipes.otf	Home display title (text-8xl)
Torus	torus-regular.otf + torus-light.otf (weight 200–300)	Nav, Noise titles, blog H1, meta
Bodoni Ornaments	bodoni-ornaments.otf	Giant decorative page glyphs
Fleur De Leah	Google Fonts	Post signature “Noa Virellia”
--font-sans	system-ui / Segoe / Roboto + CJK stack (PingFang SC, YaHei, Noto Sans CJK SC, …)	Body
--font-mono	Fira Code → ui-monospace stack + CJK	Link chips, technical asides

Typical Torus rhythm: font-extralight, tracking 0.18em (nav / H1) or 0.43em (Noise subtitles / read-complete line), sizes from text-base up to 2.5rem / 2rem for entries.

---

Motion tokens (src/styles/animations.css)

--vt-duration: 600ms
--vt-glyph-duration: 450ms
--vt-glyph-delay: 150ms
--vt-ease-primary: cubic-bezier(0.22, 1, 0.36, 1)
--vt-ease-linear: linear
--vt-fill-mode: both

• Cross-document @view-transition { navigation: auto; }
• Home ↔ section: vertical push; section ↔ section: horizontal slide by nav order
• Glyph old/new: fade with glyph duration/delay
• Local UI: transition-colors duration-300 on nav / NoiseEntry underlines
• Honor prefers-reduced-motion: reduce (root VT animations none)

---

Component motifs

Navigator (Navigator.astro + HeaderLink.astro)

Horizontal Torus-extralight list: Noise / Vine / Solarium / Citadel with / separators via li::after. Active = primary; idle = muted; hover → primary over 300ms. Star SVG home affordance.

ConstructionSprout

Centered Lucide-style sprout SVG (src/assets/sprout.svg), huge (h/w 384px), stroke #E3EDE2, fills Vine / Solarium / Citadel until those rooms exist. Under-construction spirit without yellow caution tape.

NoiseEntry

Column: secondary tracking subtitle (date · Featured?) + extralight 2rem Torus title link with underline that paints in on hover (decoration-transparent → decoration-current).

FrameworkLayout

zh-CN, Head + Navigator, optional Bodoni glyph with transition:name={glyph-${glyph}}.

Assets

• vine.png — home background (right/bottom, ~49% / 706px)
• star.svg — four-point soft star
• sprout.svg — construction placeholder
• Public fonts under /fonts/

---

Herbarium adjacency

Public pelikanade/herbarium (herbarium.requiem.garden) reuses Yipes for .site-title and shares the garden voice. Starlight chrome tweaks only — palette source of truth remains requiem.garden global.css. Porch should feel like the front step of this same soft sage world, not a separate aqua brand.

---

Prototype application

See Personal site and Design/prototypes/personal-site-home-v0.html: keep Y2K layout structure (fixed ~860px two-column table, sidebar, 88×31 rail, beveled boxes) but paint with these tokens — not generic Frutiger aqua.

Confidence: High on tokens (read from repo). Medium on Solarium/Citadel semantic mapping until those pages grow content beyond ConstructionSprout.