--- version: alpha name: fieldnote-design description: "A chalkboard-green canvas (#1c2a24) with chalk-white ink (#f0ede4), a marigold chalk-yellow (#e8b23d) for correctness and primary actions, and a chalk-blue (#6fa8c9) for hints and secondary status. Bricolage Grotesque carries every heading at weight 700; Nunito Sans carries the surrounding prose. The system reads as a real field notebook propped open on a classroom easel, not a gamified app chasing a streak." --- ## Brand Positioning Fieldnote is for someone learning vocabulary the way they'd actually use it outdoors, a trail, a river, the light changing, not a gamified app chasing a streak with badges and confetti. It exists because most language apps borrow mobile-game chrome (progress bars, leaderboards, a mascot owl) that has nothing to do with actually holding a word in your head. Fieldnote's bet: the one piece of mechanical delight on the page should be the same motion as flipping a real index card, word to translation, nothing gamified beyond that. Every visual decision below serves that one bet. If a component doesn't help someone learn or recall a word, or doesn't come from a real learning interaction (flashcard, quiz, progress table, form, status), it doesn't belong in this system. colors: accent: "#e8b23d" accent-alt: "#6fa8c9" ink: "#f0ede4" ink-muted: "#9aab9f" canvas: "#1c2a24" surface: "#22322b" surface-raised: "#2a3c34" border: "#39493f" focus-ring: "#e8b23d" ## Logo / Wordmark System The mark is a rounded-square card containing a smaller outlined rectangle with a folded corner, literally a miniature of the `.flashcard` component, the folded corner in chalk-blue standing for "there's a translation on the other side." ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Fieldnote" in Bricolage Grotesque/700, mark always left of the wordmark, never stacked or reversed. - **Minimum size**: mark not smaller than `16px` square, below that the inner card and fold merge. Wordmark not smaller than `0.85rem`. - **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all four sides of the lockup. - **Don't**: recolor the mark for a light background, it only ever renders on `--panel`/`--bg`. Don't swap the fold to yellow, blue marks "the flip side" consistently across the system, yellow is reserved for correctness/primary action. Don't animate the mark itself, the flip motion belongs to the homepage's card row, not the nav. Don't rotate or stretch it. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#1c2a24` | Page background | | Surface | `--panel` | `#22322b` | Panels, nav, flashcard fronts, table header | | Surface raised | `--surface-raised` | `#2a3c34` | Quiz option default fill, row hover, input focus bg | | Border | `--border` | `#39493f` | Panel edges, dividers, quiz option outline, table rules | | Ink | `--ink` | `#f0ede4` | Primary text | | Ink muted | `--dim` | `#9aab9f` | Secondary text, helper text, "shaky" recall status | | Correct / primary | `--accent` | `#e8b23d` | Flashcard backs, primary button fill, correct quiz answer, streak badge | | Hint / secondary | `--accent-alt` | `#6fa8c9` | Logo fold, quiz-option hover border, streak-broken state | There is deliberately no separate "wrong" color beyond a lowered opacity on `--accent-alt`. A wrong guess in Fieldnote isn't an error state, it's just information, so it never turns red or shakes, it just dims slightly and the correct card stays highlighted in `--accent`. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~12.8:1 | AAA | | `--dim` text on `--bg` | ~6.2:1 | AA (body text) | | `--accent` text on `--bg` (correct status, links) | ~7.7:1 | AAA | | `--accent-alt` text on `--bg` (hints, secondary status) | ~5.8:1 | AA (body text) | | Dark label on `--accent` fill (primary button, flashcard back) | ~7.7:1 | AAA | | `--ink` on `--panel` | ~11.5:1 | AAA | | `--ink` on `--surface-raised` | ~10.0:1 | AAA | The rule this table exists to enforce: any fill of `--accent` (a button, a flashcard back, a correct-answer highlight) labels itself in a near-black (`#241a03`), never `--ink`, white-on-marigold and cream-on-marigold both undershoot AA at this lightness. typography: display: fontFamily: Bricolage Grotesque fontWeight: 700 body: fontFamily: Nunito Sans fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.5rem, 6vw, 4.25rem)` | 700 | Bricolage Grotesque | 1.05 | 0 | Hero H1 only | | `--text-h2` | `1.6rem` (homepage) / `1.4rem` (second page) | 700 | Bricolage Grotesque | 1.2 | 0 | Section headings | | `--text-card-word` | `1.25rem` (flashcard) / `2rem` (quiz prompt) | 700 | Bricolage Grotesque | 1.1 | 0 | The word itself, on a flashcard face or a quiz prompt | | `--text-body` | `1rem` | 400 | Nunito Sans | 1.6 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Nunito Sans | 1.5 | 0.01em | Footer, nav utility links, helper text, table cells | | `--text-label` | `0.72rem` | 400 | Nunito Sans | 1.4 | 0.08em, uppercase | Flashcard language tag, quiz prompt language tag | Rule for Bricolage Grotesque vs. Nunito Sans: Bricolage is reserved for the hero headline, section headings, and any word actually being learned (flashcard word, quiz prompt), the moments meant to feel like the point of the page. Everything else, nav, buttons, form labels, table cells, helper text, is Nunito Sans, chosen for how warm and legible it stays at small sizes. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape One radius scale: `--radius: 14px` for panels, flashcards, quiz options, and table containers, slightly rounder than a typical SaaS `10px`, it reads more like a stack of physical cards. `--radius-pill: 999px` for buttons and the streak badge. ## Iconography No icon library. The only non-text glyphs are the logo mark and one Unicode glyph, `✓` (streak active), set at the same weight as the text beside it. Quiz feedback is communicated by a border-color and fill shift on the option itself, not a checkmark or X icon overlay, keeping the option's own text the thing you read. If a future page needs more iconography, the fallback is Phosphor (line style, `1.5` stroke), that decision just hasn't been needed yet. ## Motion Principles Scroll flips a row of flashcards in 3D, one after another with a short stagger, each card rotating from its word face to its translation face exactly once, the moment the row enters view (`toggleActions: play none none reverse`, so scrolling back up un-flips them, matching a real stack you can flip back through). This is the only scripted animation on either page, everything else (buttons, quiz options, table rows, the goal select) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. The whole system honors `prefers-reduced-motion` by snapping every card straight to its flipped, translation-facing state with no animation. ### Never-list (written before the impeccable-pass rebuild) 1. No full-viewport centered hero holding the flashcard stack a forced screen-height away, the cards flip into view in the same first fold as the headline, not after a manufactured empty scroll. 2. No two-button CTA row floating free of the cards, the primary action sits directly beside the intro copy that introduces them. ## Voice & Tone playful, encouraging, a little cheeky, short sentences. In practice: - **Button label**: "Start learning", not "Begin Your Language Journey" - **Error message**: "Streak broken. Yesterday's round didn't get finished.", not "You lost your streak! 😢" - **Empty state**: "No cards practiced yet today.", not "Nothing here yet, get started now!!" - **Success status**: "12 days running", not "AMAZING! 12 day streak!! 🔥🔥🔥" ## Accessibility Baseline - Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every interactive element (links, buttons, quiz options, the goal select), never removed without a visible replacement. - Reduced motion: the flashcard 3D flip checks `prefers-reduced-motion: reduce` and snaps every card to its translation face instantly, no rotation. - Minimum tap target: `44px` in the smallest dimension for every button, quiz option, and form control on touch viewports. - Color is never the only signal: quiz answers pair a border/fill shift with the option's own text staying fully legible, recall status pairs color with the word "Strong"/"Shaky", streak state pairs color with a specific day count or sentence. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark + wordmark lockup. Right: a Practice link plus one primary button. Collapses to just the lockup and primary button under `480px`, no hamburger, there are only two destinations. ### Buttons Three variants, one radius (`--radius-pill`), one primary accent: - **Primary**: `--accent` fill, dark label, used once per view for the single real action ("Start learning"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. Retry actions like "start a new streak." - **Ghost**: text-only, `--dim` label, `--ink` on hover, bold weight matching the rest of the button set. Tertiary actions like "flip a few cards." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (accent outline). ### Flashcards A `perspective`-container grid of `.flashcard` elements, each with a `preserve-3d` inner that rotates on the Y axis to reveal a `backface-visibility: hidden` back face. Front face uses `--panel`, back face uses a solid `--accent` fill, the one component allowed to fill with the primary accent besides the button. ### Quiz A single `.quiz` panel: a language-pair label, the word in the display face, and a grid of tappable options. A correct pick highlights in `--accent`, an incorrect pick dims slightly, no shake, no red, wrong answers are information, not failure. ### Table Header row in `--panel`/`--dim` bold labels, body rows in `--bg`, one `--border` rule between rows, row hover to `--surface-raised`. Recall status is bold text in `--accent` (strong) or plain `--dim` (shaky), never a colored dot alone. ### Forms Label above control, `--text-small`/`--dim`/bold. Select shares the input treatment: `--panel` background, `1px solid --border`, `--radius`, `--ink` text. On `:focus`, border becomes `--accent` and the background lifts to `--surface-raised`. ### Status / feedback states - **Loading**: a skeleton shaped like the real content (bars matching text line-heights), not a spinner. - **Empty**: a plain sentence in `--dim`, no illustration. - **Error**: an inline `--accent-alt` message with a concrete next step, never a silent failure or a shaming tone. - **Success / status badge**: `--radius-pill`, `1px solid --accent`, `--accent` text on transparent fill, not filled, filled would compete with the primary button's and flashcard-back's exclusive use of a solid `--accent` fill. ### Footer One row: product name/tagline on the left, real page links on the right (Practice, back to gallery). No invented legal text. ## Do's and Don'ts ### Do - Let the flashcard flip be the only 3D-transform moment on the page, everything else stays flat. - Reserve `--accent` for correctness and the single primary action, never purely decorative. - Treat a wrong quiz answer as information (dim slightly), never as failure (no red, no shake). - Use a dark label on any `--accent`-filled surface, per the contrast table above. - Keep vocabulary content genuinely outdoor/field-themed (trail, light, river, summit), that's the brand's actual differentiator from a generic flashcard app. ### Don't - Don't add streak-shaming copy, red "you failed" states, or a mascot, this is a notebook, not a mobile game. - Don't replay the flashcard flip on every scroll pass, reveal once per view, reversible only by scrolling back up. - Don't introduce a red "wrong answer" color, route incorrect quiz picks to reduced opacity instead. - Don't stack more than one primary button in the same view. - Don't fill a status badge solid, badges stay outlined so the primary button and flashcard backs remain the only solid-`--accent`-fill elements on screen. ## Known Constraints - Two routes now exist (home, practice), still no real spaced-repetition scheduling or account system, no responsive breakpoint table beyond a two-column card grid under `640px`, no authenticated user state (the "Start learning" flow and quiz are not wired to anything real, this is a concept demo).