Festina UI — Design system for madhurimaram.com

Color

Semantic palette and foundation ramps from colors_and_type.css — COSS-aligned tokens over grass/gray/lime/yellow/mauve scales.

Semantic tokens

BackgroundPage canvas

ForegroundPrimary text

MutedLabels

CardPanels

SecondaryMuted fills

PrimaryFooter band

AccentHighlights

BorderDividers

Modal scrimProject popup overlay

Token	Maps to	Use
`--background`	`#FAFAFA`	Page canvas — never hardcode page bg
`--foreground`	`var(--gray-12)`	Primary text
`--muted-foreground`	`var(--gray-11)`	Labels, decks, meta
`--card` / `--secondary`	white / `var(--gray-2)`	Panels and muted fills
`--primary`	`var(--grass-11)`	Footer band, deep accent
`--accent`	`var(--grass-9)`	Interactive highlights
`--border`	`var(--gray-5)`	Dividers, frame outlines
`--ring`	`var(--lime-9)`	Focus rings
`--footer-band-bg`	`#F7F9F8`	Light footer band above dark band
`--modal-scrim-bg`	`#0A3C14`	Project popup overlay scrim (deep brand green)

Foundation ramps

Steps 1–12 per ramp. Prefer semantic tokens in components; use ramps for tints and domain accents.

Grass (brand green)

Gray (neutral UI)

Lime (bright highlight)

Rules

Semantic first — use var(--background), var(--foreground), var(--border) in reusable UI; ramps only when you need a specific step.
No page-local hex — extend colors_and_type.css and document here.
Project popup scrim — --modal-scrim-bg (#0A3C14); not neutral gray.
Detail pages — --detail-* aliases and color-mix(in oklab, …) for quiet rails; keep canvas on var(--background).
Masks and scrims — #000 / rgba scrims are allowed for overlays; not for surfaces or text.
Domain accents — skill pills, AI cluster, hire hero canvas may use named tokens; do not copy hex into slice CSS.

Typography

Font roles and size scale from colors_and_type.css — NaN Jaune Midi Medium for display, Onest for body and UI.

Font roles

NaN Jaune Midi Medium

--font-display / --font-heading — hero lines, section titles, editorial emphasis.

Display · --fs-2xl (36px)

Display headline

Onest

--font-body, --font-label, --font-sans — copy, nav, controls, metadata.

Body · --fs-base (16px)

The quick brown fox jumps over the lazy dog.

Label · --fs-xs (12px uppercase)

Section label · metadata

Class / role	Spec	Use
`detail-kicker`	Onest `--fs-xs` uppercase	Page category only
`detail-title`	NaN Jaune Midi Medium 42–56px	Once per detail page
`detail-deck`	Onest `--fs-card-title-mobile`, muted	Page summary
`detail-meta`	Onest `--fs-sm`	Date, reading time
`detail-post-title`	NaN Jaune Midi Medium 27–32px	Hub / post rows
`.hire-page`	`--hire-fs-*` scoped scale	Hire headings — not global detail sizes

Size scale (--fs-*)

--fs-2xs11px
Tiny labels, table headers
--fs-xs12px
Kick labels, eyebrows, meta
--fs-sm13px
Nav items, compact controls
--fs-md-sm14px
Compact card copy
--fs-base16px
Body default, post copy
--fs-md17px
Long-form body, Festina deck
--fs-lg20px
Card titles
--fs-xl22px
Footer wordmark
--fs-2xl36px
Section titles (h2)
--fs-heroclamp 40–64px
Hero name (h1)

Rules

Serif for voice, sans for interface — display type on headings only.
Use var(--fs-*) in slice CSS — not raw font-size: Npx.
Prefer shared roles (detail-title, detail-deck) over page-local type.
Letter-spacing 0 for display/body; wide tracking only on uppercase labels (--tracking-wide).
Hire page uses scoped --hire-fs-* — do not map hire headings to global detail sizes.

Spacing

Site-wide rhythm from --s-* in colors_and_type.css — 4px half-step base, 8px steps from --s-2 up. Festina docs use --festina-space-* aliases on top.

Base scale

--s-14px
Half-step — icon gaps, micro offsets
--s-28px
Tab stack, tight flex gaps
--s-312px
Kick labels, pill horizontal pad
--s-416px
Stacked demos, card header gap
--s-520px
Card vertical pad, frame panels
--s-624px
Section lead → demo, drawer/footer pads
--s-728px
Detail shell column gap (--detail-gap)
--s-832px
Example groups, hero inline pad
--s-936px
Festina page top pad, hire content inset max
--s-1040px
Hero blocks, container pad, footer band
--s-1248px
Home column gap, colophon top pad
--s-1664px
Large section breaks
--s-1872px
Shell horizontal inset (--shell-inset-x)
--s-2080px
Hero avatar size, large vertical rhythm
--page-bottom-pad100px
Legacy --s-24 alias — page bottom rhythm

Festina aliases

--festina-space-section24px

Section lead → first demo block

→ var(--s-6)
--festina-space-kicker12px

Example kicker → demo box

→ var(--s-3)
--festina-space-example32px

Between .festina-example-group blocks

→ var(--s-8)
--festina-space-stack16px

Stacked demo boxes, footer band vertical pad

→ var(--s-4)
--festina-space-group-label12px

Sidebar group label bottom inset

→ var(--s-3)
--festina-space-group-tab8px

Group label → first tab

→ var(--s-2)
--festina-space-group-break20px

Foundations → Components break (+ border)

→ var(--s-5)

Site footer band

--coss-footer-band-pad-y16px

Vertical pad on .coss-footer-band (top + bottom)

→ var(--festina-space-stack)
--coss-footer-band-pad-xclamp

Horizontal inset — full-width inner, band carries gutters

→ var(--hub-content-inset)
--coss-footer-meta-gap8px

Motto copy → © meta on .coss-footer__meta

→ var(--s-2)

Work detail semantic

--work-detail-figure-gapclamp

Inter-figure gap on scroll stage (alias: --work-detail-space-figure on page root)

→ clamp(--festina-space-stack, 2.5vw, --detail-gap)
--work-detail-sidebar-gap12px

Sidebar column internal stack

→ var(--festina-space-kicker)
--work-detail-grid-gap20–40px

Process / metrics column rhythm

→ clamp(--s-5, 4vw, --s-10)
--work-detail-principle-stack-gap12px

Scale / Results stack rows on stage metrics

→ var(--festina-space-kicker)
--work-detail-type-tag-gap8px

Static type/tool tag wrap (tablet/mobile + reduced motion)

→ var(--s-2)
--work-detail-project-nav-pad-y16–20px

Prev/next project nav band (x: --work-detail-project-nav-pad-x)

→ --festina-space-stack + --work-detail-stage-inset-x

Practice hub semantic

--practice-hub-scroll-offsetnav + 12px

Anchor scroll margin for hub sections

→ calc(--detail-nav-h + --festina-space-kicker)
--practice-hub-picker-gap12px

Picker grid + list gap on /work/ai

→ var(--festina-space-kicker)
--practice-hub-panel-gap24–36px

Practice folders panel stack

→ clamp(--festina-space-section, 4vw, --s-9)
--practice-hub-panel-pad20–32px

Practice folders panel inset

→ clamp(--s-5, 3.5vw, --s-8)
--practice-hub-copy-gap12px

Folder overview title → body

→ var(--festina-space-kicker)
--practice-hub-tab-pad-y8px

Protruding folder tab padding

→ var(--s-2)

Hire page semantic

Full harness for /hire-me — spec: hire-spacing-harness.md. Persona section accordions: #accordion. Work timeline optical band: #hire-work-timeline. Three families: page shell, persona panels, proof/fitment frames.

Proof index rail — .hire-frame--proof .hire-frame__rail is hidden on desktop; at ≤900px it becomes a full-width sticky horizontal index with scroll-spy. Main column is full width on desktop.

Hero deck — p.hire-hero__deck (intro sentence) + ul.hire-hero__deck-list (3 claims); synced from content/hire/overview.md. List gap uses --hire-persona-list-gap; lens stack uses --hire-page-hero-stack.

Hero jumps — .hire-hero__jump gap uses --festina-space-group-tab / --festina-space-kicker.

Optical logo rows — marquee 20px band and timeline 16px band are layout containers (tokens OK); per-slug translateY/heights are element-first exceptions — see design.md and hire-work-timeline-component.md.

--hire-page-gutterclamp
Horizontal inset — hero, content, marquee label
→ var(--hire-content-inset)
--hire-page-frame-gap36px
Between #hire-proof and #hire-fitment
→ var(--s-9)
--hire-page-hero-stack16px
Hero lens copy stack, jump divider, deck → bullet list gap
→ var(--festina-space-stack)
--hire-persona-section-gap36px
Between .hire-section blocks in persona panes
→ var(--s-9)
--hire-persona-content-gap12px
Inside each section — body, diagram, lists
→ var(--festina-space-kicker)
--hire-persona-accordion-stack-gap0
Accordion border group — shared edge between section accordions
→ 0
--hire-persona-list-gap12px
Signal lists + hero deck bullets (.hire-hero__deck-list)
→ var(--festina-space-kicker)
--hire-proof-section-gap16px
Between proof panels in .hire-frame__lower-main
→ var(--festina-space-stack)
--hire-proof-rail-gap8px
Rail ↔ main column (desktop layout; rail hidden ≥901px)
→ var(--festina-space-group-tab)
--hire-proof-rail-pad-block16px
Sticky index card vertical pad (≤900px horizontal rail)
→ var(--festina-space-stack)
--hire-proof-rail-pad-inline12px
Sticky index card horizontal pad
→ var(--festina-space-kicker)
--hire-proof-rail-stack12px
Index list item stack inside rail card
→ var(--festina-space-kicker)
--hire-proof-rail-mobile-pad-inline16px
Mobile sticky rail horizontal inset
→ var(--s-4)
--hire-proof-rail-mobile-pad-bottom8px
Mobile sticky rail bottom inset
→ var(--s-2)
--hire-proof-rail-stuck-label-margin-block-start8px
Stuck rail label top margin (≤900px)
→ var(--festina-space-group-tab)
--hire-proof-rail-stuck-label-margin-block-end8px
Stuck rail label bottom margin (≤900px)
→ var(--s-2)
--hire-proof-panel-title-gap24px
Proof panel H3 → content (timeline, stack, testimonials body)
→ var(--festina-space-section)
--hire-proof-panel-stack12px
Internal panel stacks — testimonial grid gap
→ var(--festina-space-kicker)
--hire-proof-meta-tight4px
Timeline meta → tags (.hire-work-timeline__head)
→ var(--s-1)
--hire-proof-content-gap8px
Timeline head block → description
→ var(--s-2)
--hire-proof-logo-row-gap12px
Timeline copy → acquired / client rows
→ var(--festina-space-kicker)
--hire-proof-chip-gap12px
Stack chips, fit groups, nudge rows
→ var(--festina-space-kicker)

Grids & layouts

Variant	Max width	Grid / rails	Key spacing
Home	800px	2-col `1fr 1fr`	48px gap; stacks @ 900px
Detail shell	1664px	284px left + center + 284px right	28px column gap; 72px shell inset
Play / Hire / AI work	960px inner column	Hero + overlapping content card; AI uses practice folders tabs	`--hub-content-inset` gutters; popup surface = `--popup-shell-max`
Colophon	800px	Topbar + stacked `.coss-frame`	48px top / 84px bottom shell pad
Festina UI	1120px	196px sidebar + docs panels	Alias tokens; sidebar `gap: 0`

Breakpoints where spacing steps down: 1280, 1040, 900, 767, 640, 600px.

Rules

Element-first — buttons, icon buttons, tabs: fixed heights from the scale.
Content-first — decks, post copy, drawer bodies: padding from the scale; height follows content.
Flex gaps — prefer gap: var(--s-*) over margin between siblings (COSS UI maps --spacing(n) → --s-n).
border-box — all components; borders count inside declared dimensions.
No new off-scale px — extend --s-* or add a named semantic token in colors_and_type.css, then document here.
Festina-first (shipped pages) — check this registry before adding spacing; define tokens in colors_and_type.css. Agent docs: docs/design-system-governance.md, DESIGN-WAYS-OF-WORKING.md.
Greenfield only — Figma is initial truth for new surfaces; after ship, code + Festina are truth.

Example groups

Kicker label

Demo box content

Next group

Second demo box

Buttons

Default for primary actions, ghost for quiet links, outline for secondary emphasis, and icon buttons for compact controls.

Icons

Phosphor fill-weight icons for navigation, social links, and inline affordances.

X

Substack

External

Menu

Surfaces

Framed panels group related content on detail pages, colophon, and this reference.

Panel surface inside a bordered frame.

Drawer

Bottom sheet for mobile site navigation — handle, title, scrollable links, and footer actions with scrim dismiss.

Dialog

Centered modal for focused tasks — backdrop blur, scrollable panel, footer actions, and Escape to close.

Accordion

Vanilla <details> / <summary> expand/collapse — two variants sharing .coss-accordion shell in coss-core.css. Spec: accordion-component.md. No React — native disclosure on all surfaces except work-detail learnings scroll-into-view.

Anatomy

Shell — .coss-accordion + modifier (--learnings or --section)
Item — details.coss-accordion__item
Trigger — summary.coss-accordion__trigger + Phosphor caret (ph-caret-down)
Panel — div.coss-accordion__panel
A11y — summary is the control; caret is aria-hidden

Learnings variant — coss-accordion--learnings

Uppercase kicker trigger (read N learnings). Stacked .coss-accordion__learning items with label + copy. Default closed in popups and hire diagram sections; open on work-detail stage. Also in Project popup and Work detail.

read 3 learnings

Context is the product

Campaign context quality drives copy quality more than prompt wording alone.

Eval before scale

First-pass quality was invisible until the eval layer made the gap measurable.

Prototype as decision

Customers react to working software, not slide decks — ship a prototype, get a real yes or no.

Section variant — coss-accordion--section

Grouped in .hire-persona-accordion-stack (--hire-persona-accordion-stack-gap: 0 — shared border). Testimonial sits above the stack. Live on /hire-me. Spacing: #spacing-hire.

read 3 learnings

What I can do for a team

At Aampe, I was the whole design function for a B2B MarTech company serving Swiggy, Grab, Deezer, and ThredUp at 500M events/day scale.

7+

Functional prototypes shipped to real customers

90–95%

First-pass copy quality after Relay redesign

How I build

Use-case matrix

Variant	Surfaces	Default state	Edit source
`--learnings`	Hire persona accordion stack; AI practice popups; work-detail stage band	Closed (popup + hire); open (detail stage)	Popup HTML + `sync-ai-practice-detail.mjs`
`--section`	Hire persona accordion stack (with learnings)	Closed	`content/hire/personas/*.md` → `sync-hire-personas.mjs`

Flat stack

All persona tabs use .hire-persona-accordion-stack with --learnings and --section as sibling rows — no nested accordions inside section panels.

Hub overlay for project briefs — bar, scrollable content, pinned footer nav. Spec: docs/popup-project-shell.md in the repo. Accordion (learnings variant). Live reference: /work/ai → Relay + Prompt Shaper. Surface width matches the hub inner column (--popup-shell-max), not the 1664px detail shell.

Layout tokens (2026-06)

Token	Value	Use
`--hub-content-inset`	`clamp(16px, 5vw, 36px)`	Hub gutters; modal root outer padding via `--popup-shell-inset`
`--popup-shell-max`	`min(960px − 2×inset, 100%)`	Surface max width (~888px desktop) — same as practice folders panel
`--popup-pad-x`	`clamp(20px, 4vw, 32px)`	Equal inner padding on bar, scroll content, footer
`--modal-scrim-bg`	`#0A3C14`	Scrim at 90% + blur — not neutral gray
Bar	Title + Close	Title left (`--hire-fs-panel`); icon Close (`ph-x`) top-right
Background scroll	Locked while open	Hub must not scroll behind scrim — only popup content scrolls

Composite hub

Folder tabs + picker + popup ship together as the Practice hub component. Spec: docs/practice-folders-hub.md.

Content tiers

Type A — Full brief (Relay): about, learnings, scale/results, media slideshow
Type B — Proof + media (Label Buddy): about, process box, results, media slideshow
Type C — Link-out (Prefix-First): short body + single CTA

Work detail showcase

Full-page AI practice briefs — sticky sidebar + scrollable media stage. Type footer: bordered Matter.js box on desktop (>900px), layout-stable spawn; static full-width flex-wrap on tablet/mobile. Images: caption → alt; embeds: below-media figcaption. Desktop: metrics + image slides inset to 960px. Spec: docs/work-detail-page.md. Accordion (learnings on stage). Live Type D: Relay · Label Buddy · Product Synthesis and Discovery using Claude · Designing With an AI Agent · Prefix-First Design.

Spacing scale

Work detail pages use global --festina-space-* aliases plus --work-detail-* semantics in colors_and_type.css. Full registry: #spacing-work-detail.

Festina token	Value	Work detail use
`--festina-space-group-tab`	8px	Section kicker / Process label → body copy
`--festina-space-kicker`	12px	Sidebar column gap; intro → meta
`--festina-space-stack`	16px	Meta → sidebar CTA; metrics band inset; learnings divider
`--festina-space-group-break`	20px	Process item stack row gap; copy → Substack CTA
`--festina-space-section`	24px	Metrics band bottom padding; stage process band
`--work-detail-figure-gap`	`clamp(stack, 2.5vw, --detail-gap)`	Inter-figure gap on scroll stage (page alias: `--work-detail-space-figure`)
`--work-detail-stage-media-max-w`	`min(960px, 100%)`	Shared desktop content column — metrics band + image slides; inset via `--work-detail-stage-inset-x`
`--work-detail-type-tag-gap`	8px	Static type footer tag wrap (≤900px)

Layout tokens

Token	Value	Use
`--work-detail-sidebar-w`	`min(272px, 26vw)`	Sticky sidebar column width
`--work-detail-stage-bg`	Cover-derived (Relay: `#281003`)	Media stage canvas
`--work-detail-pill-bg`	`color-mix(#000 14%, page-bg)`	Type + tool pills in physics footer
`--work-detail-metrics-meta-height`	`calc(11px × 1.35 + 4px)`	Scale/Results label row in paired grid
Caption policy	`resolveShowcaseAltText()` / `resolveShowcaseStageCaption()`	Images: JSON `caption` → img `alt` only. Embeds: below-media `figcaption` (optional `stageCaption` override)
Metrics grid	6-row flattened + `display: contents`	Scale num+label in one cell; row pairs align with Results
Type physics footer	`.work-detail-meta__physics-stage`	1px hairline border; layout-stable Matter boot; bottom flush to sticky sidebar
Embed facade	`.work-detail-showcase__embed-facade`	Glass play button; caption in `aria-label` + below-media `figcaption`; iframe loads on click

Mini layout (static)

Scaled preview — no Matter.js in Festina. Live pages use draggable type pills in the sidebar footer.

Relay is Aampe's core LLM copy-generation engine. Prompt Shaper is the conversational builder upstream — the translation layer between what a marketer can express and what the model needs.

Client: Aampe
Role: Head of Design & Product

Relay demo — message creation and translation in Aampe Composer

Scale

Up to ~100k Copy lines per campaign from one context

Results

First-pass quality

70–75% Before

~95% After

read 3 learnings

Context is the product

Campaign context quality drives copy quality more than prompt wording alone.

Popup vs detail

Hub popup — About kicker, Type in meta, Scale/Results + learnings in scroll body (Project popup)
Detail page (Type A/B/C) — intro only, Client/Role meta, type physics footer, metrics + open learnings on stage after slide 1
Detail page (Type D) — sidebar title + meta only (no About); article-first stage — see Inline diagrams
Source — keep popup blocks in content/ai-practices/popups/; renderer transforms at sync

Practice infographics

HTML framework diagrams baked to 1920×1080 PNG via Playwright — dark palette, NaN Jaune + Onest. Use for Type A/B scroll stacks and Type D cover slides (`.slide--cover` fill band). Type D article body uses live HTML instead — see Inline diagrams. Prefix-First PIL cover stays on its separate script. Full spec: docs/practice-infographic-component.md.

Regen

node scripts/generate-practice-diagrams.mjs --sync-media cowork-context
node scripts/generate-practice-diagrams.mjs --sync-media patches-agent
node scripts/sync-ai-practice-detail.mjs

Sources

content/ai-practices/diagrams/_shared/infographic-base.css
content/ai-practices/diagrams/cowork-context/source.html + manifest.json
content/ai-practices/diagrams/patches-agent/source.html + manifest.json

Baked previews

Automating Context Gathering — Cowork cover slide — Product Synthesis and Discovery using Claude — cover

Working with Patches — cover slide — Patches — cover

Article inline diagrams

Live HTML framework diagrams inside Type D work detail articles — editable markup synced via sync-ai-practice-detail.mjs (no Playwright). PNG harness remains for hub covers and Type A/B scroll stacks. Full spec: docs/article-inline-diagram-component.md. Live: Product Synthesis and Discovery using Claude · Designing With an AI Agent · Prefix-First Design.

Regen

# Edit article HTML, then:
node scripts/sync-ai-practice-detail.mjs

Markup patterns

Pattern	Classes	Use
Section diagram	`.work-detail-infographic`	Full-width block with top hairline
Inline under h2	`.work-detail-infographic--inline`	Compact grids under a section heading — no extra top border
Screenshots	`.work-detail-article__figure`	Substack exports in article body
Editorial dek	`.work-detail-article__dek`	Stage headline — not the sidebar h1

Sources

content/ai-practices/articles/cowork-context.html — live article (Substack-aligned)
content/ai-practices/articles/cowork-context-solution-draft.html — WIP solution/architecture (not live)
coss-work-detail.css — .work-detail-infographic* + [data-detail-layout="article"] spacing

Media slideshow

Story-style project media for Type A/B popups — segment bars, title + counter, Expand control, collapsed autoplay, tap-to-open fullscreen Blossom carousel. Public slide data lives in content/ai-practices/media/*.json; optional locked last slides in content/ai-practices/locked-access.md. Markup renders via scripts/lib/media-slideshow.mjs. Popups include  and sync injects the component. Locked slides: hub popups use green+lime (slideshow); work detail pages use theme-adaptive styling (detail-stage) — see Locked access. Live: /work/ai → Label Buddy · Tiny Design Shop (locked slide).

Contract

Piece	Selector / hook	Notes
Root	`[data-media-slideshow]`	One per popup; optional `data-autoplay-ms`
Inline track	`[data-media-slideshow-inline]`	Blossom carousel; slides need `data-slide-title`
Fullscreen	`[data-media-slideshow-dialog]`	One shared dialog per page; slides cloned on expand
Behavior	`coss-media-slideshow.js`	`bindMediaSlideshows(scope)` after modal mount
CSS	`coss-media-slideshow.css`	Slice — load with Blossom vendor on pages that use slideshows

Slide sources (9)

content/ai-practices/media/apps-aampe.json
content/ai-practices/media/cowork-context.json
content/ai-practices/media/email-variable-configurator.json
content/ai-practices/media/label-buddy.json
content/ai-practices/media/mangoes.json
content/ai-practices/media/patches-agent.json
content/ai-practices/media/prefix-first.json
content/ai-practices/media/relay-prompt-shaper.json
content/ai-practices/media/tiny-design-shop.json

Live demo — Label Buddy (6 slides)

Media block

Cover

1 / 9

Label Buddy — agent QA for semantic label validation

Label Buddy — semantic label QA at scale

I presented Label Buddy at GitLab's Other Interfaces in person in BLR

Semantic policy anyone can edit without touching code — status labels and strictness PMs own

Review 100k+ copy lines in under 10 minutes — analysis summary and detailed results in one pass

View scope, summary, and run costs in one surface — re-runs stay cheap when only revalidation is needed

40 hours to 1 hour monthly — shipped in a week on $200 Replit + Claude

Built-in docs — 8-stage pipeline, brand setup, and CSV flow in one surface

Export and reporting for onboarding QA — shareable output from each pipeline run

Read more on how I built a pipeline to save money on Claude API calls — all using Claude Code.

Locked access

Responsive sticker cover for case studies that are not public. Two render contexts: slideshow (hub popups — green field + lime badge) and detail-stage (work detail pages — theme-adaptive, no green field). Two statuses: locked (file + lock) and wip (hourglass). Content: content/ai-practices/locked-access.md.

Contract

Piece	Selector / hook	Notes
Root	`[data-coss-locked-access]`	One cover per project slug
Context	`data-coss-locked-access-context`	`slideshow` (hub) · `detail-stage` (work detail page)
Cover	`.coss-locked-access__cover`	Built-in sticker; optional `locked_image` PNG fallback
Sticker	`.coss-locked-access__badge`	`locked_badge` in markdown; `{project}` = picker card title
Booking CTA	`.coss-locked-access__cta`	`locked` only — default Cal.com link; override with `booking_url` / `booking_label`
Icons	`ph-hourglass-high` · `ph-file-text` + `ph-lock-simple`	`wip` vs `locked`
CSS (hub)	`coss-locked-access.css`	Green field + lime sticker — load with `coss-core.css`
CSS (detail)	`coss-work-detail.css`	`[data-coss-locked-access-context="detail-stage"]` overrides — page `--work-detail-*` tokens

locked — Relay (hub / slideshow)

Hub popup + hire slideshow context (data-coss-locked-access-context="slideshow"). Brand green field + lime sticker. Live: /work/ai → Tiny Design Shop popup.

More of details of this case study are under NDA

Book a call

locked — Relay (detail stage)

Work detail page context (detail-stage). Inherits page theme — no green field. Live: /work/aampe/ai/relay (last stage figure).

More of details of this case study are under NDA

Book a call

wip — Interleap

In progress — hourglass icon. Badge copy uses the picker card title for this slug (omit locked_badge or use {project}).

Interleap case study is in progress.

Practice folders hub

Full hire-page composite: .hire-content column → protruding folder tabs → practice picker panels → project popup shell. Click tabs to switch folders; click tiles to open a live popup demo. Spec: docs/practice-folders-hub.md. Production: /work/ai#practice-folders.

AI product design

Designing where AI is the point — from model-first products like Relay to AI features on existing SaaS surfaces and the MVPs that prove them before an engineering sprint.

Relay + Prompt Shaper Generate push, email, and SMS copy at ~100k lines from one campaign context. Productised the pair from ~70–75% to ~95% first-pass quality.

Label Buddy Agent QA — semantic label validation at ~100k copy lines

apps.aampe.com Lightweight experimentation platform — 7+ tools shipped to real customers outside the sprint queue

Prefix-First Design Prompt caching as a design framework

Structure

Column — .hire-content inside .hire-page
Folders — section.practice-folders[data-practice-folders] + ai-practices-folders.js
Panels — overview copy + one [data-hire-practice-picker] per tab (live pages) or [data-festina-practice-hub-picker] (Festina demo)
Popup — <template id="project-modal-panel-{slug}"> + bindHirePracticeModal() or Festina binder

Required assets

File	Load on hub pages
`coss-core.css` + `coss-hire.css` + `coss-work.css`	Folder chrome, picker, popup shell
`coss-interactions.js`	Popup binders
`ai-practices-folders.js`	Folder tab switching

Practice picker section

Hire-frame panel for a practice area: section title, lead copy, one or more featured project tiles with media (stacked when multiple), then secondary cards. Tiles open the project popup shell. On /work/ai, one picker per practice folder tab — three tabs on the live hub. Spec: docs/practice-picker-section.md. Live: /work/ai#ai-product-design.

Designing where AI is the point — from model-first products like Relay to AI features on existing SaaS surfaces and the MVPs that prove them before an engineering sprint.

Relay + Prompt Shaper Generate push, email, and SMS copy at ~100k lines from one campaign context. Productised the pair from ~70–75% to ~95% first-pass quality.

Structure

Section shell — .hire-section.hire-practice-section inside .coss-frame__panel
Lead — single p.hire-body between header and picker
Primary tile — .hire-practice-primary with 16:9 media; first in DOM
Secondary cards — .hire-practice-picker__card stack; title + copy only

Rules

One data-hire-practice-picker per hub; tile slug matches popup template or fetchMap
Every tile is <a href="{share-url}"> with aria-haspopup="dialog"
Expand affordance: ph-corners-out in circular icon button
DOM order = popup footer prev/next order
CSS in coss-hire.css only — page needs .hire-page

Testimonial cards

Grid of preview cards that open the hire testimonial drawer. Cards clamp to three lines; full quote + LinkedIn live in the drawer. Spec: docs/testimonial-card-grid.md. Live: /work/ai (4×2 grid) · /hire-me (2×4 in proof panel).

Structure

Stream — .hire-testimonials__stream (responsive grid)
Card — button.hire-testimonial-card.hire-testimonial-card--grid with data-hire-testimonial-open
Preview — .hire-testimonial-card__quote (3-line clamp) + .hire-testimonial-card__cite
Open affordance — .hire-testimonial-card__open + ph-corners-out (top-right)
Drawer — #hire-testimonial-drawer + bindHireTestimonialDrawer() in coss-interactions.js

Layout variants

Context	Desktop columns
Full-width frame (`#practices-testimonials` on /work/ai)	4
Proof panel (`#testimonials` on /hire-me)	2 (`.hire-frame__testimonials`)
Tablet ≤900px	2
Mobile ≤520px	1

Required assets

File	Load on live pages
`coss-hire.css`	Card grid + drawer chrome
`coss-interactions.js`	`bindHireTestimonialDrawer()`

Hire stack grid

Compact three-column tool grid for the hire proof panel — favicon + name. Live: /hire-me#stack. Curated list in content/hire/proof/stack.md; URLs from content/colophon/overview.md via sync-hire-stack.mjs.

Stack

Design, product, and AI-assisted build tools I use day to day — tap to visit.

Structure

Panel — .hire-frame__stack.coss-frame__panel inside proof frame
Grid — single ul.hire-stack__grid (3 columns desktop, 2 ≤520px)
Chip — a.hire-stack__chip with DuckDuckGo favicon + .hire-stack__chip-label
Filter — intersection of coding + design colophon stacks; no section headings on hire

Spacing tokens

Token	Use
`--festina-space-section`	Gap between stack groups
`--festina-space-stack`	Grid row gap
`--festina-space-kicker`	Group title → grid; icon → label

Hire work timeline

Vertical experience list inside the hire proof panel — logo, company · dates, tags, and short description. Live: /hire-me#work-timeline. Spec: hire-work-timeline-component.md. Source: content/hire/proof/work-timeline.md via sync-hire-work-timeline.mjs. Hire-only — not on /work/ai.

Work timeline

Aampe2025—present

Agentic MarTech · AI-native product · design leadership

Head of Product & Design — hybrid IC and leadership shipping AI workflows, prototypes, Relay, and design ops for agentic MarTech.
HueGrid2022—2024

Product design studio · MVPs · co-founder

Principal Product Designer & co-founder — led a team of 3 delivering sprint-based MVPs for AI, MarTech, Ed-Tech, and FinTech startups.
Nocoloco2019—2024

No-code agency · design sprints · co-founder

Head of Products & co-founder of India’s first no-code agency — Framer, Webflow, and Glide MVPs via design sprints.

Structure

List — ul.hire-work-timeline inside .hire-frame__work-timeline
Item — li.hire-work-timeline__item — 32px logo column + text column; top border except first row
Copy stack — .hire-work-timeline__copy wraps .hire-work-timeline__head (meta + tags) and description
Meta — .hire-work-timeline__company + .hire-work-timeline__dates on one line, middle-dot separated
Tags — .hire-work-timeline__tags — muted keyword line
Description — .hire-work-timeline__desc — 1–2 sentences
Acquired by — .hire-work-timeline__acquired — label + acquirer logo (optional acquired_by: slug in markdown)
Nudges — AI work + Play cards live in separate #work-previews panel above

Spacing tokens

Token	Use
`--hire-proof-item-pad`	16px padding above/below each row
`--hire-proof-item-col-gap`	16px logo → text column
`--hire-proof-meta-tight`	4px meta → tags inside `__head`
`--hire-proof-content-gap`	8px head block → description
`--hire-proof-logo-row-gap`	12px copy → acquired / client rows
Full registry: #spacing-hire · hire-spacing-harness.md

Empty

Placeholder when a view has no content yet — icon, short title, and supporting description.

Nothing here yet

Saved items and drafts will show up in this panel once you add them.

Tabs

Horizontal segmented controls for compact switches. Vertical orientation is live in this page’s left rail; underline is an alternate tab treatment.

Horizontal segmented

Horizontal with panels

Overview content — summary copy and entry points for the current section.

Vertical underline

Overview content — left rail tracks selection with an underline accent.

Compact top bar with brand mark and social icon buttons on detail pages.

iruhdam

Full-width band with motto, copyright, and ghost actions. Spacing: --coss-footer-band-pad-y (16px), --coss-footer-band-pad-x (--hub-content-inset), --coss-footer-meta-gap (8px). Inner spans full band width — gutters live on the band, not a centered max-width column.

Token	Maps to	Use
`--coss-footer-band-pad-y`	`var(--festina-space-stack)`	Band vertical padding (top + bottom)
`--coss-footer-band-pad-x`	`var(--hub-content-inset)`	Band horizontal inset; pairs with full-width `.coss-footer__inner`
`--coss-footer-meta-gap`	`var(--s-2)`	Motto → © line on `.coss-footer__meta`

Icon buttons on the dark footer band — same targets as the detail-page top bar.

Color

Typography

NaN Jaune Midi Medium

Onest

Spacing

Buttons

Icons

Surfaces

Drawer

Dialog

Accordion

Use-case matrix

Flat stack

Project popup shell

Layout tokens (2026-06)

Composite hub

Content tiers

Work detail showcase

Spacing scale

Layout tokens

Mini layout (static)

Popup vs detail

Practice infographics

Regen

Sources

Baked previews

Article inline diagrams

Regen

Markup patterns

Sources

Media slideshow

Contract

Slide sources (9)

Live demo — Label Buddy (6 slides)

Locked access

Contract

locked — Relay (hub / slideshow)

locked — Relay (detail stage)

wip — Interleap

Practice folders hub

AI product design

Building with AI

Process & Enablement

Structure

Required assets

Practice picker section

AI product design

Structure

Rules

Testimonial cards

Structure

Layout variants

Required assets

Hire stack grid

Stack

Structure

Spacing tokens

Hire work timeline

Work timeline

Structure

Spacing tokens

Empty

Tabs

Navigation

Footer

Social links

Relay + Prompt Shaper

Label Buddy

Working with Patches

Tiny Design Shop