# Jungle Challenge Board

- **Status:** Ready
- **Version:** 1.0.0
- **Source project:** BTD6 Challenge Lens
- **Register:** Skeuomorphic, playful, game-adjacent consumer utility

## Intent

This direction began because I wanted to explore skeuomorphic interface design through a passion project based on my favorite game, Bloons TD 6. The visual system uses raised controls, inset fields, paper notes, framed boards, and light and dark themes to create a tactile interface without copying the game’s menus.

Use this direction for:

- playful companion utilities;
- hobby and game-adjacent explorers;
- learning tools that explain rules or evidence;
- discovery boards and comparison workflows;
- consumer products where physical interaction cues can make a digital task clearer.

Avoid it for:

- dense enterprise operations;
- clinical, legal, or emergency decision support;
- restrained luxury products;
- formal editorial publishing;
- surfaces where scenery or tactile depth would compete with urgent information.

## Design principles

1. **Make skeuomorphism the interaction grammar.** Wood frames work, paper carries content, raised plastic moves, inset wells receive input, and enamel marks status.
2. **Give every depth cue a job.** Highlights model light; lower edges show travel; inner shadows show recession; ordinary copy and links stay flat.
3. **Lead with the useful reveal.** Put the input, result, or selected item before raw evidence.
4. **Keep friendly and factual separate.** Rounded display type and scenery create warmth; plain labels and provenance create trust.
5. **Preserve unknowns.** Never turn an unfamiliar value into confident language to make the interface feel complete.
6. **Stay useful without external imagery.** Product materials, glyphs, and fallbacks must remain coherent when remote or licensed art is absent.

## Authorship and asset boundary

The interface was designed for Challenge Lens. It is game-adjacent, but it must not reproduce a game's menus, logo, icons, type treatment, or proprietary visual arrangement.

The source application shows one permission-backed Bloons TD 6 image for a specific, credited purpose: the Etienne field scout on the decoder home. The Formwork study may display that image through Challenge Lens's controlled asset route as documented source evidence. It is not included in this portable token layer or registry source, and adopters must not copy it from the study without their own permission. Use original or permissively licensed product backgrounds, controls, generic symbols, fallbacks, and share artwork.

If an adopted product references a third-party property, state the relationship accurately and keep third-party assets out of product branding unless a separate license permits them.

## Color system

Light mode uses a warm parchment palette. Dark mode keeps the same material roles with darker surfaces and adjusted light, rather than mechanically inverting every value.

| Role | Light | Dark | Use |
| --- | --- | --- | --- |
| Canvas | `#F6EACB` | `#14201A` | Page environment |
| Surface | `#FFF8E8` | `#1F3027` | Main framed sections |
| Raised surface | `#FFFFFF` | `#2A4134` | Inputs, menus, quiet controls |
| Primary text | `#25323B` | `#F9EDCE` | Headings and body copy |
| Muted text | `#625E52` | `#B9C5BA` | Captions and metadata |
| Mango primary | `#E89135` | `#FF9A55` | One primary action per decision area |
| Mango edge | `#A85424` | `#B94A1F` | Physical lower edge of primary actions |
| Jungle secondary | `#237A53` | `#59D18C` | Playable, positive, or completion actions |
| Jungle edge | `#145338` | `#27704A` | Physical lower edge of secondary actions |
| River information | `#2B6FA8` | `#70B9F1` | Links, source facts, neutral information |
| Focus | `#1D65A1` | `#8CCBFF` | Keyboard focus ring |
| Banana fact | `#F4C150` | `#F4C150` | High-attention factual marker |
| Danger | `#B83D42` | `#FF7A7F` | Actual error or destructive meaning only |
| Structural border | `#A9753C` | `#6E8F75` | Rims, grouped controls, meaningful outlines |

### Semantic rules

- Mango is not a general accent. Reserve it for the most important action.
- Green means playable, positive, or completion only when paired with text or shape.
- Blue communicates source information, links, and focus.
- Gold identifies a fact, not a reward or difficulty score.
- Red identifies an actual error or destructive consequence.
- Never let external artwork determine surrounding text or action colors.
- Selection, status, and availability need visible words or shapes in addition to color.

The source design records representative contrast ratios from `5.34:1` to `14.41:1` for its primary text, muted text, action, border, and focus pairs. Recheck contrast after changing any token or placing text on a new material.

## Typography

### Display

Use **Fredoka Variable** at weights 600–700 for the product mark, page titles, section titles, and short numeric or result callouts.

- Display maximum: `3.5rem`, line-height `1`, tracking `-0.03em`.
- Large heading: `2.25rem`, line-height `1.1`, tracking `-0.02em`.
- Medium heading: `1.5rem`, line-height `1.2`, tracking `-0.01em`.
- Do not use Fredoka for dense paragraphs, evidence tables, diagnostics, or long labels.

### Body and utility

Use **Nunito Sans Variable** at weights 400–800 for paragraphs, controls, inputs, badges, evidence, and diagnostics.

- Body default: `1rem`, weight 500, line-height `1.6`.
- Large body: `1.125rem`, line-height `1.6`.
- Supporting text: `0.875rem`, weight 600, line-height `1.5`.
- Short labels: `0.75rem`, weight 800; keep them concise and readable.
- Codes and counters: weight 800, tabular numerals, `0.12em` tracking. Do not add a third mono family only for identifiers.

Self-host the Latin variable fonts, retain their license notices, use `font-display: swap`, and provide calibrated local metric fallbacks when layout stability matters.

## Spacing and composition

Use a 4 px base rhythm.

| Token | Value |
| --- | --- |
| 1 | `0.25rem` |
| 2 | `0.5rem` |
| 3 | `0.75rem` |
| 4 | `1rem` |
| 6 | `1.5rem` |
| 8 | `2rem` |
| 12 | `3rem` |
| 18 | `4.5rem` |

- Keep the main readable width near 1120 px.
- Use 24–32 px desktop gutters and 16 px narrow gutters.
- Use 20–32 px between major sections, 14–18 px inside ordinary panels, and 8–12 px for compact internal gaps.
- Constrain primary tools to a readable working width instead of stretching them across a large desktop.
- Prefer document hierarchy and dividers before wrapping every concept in another card.
- Avoid a centered marketing hero followed by equal feature cards. Start with the job the person came to do.

## Skeuomorphic material system

| Radius | Use |
| --- | --- |
| `6px` | Tiny details and tracks |
| `10px` | Compact controls and evidence rows |
| `14px` | Buttons, inputs, and small panels |
| `20px` | Main framed work surfaces |
| `28px` | Rare identity surfaces |
| Pill | Short badges and grouped-control tracks only |

### Material layers

- **Environment:** original CSS foliage, terrain, and directional light sit behind the product. They establish place without becoming a repeating texture.
- **Framed surface:** routed wood gets one structural rim, a bright upper edge, a darker lower edge, and one ambient shadow. It contains a task or group of work.
- **Raised control:** painted plastic gets a bright top highlight, colored fill, darker lower edge, and short cast shadow. Its active state travels down roughly 3 px and shortens the shadow without moving surrounding layout.
- **Inset control:** a recessed field uses an upper inner shadow and lower highlight so it reads as a receiving well, not an action.
- **Paper:** pinned notes use a subtle light-modeling gradient, visible lower edge, slight rotation, compact cast shadow, and a physical pin. Text on the paper remains flat.
- **Enamel marker:** a small status instrument uses a thin rim and compact specular highlight beside a text label.
- **Flat layer:** ordinary copy and text links remain flat so the physical hierarchy does not turn into decoration everywhere.
- Forced-colors mode may replace material fills and shadows with native borders.
- Do not add photographic wood, leather, paper, metal, or noise textures.

Gradients are allowed only to model a material's lighting. Avoid generic glossy overlays, glass effects, glow, or texture libraries.

Original, non-repeating CSS foliage and terrain may frame page edges. Keep scenery behind content and useful in both themes; do not make it a wallpaper pattern or a JavaScript effect.

## Motion

- Button press: `90–120ms`.
- Hover and focus: `140–180ms`.
- Disclosure or result transition: `180–240ms`.
- A decoded result may use one `180ms` opacity/translate settle or lens sweep; do not stagger children.
- Animate opacity and small transforms that do not change document flow.
- Reserve final dimensions in loading states.
- Remove non-essential transforms and collapse animation and transition durations under `prefers-reduced-motion: reduce`.
- Do not loop decorative motion, bounce sections, animate large shadows continuously, or make reading wait for staged reveals.

## Responsive system

The hierarchy stays stable across widths: the input or result comes first; supporting evidence and provenance remain later in document order.

### Wide layouts

- Let concise hero copy share space with one original focal illustration.
- Keep the main input tool compact and centered on the job.
- Place a supplementary square image beside a result rather than enlarging it into a hero.
- Use three columns for pinned discovery notes on wide screens.
- Use fact / first value / second value regions for comparisons.

### Narrow layouts

- Keep the wordmark and current theme choice on one row; move the full theme choices into a compact anchored menu.
- Let title copy and one small illustration share limited height rather than creating a tall art row.
- Stack input controls and primary actions when focus rings or labels would become cramped.
- Use one document-order result column and wrap badges as a list.
- Use one discovery-note column below 640 px.
- Stack comparison values beneath each fact instead of introducing a horizontally scrolling table.
- Primary actions may become full width below 480 px.
- Preserve 44 × 44 px touch targets.
- At 200% zoom, core information and actions must remain available without two-dimensional scrolling.

## Component language

Every interactive pattern needs relevant default, hover, focus-visible, active, disabled, loading, and error behavior. Hover cannot be the only discoverability cue.

### Primary, secondary, and quiet actions

- Primary: mango, raised, one per decision area.
- Secondary: jungle green, raised, for a playable or positive action.
- Quiet: neutral raised surface for copy, retry, or supporting actions.
- Text: blue and flat for methodology or low-priority navigation.
- Destructive: danger color only for a real destructive action, paired with explicit language and confirmation when irreversible.

Keep filled and quiet actions borderless in ordinary light and dark modes. Fill, highlight, lower edge, hover lift, press travel, and the external focus ring communicate the boundary.

### Labeled input

- Always show a visible label and format or consequence help.
- Keep the primary action adjacent when there is room and stack when cramped.
- Put validation in document flow and connect it to the field.
- Combine error text, shape, and border; do not rely on a red wash.
- Never make paste trigger a network or destructive request without deliberate submit.

### Theme choice

- Offer System, Light, and Dark.
- Persist the actual choice so System remains distinct.
- Apply a saved choice before paint.
- Use selected semantics and an accessible group name.
- Keep native controls and `color-scheme` aligned with the active mode.

### Result card

- Lead with identity and a short, specific reveal.
- Put three to five high-attention facts in a wrapping fingerprint list.
- Explain what the facts change for the person before exact source values.
- Keep optional imagery supplementary and reserve its dimensions before load.
- Keep actions inside the card when the result itself is the useful shareable unit.
- Put exact evidence, provenance, and lower-priority detail in semantic progressive disclosures.
- Label source facts and product interpretations separately.

### Pinned discovery board

- Present one bounded work surface rather than a generic card grid or API catalogue.
- Put feed choice and local filtering inside the board controls.
- Use pinned field-note slips with stable marker space and one clear open action.
- Use a text selected state, visible focus, and comfortable targets for feed tabs.
- Keep empty, partial, loading, and failure states inside the same material register.
- Do not prefetch heavy detail for every discovery item.

### Comparison notes

- Start with two labeled inputs and neutral “first” / “second” identities.
- Show only supported deterministic differences.
- Do not style one side as the winner or make unequal values imply good or bad.
- Preserve empty, invalid, one-side failure, equal, success, and sharing states.

### Status surface

Every loading, validation, unavailable, upstream, compatibility, and partial-data state needs:

1. a concise title;
2. a plain explanation;
3. the next available action;
4. secondary diagnostics only when they help development, not ordinary use.

## Accessibility requirements

- Target WCAG 2.2 AA.
- Use semantic controls and visible labels before ARIA.
- Use a 3 px blue focus ring with separation from the control edge.
- Keep focus clear of bevels, sticky headers, and overflow clipping.
- Use text or shape in addition to color for status, selection, and availability.
- Give decorative glyphs `aria-hidden="true"` when adjacent text already carries the meaning.
- Keep original glyph silhouettes visible in forced-colors mode.
- Use semantic headings, landmarks, lists, buttons, links, forms, `details`/`summary`, dialogs, and progress/status regions.
- Restore focus after modal workflows close.
- Pair errors with the relevant field or recovery action.
- Keep core content understandable when optional imagery fails.
- Verify keyboard traversal, zoom, narrow overflow, forced colors, both themes, and reduced motion in the adopted product.

## Technical flexibility

The direction is stack-agnostic. Its portable layer is the semantic-token, typography, composition, state, and accessibility contract.

The source application uses React, TanStack Start/Router, Vite, self-hosted Fontsource families, authored CSS, Zod contracts, and server-only image tooling. These dependencies are evidence of one implementation, not requirements for adoption.

Prefer:

- server-rendered or static useful content;
- authored scoped CSS for the material system;
- route or feature-level loading for unusually large surfaces;
- CSS-only scenery and motion;
- one small interaction boundary instead of hydrating decoration;
- synthetic examples in public documentation.

## Portable tokens

The published `tokens.css` scopes every variable under `.jungle-challenge-board-pack`.

```html
<main class="jungle-challenge-board-pack" data-jcb-theme="dark">
  <!-- application or feature surface -->
</main>
```

- Omit `data-jcb-theme` for light mode.
- Use `data-jcb-theme="dark"` for dark mode.
- Use `data-jcb-theme="system"` to follow `prefers-color-scheme`.
- Self-host Fredoka and Nunito Sans or change `--jcb-font-display` and `--jcb-font-body`.

## Adoption sequence

1. Copy `tokens.css` and scope the adopted surface with `.jungle-challenge-board-pack`.
2. Load Fredoka and Nunito Sans or approved local equivalents.
3. Assign every object a physical role before scenery: framed work surface, pinned paper, raised control, inset well, enamel marker, or flat content.
4. Implement the material anatomy and focus behavior: highlight, lower edge, press travel, inner shadow, rim, and ambient shadow.
5. Add light and dark theme mappings without duplicating page markup.
6. Add only enough original scenery and glyph language to make the direction recognizable.
7. Implement loading, empty, error, disabled, partial, image-failure, forced-colors, and reduced-motion behavior.
8. Test narrow mobile, tablet, desktop, keyboard-only input, zoom, both themes, and reduced motion.

## Reusable-source status

The scoped token file is copyable. Challenge Lens's implemented React components remain reference implementations because they retain product-specific domain data, network boundaries, routing, persistence, and copy.

No installable registry JSON is currently published. Do not claim one-command installation.

## Avoid

- copied game menus, logos, icons, wordmarks, or proprietary color arrangements;
- generic SaaS card grids, glass panels, purple-blue gradients, or neon glow;
- a centered marketing hero that delays the primary tool;
- more than one mango primary action in the same decision area;
- badges that imply unsupported difficulty or success;
- color-only status, selection, restriction, or error meaning;
- nested rounded containers with nearly identical padding;
- decorative texture libraries, remote fonts, or animation frameworks;
- horizontal badge carousels or core-data tables on mobile;
- confident language for unknown values;
- official imagery in generated or downloadable output without separate permission.

## Known limits

- Tactile scenery is intentionally expressive and should be removed or simplified in highly formal, dense, or urgent products.
- The study's approved Etienne evidence image is not part of the portable direction or token registry.
- Copyable tokens do not make the app-specific components portable.
- An adopted implementation still needs accessibility and performance validation with its own content and interaction model.

## Artifact map

- Raw guide: `/designs/jungle-challenge-board/DESIGN.md`
- Scoped tokens: `/designs/jungle-challenge-board/tokens.css`
- Reusable components: not published
- Registry status: copyable token source only; no generated installable item