Fezcodex supports different project detail page styles to best present each project. Currently, there are two distinct styles available: "Stylish" and "Techno".

To assign a style to a project, set the (style) field in public/projects/projects.piml:

> (project)
  (slug) my-cool-project
  (style) stylish  ; or 'techno'
  ...

If no style is specified, the default layout will be used.

This layout is designed for high-production, landing-page style showcases. It features a rich, component-driven design ideal for web apps and major projects.

Content resides in public/projects/[slug]/ as .txt files (previously .mdx).

public/projects/my-project/
├── hero.txt          # Hero section
├── partners.txt      # Tech stack/Partners
├── terminal.txt      # Interactive terminal tabs
├── integrations.txt  # Feature showcase grid
├── features.txt      # Icon cards grid
├── technical.txt     # Technical specs
├── details.txt       # Long-form content
└── cta.txt           # Call to action

(Same block parsing rules as before apply, e.g., :::feature, :::tech)

The Editorial style (formerly Techno) is a raw, brutalist, developer-focused aesthetic. It uses monospaced fonts, high-contrast dark modes, and terminal-inspired elements. It is perfect for CLIs, system tools, and low-level libraries.

Content resides in public/projects/[slug]/ as .txt files.

public/projects/my-cli-tool/
├── hero.txt          # Hero title and description
├── features.txt      # (Not currently used in Editorial layout, but reserved)
├── terminal.txt      # Terminal session preview (supports colors)
├── install.txt       # Installation command(s)
├── social.txt        # Horizontal scrollable "social proof" or "explore" cards
├── description.txt   # Main project description (Overview, Features)
└── footer.txt        # (Reserved for footer links)

• Lines starting with #: Title lines (rendered in large serif font).
• image: tag: (Ignored in Editorial layout as it uses a global background grid, but good to keep for metadata).
• Body: Description text below the title.

# Engineered
# For The Shell

Dush is the custom terminal shell...

Raw text that is rendered inside a terminal window component.

• Supports standard Markdown code blocks.
• Use rehype-raw compatible HTML spans for colors if needed (e.g., <span class="text-yellow-500">warn</span>).

  <span class="text-[#b8bb26]">➜</span> ~ dush
  dush> echo "hello"

Contains the raw installation command string.

go install github.com/fezcode/dush@latest

Defines the "Explore With Us" cards. Entries are separated by ---.

• Line 1: Title (optionally starts with #).
• Line 2: Author / Subtitle.
• Line 3: Stats string (e.g., +10 -2 ~1).
• link:: URL for the card.
• image:: (Optional) Background image URL.

# Why I built Dush
fezcode
+10 -2 ~1
link: https://github.com/fezcode/dush
---
# Architecture
...

The main content area ("About the Project").

• Standard Markdown.
• Supports lists, bolding, and headers.
• ## Headings separate the content into different grid rows in the layout.

## Overview
Dush is a minimalist shell...

## Key Features
- Feature 1
- Feature 2

The Hi-Fi style ((style) hifi) turns the project page into a working music player. It was built for Timp but is fully data-driven and reusable for any audio/media project. Warm near-black ink, cream type (Unbounded display, Hanken Grotesk body, Spline Sans Mono labels), and — the signature — a transport that "plays" a queue of color palettes: every record re-samples the whole page's accent colors, exactly like Timp samples its accent from album art.

Sections mirror the app's own panels: Now Playing (hero player + record rack), The Queue (features as tracks, keyed with real hotkeys), Lyrics (manifesto with scroll-synced karaoke highlight), Equalizer (source modules as faders, heights = real file sizes), Screens, and Liner Notes (stats, build snippet, credits). A mini-player bar docks to the bottom once the hero scrolls away.

All content lives in a single JSON config:

public/projects/my-player/
└── hifi.txt          # One JSON config for the whole page

• wordmark, tagline, artist, version, repo, download, formats
• trackSeconds: how long each palette "track" plays (default 24)
• queue[]: { title, desc, keys[], palette: { name, a, b } } — one entry per feature; a/b are the two gradient stops sampled into --acc/--acc2
• lyrics: { caption, lines[] }
• eq: { heading, note, bands[]: { file, kb, level (0..1), role } }
• screens[]: { src, caption }
• stats[]: { value, label }
• build: { caption, lines[] } (rendered with a copy button)
• liner[]: paragraphs, credits[]: { name, role, href }, license

The Bentos style ((style) bentos) is a long-form product launch page that alternates light and dark bands, after the umbrelOS landing page. It was built for Airlift and is fully data-driven. Manrope display/body, Style Script for the one hand-lettered hero word, Instrument Serif for the tilted "craft" cards. The sticky header switches between light and dark to match the band beneath it (sections carry data-tone).

Bands, top to bottom: pastel hero (headline + script word, icon orbit, CTAs, a device frame with a working theme switch and blurred side peeks), dark bento grid of mixed tiles plus a story carousel, a companion card (terminal + status panel), a light catalog (category tabs over a sliding card track), dark feature slides, light screenshot rails, ways to run comparison cards with dot ratings, tilted craft cards, a trust bento with an animated dot matrix, a changelog masonry wall, a closing CTA and a coloured footer. Every block is optional: omit a key to drop its band.

public/projects/my-app/
└── app.txt           # One JSON config (shared app-shell schema, extended)

• Shell: name, logo, version, tagline, subtitle, download, downloadLabel, repo, repoLabel, stack[], announcement { badge, text, href }, nav[] { label, href }
• hero { lines[2], script, subtitle, primary, secondary, caption }
• showcase { address, themes[] { id, label, swatch, image }, left, right }
• whatsNew { eyebrow, title, tiles[], stories[] { image, title, body } } — each tile has type, col (of 12) and row (166px units). Types: shot (title, image, icon, focus), photo (image, title, highlight, tint, ink, highlightColor), toggle (word, label), metal (word, label), icons (image, title, icons[]), big (image, word, number), chat (ask, reply, label), keys (keys[], title), note (title, body), frame (title, body)
• pocket { badge, eyebrow, title, body, buttons[], note, commands[] { cmd, note }, panel { title, subtitle, status, detail, rows[] { label, value }, footTitle, foot } }
• catalog { eyebrow, title[], subtitle, groups[] { label, icon, heading, body, apps[] { name, line, icon, href } }, cta }
• features { eyebrow, title, subtitle, slides[] { eyebrow, title?, highlight, after, image } }
• rails[] { id, eyebrow, title, cards[] { image, title, body } }
• ways { eyebrow, title, options[] { name, art (installer|folder|terminal), file, badge?, cta, ratings[] { label, value 0..5 | text }, bestFor, youGet } }
• craft { eyebrow, title, body, cards[] { before, highlight, image, tone } }
• trust { eyebrow, title, body, big { title, body, cta }, small[] { icon (home|shield), title, body, chip } }
• changelog { eyebrow, title, body, entries[] { version, date, body, image? } } — each card links to <repo>/releases/tag/v<version>
• closing { title, body, primary, secondary, links[] { title, body, href }, tagline }
• footer { title, body, columns[] { title, links[] { label, href } } }

The Flow style ((style) flow) is a warm editorial page after the Wispr Flow landing page, built for Hisashi. Cream paper, EB Garamond display with italic turns, Figtree body, a floating pill nav and lavender CTAs. The product is drawn rather than pictured: a live top bar (HisashiBar) painted from the app's real theme tokens appears in the hero ribbon, the step cards and the theme switcher.

Bands: announcement strip, hero with text flowing along SVG curves into the bar, a dark built-with marquee, a green one bar on every screen comparison, a sticky scroll-told how it works (steps advance with scroll on desktop, stack on mobile), a theme switcher over all themes, focus rows that ink in as they reach the middle of the viewport, a privacy card, a dark wall of tilted coloured cards, a chat-style FAQ, a photographic closing band and a product footer.

Content lives in the shared app.txt under a flow key: announcement, ctaLabel, nav { tabs[], links[] }, hero { eyebrow, line1, line2, subtitle, note, messy, clean }, logos { label, items[] }, speed { title, italic, body, before, after, image }, how { eyebrow, title, italic, steps[] { nav, title, body, demo (peek|zones|menu|toast), image } }, themesSection, features[] { title, body, demo (themes|contrast|plugins|code) }, plugins[], privacy, wall { eyebrow, title, italic, cards[] { kind (feature|quote), color, name, role, quote, image?, stats?, href?, flip? } }, faq { items[] { q, a } }, closing, footer { products[], columns[] } and themes[] { id, name, group, dark, bg, fg, border, sep, accent, muted, icon, chip, radius, font } — the theme list is extracted from the app's own theme JSON files.

The Capsules style ((style) capsules) follows capsules.moyra.co and was built for Qemik: Host Grotesk on warm near-black, a giant wordmark inside a rounded hero card, a floating Menu pill, "(Scroll)" markers, pill tags, an intro paragraph that inks in word by word with scroll, a screenshot that grows from a thumbnail to full screen behind a moving wordmark, full-screen machine cards that stack as you scroll (each with a details drawer), a "Why X?*" marquee over stacked feature cards, levelled draggable settings cards, a quote carousel, a clickable closing ribbon and a gradient wordmark footer. Moyra's "Reserve" drawer becomes a three-step machine wizard. Calls to action open the wizard, jump to build steps, or link to follow — the page never invents a repository or download (repo may be null while a project is unpublished).

Content lives in app.txt: hero, intro, choose, machines[] { name, image, blurb, details[][2], cost }, steps, why { marquee, cards[] }, settings { levels, cards[] }, quotes, wizard { systems, memory, cpus }, build[], closing, footer, plus status, version and follow.

• Images: Place images in public/images/projects/ or public/images/bg/.
• Icons: Use Phosphor icons where applicable in code, or SVG assets.

1. Create the folder public/projects/[your-slug].
2. Choose your style: stylish, editorial, hifi, etc.
3. Create the corresponding .txt files based on the chosen style's structure.
4. Add the project to public/projects/projects.piml with the correct (style) field.
5. Run npm run lint to ensure code quality.