Pocket FM Design System

Overview

Pocket FM's design system presents a whimsical, retro-inspired hiring portal that feels less like a corporate careers page and more like stepping into a cozy pixel-art room. The entire experience unfolds within a staged environment—a warm cream-colored canvas ({colors.canvas}) that serves as the backdrop for a virtual office space complete with potted plants, windows showing greenery, decorative signage reading "NICE TO FEET YOU" and "TAKE A BREATHER," and wandering pixel characters. At the center of this diorama sits the primary interaction surface: a clean white modal card ({components.modal-card}) that houses all critical content, creating a theatrical frame-within-a-frame composition.

The color philosophy is deliberately warm and inviting. The palette draws from earthy browns, creamy beages, sage greens, and a single voltage color—a bright, almost-neon red ({colors.accent}) reserved exclusively for the primary call-to-action button. This red isn't deployed subtly; it commands attention through both its saturation and its distinctive shadow treatment—a multi-layered retro-game-style offset shadow ({extensions.shadows.button-retro}) that gives the button physical presence and tactile appeal. Brand identity lives primarily in the brown tones ({colors.primary} at #3a2a1c) which appear in navigation marks and text accents, while the surrounding room environment uses tans and greens to create atmospheric depth without competing with the central content.

The typography tells a story of its own. Display headings use a proprietary serif face—"redacted 35 bold"—rendered at {typography.display-lg} (32px, weight 700) with aggressively tight letter-spacing (-1.12em), giving headlines an editorial, almost vintage-book quality that contrasts sharply with the digital-native cleanliness of the body text set in "Mallory Compact." A third voice enters via the monospace "VT323" font ({typography.mono}) used for environmental signage and decorative labels, reinforcing the retro-computing/pixel-art aesthetic. This three-way type dialogue—serif for importance, sans-serif for readability, monospace for atmosphere—is the system's most distinctive typographic move.

Shape language balances softness with intentionality. The modal card and speech bubbles use moderate rounding ({rounded.lg} at 12px, {rounded.md} at 12px), while secondary buttons go fully pill-shaped ({rounded.pill}). The primary CTA button notably uses only slight rounding ({rounded.DEFAULT} at 8px), giving it a more solid, rectangular presence that echoes classic game UI buttons. Decorative elements like signage boards share this restrained radius, creating visual cohesion across functional and environmental components.

Key Characteristics:

• Warm cream canvas ({colors.canvas} — #fff9e5) establishes the room-environment backdrop across the full viewport
• White modal surface ({components.modal-card}) creates a focused content container with {rounded.lg} corners and generous internal padding
• Bright red CTAs ({component.button-primary} — {colors.accent}) feature signature multi-layered retro offset shadows ({extensions.shadows.button-retro})
• Serif display type ({typography.display-lg}) at 32px/700 weight with -1.12em letter-spacing drives all major headlines
• Clean sans-serif body ({typography.body-md}) at 14.88px/400 weight handles all readable content in {colors.body}
• Monospace environmental type ({typography.mono}) in VT323 brands signage boards and decorative marks
• Pixel-art mascot imagery sits centered above the headline, serving as the emotional anchor
• Secondary navigation uses pill-shaped ghost buttons ({component.button-secondary}) with {rounded.pill} geometry
• Sage green ({colors.semantic-green}) and dark green ({colors.semantic-green-dark}) color the environmental signage boards
• The entire composition is framed as a staged "room" with layered depth elements (walls, windows, carpets, plants)

Colors

Brand & Accent

• Primary ({colors.primary} — #3a2a1c): Deep warm brown used for brand marks, navigation text, and subtle text accents; carries the Pocket FM identity without dominating.
• Primary Active ({colors.primary-active} — #2d2015): Darker brown for pressed/active states on primary-branded elements.
• Accent ({colors.accent} — #fd1500): Bright, high-voltage red reserved exclusively for the primary "Apply now" CTA button; the single most eye-catching color in the system.
• Accent Hover ({colors.accent-hover} — #e41300): Slightly darkened red for hover/active states on the CTA button.
• Accent Shadow ({colors.accent-shadow} — #c40f00): Deepest red used in the bottom layer of the button's retro shadow stack.

Surface

• Canvas ({colors.canvas} — #fff9e5): Warm cream/beige that paints the entire room environment background; the foundational color of the experience.
• Surface ({colors.surface} — #ffffff): Pure white used for the central modal card, speech bubble, and any content requiring maximum contrast and focus.
• Surface Warm ({colors.surface-warm} — #f7f6ef): Slightly off-white for subtle surface differentiation where pure white feels too stark.
• Surface Tan ({colors.surface-tan} — #e3cfa9): Medium tan used for active states on secondary surfaces and some decorative elements.
• Surface Brown ({colors.surface-brown} — #dfac76): Richer tan/gold coloring carpet tiles and some room fixtures.
• Surface Room ({colors.surface-room} — #dfac76): The base color of the stage/room container element behind all scenery.

Text / Ink

• Ink ({colors.ink} — #1c1c1c): Near-black for primary text, headlines, and high-importance copy; the darkest color in normal usage.
• Body ({colors.body} — #242321): Very dark brown-black for body paragraphs and standard readable text; subtly warmer than pure black.
• Muted ({colors.muted} — #1c1c1c): Same hex as ink but typically rendered at 66% opacity for secondary/descriptive text.
• Muted Opacity ({colors.muted-opacity} — #1c1c1c): Reference token for text that applies opacity reduction (66% alpha) to create visual hierarchy.
• On Primary ({colors.on-primary} — #ffffff): White text for legibility against the dark brown {colors.primary} background.
• On Accent ({colors.on-accent} — #ffffff): White text for the red CTA button label.
• On Dark ({colors.on-dark} — #ffffff): White text used on dark signage boards and any dark-surface elements.

Hairlines & Borders

• Hairline ({colors.hairline} — #f0dfb4): Very light tan/cream for subtle dividers and fine borders that should recede visually.
• Border Strong ({colors.border-strong} — #8d6b49): Medium brown for visible borders on cards, inputs, and defined containers.
• Border Dark ({colors.border-dark} — #365342): Dark sage green for borders on the mat signage and certain environmental elements.

Semantic / Environmental

• Semantic Green ({colors.semantic-green} — #829369): Mid-tone sage green for the "TAKE A BREATHER" signage board background.
• Semantic Green Dark ({colors.semantic-green-dark} — #365342): Deep forest green for the "NICE TO FEET YOU" floor mat background.
• Semantic Yellow ({colors.semantic-yellow} — #ffd23f): Bright golden yellow observed in some decorative/accent elements.
• Semantic Purple ({colors.semantic-purple} — #b98cff): Soft lavender purple appearing in certain accent or decorative contexts.
• Error ({colors.error} — #c13515): Red-orange for error states and validation feedback.
• Success ({colors.success} — #365342): Dark green for success confirmations (shares value with semantic-green-dark).

Typography

Font Family

The system employs four distinct typefaces, each playing a specific role in the design's narrative voice. "Redacted 35 Bold" (with fallback to "Redacted 35" and Georgia serif) serves as the exclusive display typeface for all h1-level headlines and major statements. It's a proprietary serif with strong personality—warm, slightly irregular, evoking vintage editorial design or book typography. "Mallory Compact" (falling back to -apple-system, BlinkMacSystemFont, Inter, and system-ui sans-serif) handles all body text, UI labels, buttons, and interface elements; it's a clean, modern grotesque with excellent readability at small sizes. "Mallory Book" (a lighter weight variant) appears in subtitle and secondary heading contexts. "VT323" (a Google Font loaded explicitly, falling back to Courier New and monospace) delivers the retro-computing voice for environmental signage, decorative marks, and any text meant to feel like part of the room's "decor" rather than the interface.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 40px | 700 | 1.08 | -1.2em | Hero-scale statements (potential larger breakpoints) | | {typography.display-lg} | 32px | 700 | 1.08 | -1.12em | Main headline ("Pocket FM is hiring designers") | | {typography.display-md} | 24px | 400 | 1.2 | -0.02em | Sub-headlines, section titles in serif | | {typography.title-md} | 18px | 400 | 1.4 | 0 | Card titles, section headers in sans-serif | | {typography.body-lg} | 16px | 400 | 1.45 | 0 | Speech bubble text, emphasized body | | {typography.body-md} | 14.88px | 400 | 1.45 | 0 | Standard body copy, descriptions | | {typography.body-sm} | 13px | 400 | 1.4 | 0 | Secondary text, metadata, small labels | | {typography.caption} | 12px | 400 | 1.35 | 0 | Legal disclaimers, footnotes | | {typography.button} | 16px | 700 | 1.25 | 0.02em | CTA button label ("Apply now") | | {typography.mono} | 13px | 400 | 1.4 | 0 | Code-like marks, small environmental text | | {typography.label-signage} | 18px | 400 | 1.3 | 0.05em | Large signage board text ("NICE TO FEET YOU") |

Principles

The typography system's defining characteristic is its contrast of voices between display and body text. Headlines don't just get bigger—they change genre entirely, switching from the clean sans-serif of body text to a warm, slightly eccentric serif. This is a deliberate choice that makes the hiring message feel personal and crafted rather than templated. The aggressive letter-spacing on display text (-1.12em on the h1) tightens the letterforms to create a dense, impactful block that commands attention despite the relatively modest 32px size.

Weight distribution follows a binary principle: display text is always bold (700), body text is always regular (400). There are no intermediate weights in the primary hierarchy—emphasis comes from size, color, and typeface choice rather than bolder weights within the same family. The one exception is the button label, which uses weight 700 in the sans-serif family to match the display text's authority while remaining in the UI typeface.

Color plays a subtle but crucial role in hierarchy. The headline uses {colors.ink} (pure near-black), while the subheading drops to {colors.muted} (same color at 66% opacity), and the legal disclaimer at the bottom uses the same treatment at caption size. This opacity-based deprecation is cleaner than introducing new color tokens for each hierarchy level.

The monospace voice (VT323) is used exclusively for environmental/atmospheric text—signage boards, the "Pocket FM Design" mark at the top of the room, decorative labels. It never appears in primary content, preserving its specialness as part of the "set design" rather than the "interface."

Note on Font Substitutions

The proprietary fonts "Redacted 35," "Redacted 35 Bold," "Mallory Compact," and "Mallory Book" are custom typefaces served from Pocket FM's CDN. For open-source reimplementation, substitute as follows:

• Redacted 35 Bold → Merriweather (Google Fonts) at weight 700, with font-display: swap
• Redacted 35 → Merriweight or Lora (Google Fonts) at weight 400 for the regular serif
• Mallory Compact → Inter (Google Fonts) at weights 300, 400, 500, 700 (already in the fallback stack)
• Mallory Book → Inter at weight 400 or Source Sans Pro at weight 400
• VT323 → Already a Google Font; load via @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

Define these CSS variables for your substitution layer:

--font-display: 'Merriweather', Georgia, serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'VT323', 'Courier New', monospace;

Layout

Spacing System

• Base unit: ~4px (derived from the most frequent spacing value).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (4px — icon gaps, tight internals), {spacing.xxs-plus} (5px — specific component tuning), {spacing.sm} (7px — the most common spacing, used extensively for internal padding and gaps), {spacing.sm-alt} (8px — alternative small spacing), {spacing.md} (10px — button padding axis), {spacing.md-alt} (12px — card padding increments), {spacing.lg} (14px — medium gaps), {spacing.xl} (18px — larger internal spacing), {spacing.xl-alt} (24px — section-internal spacing), {spacing.xxl} (28px — major element separation), {spacing.section} (88px — vertical section padding, likely for the full room-stage height).

The prevalence of 7px ({spacing.sm}) as the most frequent spacing value (37 occurrences) suggests a non-standard grid system tuned to this specific design's proportions rather than adherence to an 8px baseline.

• Section padding (vertical): {spacing.section} (88px) — used for the stage/room container's vertical dimension.
• Card internal padding: {component.modal-card} uses 40px 32px (literal value) for generous breathing room around content.
• Gutters: The modal card centers within the room environment with implicit auto margins; no explicit gutter tokens extracted, suggesting the layout relies on flexbox/grid centering.

Grid & Container

• Max content width: The stage/container renders at 1440px width based on extracted container data.
• Density choice: Editorial-single-column — the entire above-fold experience is a single centered modal (~415px wide based on section container data) within the wider room environment. This is intentionally sparse and theatrical, not information-dense.
• Grid behavior: No multi-column grid detected in the hero section; the layout is fundamentally a single vertical stack inside the modal: speech bubble → mascot image → headline → subheading → CTA → disclaimer.
• Hero column split: None — the hero is a single centered column. The "columns" exist only in the room environment (left/right walls, side decorations), not in the content layout itself.

Whitespace Philosophy

The system practices theatrical whitespace — the modal card floats in the center of a much larger room environment, with the cream canvas surrounding it on all sides acting as "negative space" that focuses attention. Inside the card, whitespace is generous (40px+ vertical padding) and deliberately uneven (more space above the headline than below the button), creating a visual rhythm that guides the eye downward through the conversion funnel. This is not the efficient whitespace of a dashboard; it's the welcoming whitespace of a storefront window display.

Header Architecture

┌─────────────────────────────────────────────────────────┐
│ [Room Environment - Full Viewport Width]                │
│ ┌─────────────────────────────────────────────────────┐ │
│ │  [Windows Row]          "Pocket FM Design" mark     │ │
│ │  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓   (monospace, top center)   │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │                                                     │ │
│ │   ┌───────────────────────────────────────────┐     │ │
│ │   │  Speech Bubble ("hi, i'm paw...")         │     │ │
│ │   │  ┌─────┐                                  │     │ │
│ │   │  │ Cat │  "Pocket FM is hiring designers" │     │ │
│ │   │  └─────┘  "Applying only takes..."        │     │ │
│ │   │                                         │     │ │
│ │   │         [ Apply now ]                    │     │ │
│ │   │                                         │     │ │
│ │   │     "We use your answers only..."       │     │ │
│ │   └───────────────────────────────────────────┘     │ │
│ │                                                     │ │
│ │              ┌───────────────────┐                   │ │
│ │              │  NICE TO FEET YOU │  ← Floor Mat     │ │
│ │              └───────────────────┘                   │ │
│ └─────────────────────────────────────────────────────┘ │
│ [Meet the team] [Know more about Pocket FM]  (bottom)  │
└─────────────────────────────────────────────────────────┘

Hero Section

The hero is the modal card itself — there is no separate "hero band" in the traditional landing-page sense. The structure within the modal:

┌──────────────────────────────────────┐
│  ┌────────────────────────────────┐  │
│  │  "hi, i'm paw. pocket's       │  │  ← Speech Bubble
│  │  re-cute-er..."               │  │     (component: speech-bubble)
│  └────────────────────────────────┘  │
│                                      │
│            🐱 (Pixel Cat)            │  ← Mascot Image
│                                      │
│     "Pocket FM is hiring designers"  │  ← H1 (display-lg)
│                                      │
│   "Applying only takes about        │  │  ← Subheading (body-md)
│    5 minutes"                       │  │
│                                      │
│   ┌────────────────────────────┐     │  │
│   │      Apply now             │     │  │  ← CTA Button
│   └────────────────────────────┘     │  │     (button-primary)
│                                      │
│   "We use your answers only to..."  │  ← Disclaimer (caption)
└──────────────────────────────────────┘

Room Environment (Signature Layout)

The room environment surrounding the modal is a key differentiator:

Full Viewport (1440px × 100vh)
├── Back Wall (canvas color, full width)
│   ├── Windows Row (4 window panes across top)
│   ├── Bush/Plant Row (8 plant images below windows)
│   ├── "Pocket FM Design" Mark (centered top, monospace)
│   └── "TAKE A BREATHER" Sign (left-side wall decor)
├── Front Walls (left and right side images framing the modal)
├── Central Modal (white card, centered, ~415px wide)
├── Crowd/Walker Elements (8 animated walker divs for ambient motion)
├── Carpet Tiles (surface-brown colored rectangles on floor)
├── "NICE TO FEET YOU" Mat (green signage board, bottom center)
└── Bottom Nav Bar ([Meet the team] [Know more about Pocket FM])

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, solid {colors.surface} | Modal card background, speech bubble base | | 1 — Offset Shadow | {extensions.shadows.offset-sm} — 2px 2px brown-alpha | Small decorative elements, subtle lift | | 2 — Inset Line | {extensions.shadows.inset-line} — 1px black-alpha inset | Top-edge definition on raised elements | | 3 — Retro Button | {extensions.shadows.button-retro} — Multi-layer inset + 3px + 9px + diffuse | Primary CTA button exclusively | | 4 — Signage Inset | {extensions.shadows.signage-inset} — Alternating green/cream inset rings + drop | "TAKE A BREATHER" signage board | | 5 — Mat Inset | {extensions.shadows.mat-inset} — Dark green inset + gold ring + brown drop | "NICE TO FEET YOU" floor mat |

The elevation philosophy is tactile and retro-digital rather than material-design-flat or skeuomorphic-realistic. Shadows don't attempt to simulate real-world light physics; instead, they reference 16-bit era UI conventions where "depth" was communicated through hard-edged offset shadows (the 2px 2px {extensions.shadows.offset-sm} pattern seen on 24 elements) and stacked inset borders that suggest beveled edges. The primary CTA button takes this furthest with its 4-layer shadow stack—an inner highlight ring, two progressively darker offset layers, and a soft diffuse bottom shadow—creating a button that looks pressable in a distinctly game-ui way.

The signage boards use an even more elaborate inset technique: alternating rings of the board's base color and a light cream at 22% opacity, creating a "grooved" appearance as if the text were stamped into the surface. This is decoration-as-depth, where the shadow treatment communicates material (carved wood or stamped metal) rather than spatial position.

Decorative Depth

Beyond UI element elevation, the room environment creates atmospheric depth through layered positioning: back walls sit behind the modal, front walls partially frame the sides, plants and windows occupy the background plane, and the floor mat sits in the foreground below the modal. This is z-index depth achieved through DOM ordering and absolute/fixed positioning, not through shadows—but it's essential to the design's immersive quality.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.xxs} | 4px | Subtle rounding on small elements, inner containers | | {rounded.DEFAULT} | 8px | Primary CTA button, default UI elements | | {rounded.md} | 12px | Speech bubbles, signage boards, modal card (shares lg in practice) | | {rounded.lg} | 12px–16px | Modal card primary rounding, larger containers | | {rounded.pill} | 9999px | Secondary navigation buttons ("Meet the team", etc.) | | {rounded.full} | 9999px | Avatar circles, fully round elements (if any) |

The extracted radii show only two distinct values in use: 12px and ~33 million px (effectively infinite/pill). The 8px default for the primary button was inferred from the button's visual appearance in the screenshot, as the exact pixel value wasn't captured in the radii frequency data but is clearly not fully rounded nor sharp-cornered.

Photography & Imagery Geometry

Imagery in this system is exclusively pixel-art/sprite-based, not photographic. The mascot cat is a pixel-art rendering (approximately 80×80px based on the {component.pixel-mascot} size token). Plant decorations are illustrated/png assets placed at {component.decor-plant} size (48px). All imagery has sharp corners (no border-radius applied to images themselves)—rounding is handled by parent containers if needed. The room environment uses illustrated wall/window assets that tile or position absolutely within the stage. Aspect ratios vary: the cat mascot is roughly square, plants are taller-than-wide portrait sprites, and wall sections are wide horizontal strips.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.button-secondary-active}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The star of the show: a bright red ({colors.accent}) rectangular button with slight rounding ({rounded.DEFAULT}), bold white 16px text reading "Apply now" ({typography.button}, {colors.on-accent}). Its defining feature is the 4-layer retro shadow ({extensions.shadows.button-retro}) that gives it a 16-bit game UI appearance: a light inner inset, a 3px dark brown offset, a 9px lighter brown offset, and a diffuse drop shadow. Padding is 14px 32px. Active state ({component.button-primary-active}) darkens to {colors.accent-hover} (#e41300). This button appears once, centrally positioned below the headline, and is the sole conversion point on the page.

{component.button-secondary} — Ghost-style pill buttons ({rounded.pill}) with transparent backgrounds, {colors.ink} text at {typography.body-sm} size, and a subtle border (implied from screenshot). Used for the bottom navigation pair: "Meet the team" and "Know more about Pocket FM". These have lighter visual weight than the primary CTA, appropriate for their secondary-navigation role. Active state ({component.button-secondary-active}) shows a {colors.surface-tan} background fill. Padding approximately 8px 16px.

Cards & Containers

{component.modal-card} — The central white ({colors.surface}) container housing all primary content. Rounded at {rounded.lg} (12px), padded generously at 40px 32px, it floats centered in the room environment. No visible shadow on the card itself—it relies on contrast with the cream canvas and the room's framing elements for separation. Contains the speech bubble, mascot, headline, subheading, CTA, and disclaimer in a single vertical stack.

{component.speech-bubble} — A white ({colors.surface}) rounded rectangle ({rounded.md}) positioned at the top of the modal, containing the playful intro text "hi, i'm paw. pocket's re-cute-er. paw-cat. pocket. re-cute-er. ...you get it." Text is {typography.body-lg} in {colors.body} color, padded at 16px 20px. Has a small triangular pointer (implied by "bubble" naming and visual) pointing down toward the mascot image. Sets a conversational, informal tone before the formal headline begins.

{component.signage-board} — A sage green ({colors.semantic-green}) rectangular board with {rounded.DEFAULT} corners, displaying "TAKE A BREATHER" in monospace {typography.label-signage} white text. Features the complex inset shadow treatment ({extensions.shadows.signage-inset}) that creates a grooved/stamped appearance. Padded at 16px 24px. Positioned on the left wall of the room as environmental decor.

{component.signage-mat} — A dark forest green ({colors.semantic-green-dark}) rectangular mat (wider than tall) with {rounded.DEFAULT} corners, displaying "NICE TO FEET YOU" in monospace white text. Uses {extensions.shadows.mat-inset} shadow (dark green inset + gold ring + brown drop). Padded at 14px 20px. Positioned at the bottom-center of the room, below the modal, acting as a visual "welcome mat" pun.

Text Components

{component.hero-heading} — The h1 "Pocket FM is hiring designers" rendered in {typography.display-lg} (32px, weight 700, serif) with {colors.ink} color and -1.12em letter-spacing. No background, no padding of its own (inherits modal card padding). This is the most visually prominent text element, drawing all its power from typeface choice, size, and tight spacing rather than color tricks or decoration.

{component.hero-subheading} — The line "Applying only takes about 5 minutes" in {typography.body-md} (14.88px) at {colors.muted} (66% opacity black). Functions as the de-risking reassurance below the headline, reducing friction by setting time expectations.

{component.disclaimer-text} — The small legal text at the bottom of the modal: "We use your answers only to review your application. We delete them within 90 days." Rendered in {typography.caption} (12px) at muted color. Necessary for trust/compliance, visually minimized.

Navigation & Environmental

{component.nav-mark} — The "Pocket FM Design" text at the top center of the room environment, outside the modal. Rendered in {typography.mono} (VT323, 13px) in {colors.primary} brown. Acts as a brand identifier within the room's "set dressing."

{component.stage-background} — The full-viewport room container with {colors.surface-room} (tan/brown) background. Holds all environmental elements (walls, windows, plants, modal, crowd walkers, mats). Not a traditional nav/background component but the root staging element for the entire experience.

{component.pixel-mascot} — The red pixel-art cat image, approximately 80×80px ({component.pixel-mascot} size), positioned between the speech bubble and the headline. No background, no border—just the image asset. Serves as the emotional anchor and brand mascot ("paw").

{component.decor-plant} — Potted plant illustrations (~48px each) positioned along the window row and room edges. Purely decorative, adding life and warmth to the room environment. Multiple instances with varied positioning.

{component.wall-surface} — The back wall area in {colors.canvas} cream color, serving as the backdrop behind windows and the upper portion of the room.

{component.carpet-tile} — Rectangular floor tiles in {colors.surface-brown} tan/gold, positioned at the bottom of the room environment to suggest flooring beneath the modal and mat.

Do's and Don'ts

Do

• Do use {typography.display-lg} (serif, 32px, 700 weight, -1.12em tracking) for all primary headlines — this is the system's signature typographic moment.
• Do reserve {colors.accent} (#fd1500) for the single primary CTA button only; it loses impact if overused.
• Do apply the retro multi-layer shadow ({extensions.shadows.button-retro}) to {component.button-primary} — the shadow is as much a part of the button's identity as its color.
• Do keep the {colors.canvas} cream background for the room environment; it establishes the warm, inviting atmosphere.
• Do use {rounded.pill} for secondary navigation buttons to differentiate them from the primary CTA's sharper corners.
• Do render environmental/signage text in {typography.mono} (VT323) to maintain the retro-computing aesthetic separate from interface text.
• Do center the {component.modal-card} in the viewport with generous surround (the theatrical frame effect).
• Do apply 66% opacity (via {colors.muted-opacity}) to secondary text like subheadings and disclaimers rather than introducing lighter gray color tokens.
• Do keep the speech bubble ({component.speech-bubble}) conversational in tone and placement — it should feel like a character speaking, not a UI label.
• Do use {colors.semantic-green} and {colors.semantic-green-dark} for environmental signage to keep the color story earthy and cohesive.

Don't

• Don't use {typography.display-lg} for body text or UI labels — the serif display face is exclusively for headlines.
• Don't apply {colors.accent} red to anything other than the primary CTA; links, highlights, and accents should use browns or greens from the palette.
• Don't replace the retro button shadow with a modern flat or soft-material shadow — the offset hard-edge shadow is intentional and brand-defining.
• Don't add gradients, glassmorphism, or neumorphism to the modal card — it's a clean flat white surface by design.
• Don't expand the border radius vocabulary beyond the defined tokens ({rounded.sm}, {rounded.DEFAULT}, {rounded.md}, {rounded.lg}, {rounded.pill}); the system's shape language is intentionally limited.
• Don't use {typography.mono} for readable body content — it's strictly for environmental/atmospheric text where personality trumps readability.
• Don't place important content outside the {component.modal-card} — the room environment is decorative stage, not information space.
• Don't increase the headline weight beyond 700 — the display typeface carries authority through its serif character, not through black/heavy weights.
• Don't remove the speech bubble or mascot from the conversion flow — they're not optional decorations but part of the persuasive sequence (warm-up → emotion → ask).
• Don't introduce cool blues, purples (beyond the rare accent {colors.semantic-purple}), or neon colors outside the established warm-earth + red-accent palette.

Motion & Animation

Transition Tokens

--transition-opacity: opacity 0.34s ease-out;
--transition-position: left 0.42s cubic-bezier(0.22, 0.75, 0.2, 1), 
                       top 0.42s cubic-bezier(0.22, 0.75, 0.2, 1), 
                       width 0.42s cubic-bezier(0.22, 0.75, 0.2, 1), 
                       height 0.42s cubic-bezier(0.22, 0.75, 0.2, 1), 
                       translate 0.42s cubic-bezier(0.22, 0.75, 0.2, 1);
--transform-slow: transform 0.5s cubic-bezier(0.2, 0, 0, 1);
--transform-fast: transform 0.12s cubic-bezier(0.2, 0, 0, 1);
--interactive: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), 
               background 0.16s, 
               box-shadow 0.16s;
--button-state: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• stalkOrbit — Gentle orbital movement for the mascot's tail or accessory (ambient idle animation).
• wanderWalk — Side-to-side walking cycle for the "crowd walker" characters that populate the room's background.
• formIn — Entry animation for the modal card (likely scale + fade or slide from above).
• petBlink — Periodic blink animation for the pixel cat mascot's eyes (adds life to the static sprite).
• petSleepFrames — Alternative animation state for the mascot (possibly a resting/sleeping pose cycle).
• petBreathe — Subtle vertical scale/breathing motion for the mascot (idle "alive" signal).
• glint — Sparkle/shine effect on pixel art (specular highlight sweep).
• rec-ring — Pulsing or expanding ring effect (possibly for interactive feedback).
• stamp-in — Dramatic entry for stamp/seal elements (the signage boards may "stamp" into view).
• ink-in — Ink-spread reveal effect for text on signage.
• smoke-in — Particle/smoke puff effect (possibly accompanying the stamp animation).
• sheetIn — Slide-up reveal for team profile sheets (on the "Meet the team" interaction).
• profileIn — Staggered entry for profile content within sheets.
• bubbleFlash — Quick opacity pulse on the speech bubble (draws attention to the intro text).
• cow-room / cow-slide-in / cow-walk / cow-room-out / cow-slide-out — Sequence for an easter-egg or surprise animation involving a cow character (likely triggered by interaction or timer).
• burst-x — Explosive particle burst effect (celebration or emphasis).

Interaction Patterns

• Modal entry: The {component.modal-card} animates in via formIn — likely a combined scale-from-0.95 + fade + slight Y-offset over ~400ms.
• Mascot idling: The pixel cat continuously runs petBlink (periodic, every ~3-4 seconds), petBreathe (subtle continuous Y-scale oscillation), and possibly stalkOrbit (gentle rotation/wag).
• Crowd ambience: 8 "walker" elements in the room background execute wanderWalk — slow, continuous lateral movement with randomized offsets to simulate office activity.
• Button press: {component.button-primary} uses --button-state transitions (150ms) on background-color, transform (scale-down slightly), and box-shadow (shadow compresses) to create a tactile press response.
• Speech bubble attention: bubble-flash triggers an opacity pulse on {component.speech-bubble} shortly after page load to draw the eye to the introductory text.
• Signage reveal: The "TAKE A BREATHER" and "NICE TO FEET YOU" boards likely use stamp-in + ink-in sequences for theatrical entry.
• Secondary nav hover: {component.button-secondary} uses --interactive transitions (160ms) for smooth background fill and transform on hover/active states.
• Easter egg: The cow-related animations (cow-slide-in, cow-walk, etc.) suggest a hidden interaction—possibly clicking the mascot, waiting 30 seconds, or a Konami-code-style trigger that causes a cow character to walk through the room.

Imagery Style

• Exclusively pixel-art and illustrated — no photography anywhere in the system; every visual element is either a pixel sprite or a flat illustration.
• Pixel-art mascot — The central cat ("paw") is rendered in a 16-bit era pixel art style with visible individual pixels, limited color palette (primarily red/orange with white and black detail), and a charmingly simple expression.
• Illustrated environment — Walls, windows, plants, carpets, and furniture are flat or lightly shaded illustrations with a consistent hand-drawn/digital-paint warmth; they avoid realistic perspective in favor of a slightly flattened "set piece" look.
• Color treatment on imagery — Illustrations use the same warm palette as the UI (creams, browns, greens) ensuring environmental graphics and interface elements feel unified.
• Imagery supports, doesn't dominate — The pixel cat is the largest image element at ~80px, but it's still smaller than the headline text; images serve the narrative and emotional tone rather than conveying information.
• Sprite-based animation — Mascot and crowd characters use frame-by-frame or transform-based animation (blink, breathe, walk) rather than video or Lottie, keeping the retro-game aesthetic consistent.
• Decorative plants — Potted plant assets add organic shapes to the geometric room layout; they break up straight lines and reinforce the "cozy office" atmosphere.
• Window scenery — Background windows show simplified greenery (trees/sky) in a pixel or low-res illustrated style, suggesting an exterior world without drawing focus from the interior.
• No user-generated or photographic imagery expected — This system is designed for branded marketing/careers content, not user content surfaces.

Icon System

• Library: Lucide (detected in framework data as the icon library), though icons are minimally used in the visible screenshot.
• Specific icons observed: Limited icon usage in the above-fold view; the design relies more on pixel-art imagery and text than on iconographic communication. Any icons present would likely be small utility icons (external link arrows, close buttons) in the Lucide style.
• Treatment: Where icons appear, they would follow the system's color rules — likely {colors.ink} or {colors.body} for standard icons, currentColor for inherited contexts. Size would align with the adjacent text (probably 16px–20px for inline icons).
• Note: The pixel-art mascot and environmental graphics are the visual vocabulary of this system; traditional line icons play a minimal role. If implementing icon features, consider whether a pixel-art icon set would better match the brand voice than standard Lucide icons.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected from __next_f patterns and script structure
- Styling:        CSS Modules (detected class naming convention: module__name__class)
- Fonts:          Self-hosted WOFF2/OTF for Mallory Compact, Mallory Book, Redacted 35; 
                  Google Fonts CDN for VT323; define --font-display, --font-body, --font-mono CSS variables
- Animation:      CSS keyframes + JS-triggered class toggles (extracted keyframe names suggest 
                  CSS animation with JavaScript orchestration for sequencing)
- Icons:          Lucide React (for any utility icons needed beyond pixel art)
- Component lib:  Custom components (no shadcn/Radix detected — this is a highly bespoke design)
- Canvas:         HTML5 Canvas elements detected for "broken-room" surface and effects rendering 
                  (the room environment may use Canvas for performance-heavy pixel rendering)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Room environment collapses or simplifies; modal card goes full-width with reduced padding; mascot scales down; signage may hide or reposition; bottom nav stacks vertically | | Tablet | 640px – 1024px | Room environment visible but compressed; modal card narrower (~360px); side decorations (plants, walls) may reduce in number or size | | Desktop | 1024px – 1440px | Full designed layout as shown in screenshot; 1440px stage width; all environmental elements visible | | Wide | > 1440px | Stage maxes at 1440px and centers; room environment may gain additional whitespace or subtle parallax depth |

Note: Exact breakpoint values are inferred from standard patterns; the extracted data shows a fixed 1440px stage width suggesting desktop-first or responsive-container approach.

Touch Targets

• {component.button-primary}: Approximately 56–60px height (14px padding × 2 + 16px text + border/shadow), 200px+ width — comfortably exceeds WCAG AAA 44×44 minimum.
• {component.button-secondary}: Approximately 36px height (8px padding × 2 + ~16px text), 120px+ width — meets WCAG AA 44×44 minimum when accounting for touch padding.
• Modal card interactive areas: The card itself is not a touch target internally, but all contained elements meet minimums.

Collapsing Strategy

• Room environment on mobile: The elaborate room backdrop (walls, windows, 8 walkers, multiple plants) is likely simplified to a flat {colors.canvas} background or a reduced set of decorative elements to save bandwidth and rendering cost on mobile devices. The Canvas-based rendering detected in the HTML may disable or simplify on smaller screens.
• Modal card on mobile: Goes near-full-width with reduced horizontal padding (perhaps 24px 20px instead of 40px 32px), maintaining vertical stacking order.
• Hero column: Remains single-column at all breakpoints (no multi-column layout to collapse).
• Bottom navigation: [Meet the team] and [Know more about Pocket FM] buttons stack vertically on mobile or convert to a hamburger/text-menu.
• Signage boards: "TAKE A BREATHER" and "NICE TO FEET YOU" mats may hide on mobile or move into the modal's peripheral space.
• Mascot image: Scales down proportionally, perhaps from 80px to 56–64px on mobile.

Image Behavior

• Hero mascot (pixel cat): Uses max-width: 100% scaling within the modal; pixel-art should use image-rendering: pixelated CSS property to prevent blurry interpolation when scaling down.
• Environmental illustrations (walls, windows, plants): Likely use position: absolute with percentage-based or media-query-adjusted positioning; on mobile, many may set display: none or reduce opacity to 0.
• Canvas elements: The broken-room-surface and broken-room-effects canvas elements may render at lower resolution on mobile or disable post-processing effects for performance.

Iteration Guide

1. Build a single-page Next.js application using App Router and CSS Modules that recreates the Pocket FM Design hiring page as closely as possible, starting with the room environment stage and centering the white modal card.

2. Extract every color, font, radius, and spacing value from the YAML frontmatter via {section.token} paths — define CSS custom properties for all tokens and reference them exclusively; never hard-code a hex or pixel value that has a corresponding token.

3. Implement the four-font system: import or substitute "Merriweight" (or Merriweather) for {typography.display-lg}, "Inter" for {typography.body-md} (already in fallback stack), and load "VT323" from Google Fonts for {typography.mono} — define --font-display, --font-body, and --font-mono variables.

4. Build the retro button shadow as a composite box-shadow value matching {extensions.shadows.button-retro} — this 4-layer shadow is the single most distinctive UI element and must be implemented precisely to capture the design's character.

5. Add state variants (-active, -hover, -focus) per your stack's conventions; the spec documents Default and Active/Pressed for buttons, but implement hover as interim state using --button-state timing (150ms cubic-bezier(0.4, 0, 0.2, 1)).

6. When adding new components beyond those documented, decide first which "zone" they belong to: modal content (inside the white card, uses {colors.surface}, {typography.body-md}), room environment (outside the card, uses {colors.canvas}, {typography.mono}), or overlay/navigation (fixed position, uses transparency).

7. Variants of an existing component must live as separate frontmatter entries (button-primary-active, never nested under button-primary.states.active) — follow this pattern for any new component you create.

8. Implement the keyframe animations for mascot behavior (petBlink, petBreathe) and modal entry (formIn) — even simplified versions of these animations dramatically improve fidelity to the original design's lively feel.

9. Use image-rendering: pixelated on the mascot and any pixel-art assets to preserve crisp edges when the browser scales them.

10. Test the design at 1440px width (the extracted stage width) for desktop fidelity, then verify mobile behavior where the room environment simplifies and the modal adapts.

Font Setup

For open-source reimplementation without access to Pocket FM's self-hosted font files:

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@300;400;500;700&family=VT323&display=swap');

:root {
  --font-display: 'Merriweather', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'VT323', 'Courier New', monospace;
}

Map the proprietary faces as: redacted 35 bold → Merriweather 700, redacted 35 → Merriweather 400, Mallory Compact → Inter (weights 300/400/500/700), Mallory Book → Inter 400. The visual result will be approximately 85–90% faithful; the exact character of "Redacted 35" (which appears to be a customized or fictionalized font name based on the "redacted" naming convention suggesting deliberate obfuscation) cannot be perfectly matched without the original OTF files.

Known Gaps

• Hover state styling for all interactive elements (buttons, nav items, links) — per the no-hover policy, only default and active/pressed states are documented; hover intermediates must be designed at implementation time.
• Loading/skeleton states for the modal content or room environment — no loading indicators, shimmer placeholders, or skeleton screens were visible in the static screenshot.
• Form validation states — if the "Apply now" button opens a multi-step application form, no error, success, warning, or disabled-input styles beyond the basic button-primary-disabled pattern are documented.
• Authenticated/post-application states — what happens after submission (confirmation screen, thank-you message, return-visit state) is entirely unknown.
• Team profile sheet design — the sheetIn/profileIn animations suggest a team directory overlay, but its visual design (layout, card style, avatar treatment) wasn't captured in the above-fold screenshot.
• Cow easter-egg full sequence — the cow-* keyframe animations imply a hidden surprise interaction, but its trigger conditions, duration, visual design, and audio (if any) are unknown.
• Exact pixel measurements for room environment elements — positions, sizes, and z-indices of the 8 walker elements, plant positions, window dimensions, and carpet tile layout are approximated from the screenshot, not extracted as precise values.
• Canvas rendering details — the broken-room-surface and broken-room-effects canvas elements suggest WebGL or advanced Canvas 2D rendering for the room environment; the exact rendering pipeline, shader code, or drawing commands are not accessible from CSS extraction alone.
• Accessibility attributes — ARIA roles, focus management, keyboard navigation patterns, and screen reader announcements for the animated room environment and modal are not present in the extracted CSS/HTML structure.
• Dark mode variant — the extensions.mode is set to "light" and the entire design is built on a warm-light palette; no dark mode tokens, overrides, or alternative color schemes exist in the extracted data.