Fieldnote Design System

A design system for Fieldnote — a (fictional) notes + journaling app for people who think outdoors. Built as a prototyping kit for designing mobile and tablet interfaces in an iOS/iPadOS context, without reproducing any specific vendor's branded UI or typefaces.

---

What is Fieldnote?

Fieldnote is a quiet, single-purpose journal app. You pin a note to a place, a walk, a moment; you revisit it later. Its voice is unhurried. Its aesthetic is earthy, paper-like, a little analog: think a canvas-bound pocket notebook carried on a long hike, not a productivity dashboard.

Product surfaces covered by this kit:

• Fieldnote Mobile — the primary phone app. Quick capture, map-stitched timeline, rich detail view.
• Fieldnote Tablet — the split-view companion for reviewing and organizing entries. Same visual language, wider canvas.

Both surfaces follow common mobile-OS layout conventions (safe areas, tab bars, large-title navigation, sheet modals) — these are generic platform patterns, not styled after any specific vendor's design language.

Scope & substitutions

• Company: fictional. No real-world Fieldnote exists; this kit is a scaffold for exploring design directions.
• Typography: this kit uses Geist (UI sans) and Instrument Serif (display serif), both via Google Fonts. The original scope referenced a vendor's proprietary typefaces; those have been fully substituted here to avoid any brand appropriation.
• Device bezels: generic phone/tablet frames from our starter components (ios-frame.jsx, android-frame.jsx). Neutral rounded-rectangle hardware, no vendor logos.
• Iconography: Lucide via CDN (https://unpkg.com/lucide-static) — consistent 1.75px stroke, open source. See ICONOGRAPHY.md.

No Figma file or codebase is attached to this project; the system is designed from scratch to match the brand brief above.

---

Index

Root of this project:

File / Folder	What's in it
README.md	This file — brand, voice, visual foundations
ICONOGRAPHY.md	Icon conventions + Lucide usage
SKILL.md	Agent-skill manifest (for use as a downloadable Claude Code skill)
colors_and_type.css	CSS variables for color + type tokens, plus semantic defaults
fonts/	@import shims for Google Fonts (Geist, Instrument Serif)
assets/	Logos, illustration placeholders, brand marks
preview/	Small HTML cards that populate the Design System tab
ui_kits/mobile/	Fieldnote Mobile — phone app recreation
ui_kits/tablet/	Fieldnote Tablet — tablet split-view recreation
ios-frame.jsx, android-frame.jsx	Generic device-frame starter components

---

Content Fundamentals

Fieldnote's voice is plainspoken, unhurried, second-person-singular. We write like someone jotting in the margin of their own notebook, not like a product team announcing a feature.

Tone & perspective

• Address the reader as you. Never "we." The app is a companion, not a team.
• Sentence case, always. Title case feels corporate; Fieldnote doesn't.
• Short sentences. Compound only when necessary.
• No exclamation marks. No "Let's." No "Awesome!"
• If something is empty, say what it is — don't invent encouragement.

Casing & punctuation

• Headings: sentence case. "Your week", not "Your Week".
• Buttons: sentence case, verbs. "Save entry", "Pin to map", "Throw this away".
• Dates: "Mon 14 Apr", "earlier this spring", "a year ago today" — preferred over "April 14, 2026" when relative phrasing works.
• Serial comma. En-dashes for ranges. No emoji in copy.

Examples (do)

• "You haven't written anything today. That's fine."
• "Three entries from this trail, pinned over two years."
• "Saved. It'll sync when you're back on wifi."
• "This will delete the entry and its photos. There's no undo."

Examples (don't)

• "You crushed it today! 🎉 3 entries logged!" — exclamations, emoji, metric-bragging.
• "Oops! Something went wrong." — apologetic, cutesy; say what happened.
• "Your Amazing Week In Review" — title case, hype.

Error & empty states

• Error: name the problem, say what to do. "Couldn't save. Check your connection and try again."
• Empty: describe what will appear here, with no pressure to act. "Entries you pin to a place show up here."

Emoji / symbols

• Emoji: never, in product copy.
• Icons: yes, from Lucide, at the smallest effective size.
• Unicode punctuation welcome: em-dash, en-dash, curly quotes, ×, →.

---

Visual Foundations

Fieldnote's look is warm paper, low-contrast, generous margins. The reading surface is always slightly off-white; pure #FFFFFF never appears as a background. Color is used sparingly — one accent (a deep moss green), one warning (a muted rust), and a neutral scale that leans warm.

Palette

• Paper — #F6F1E8: the default app background. Every screen starts here.
• Card — #FCF8EF: raised surfaces (list cards, sheets). Subtle warmth against Paper.
• Ink — #1F1B16: primary text. Warm near-black, never pure #000.
• Ink-2 — #58524A: secondary text, metadata, timestamps.
• Ink-3 — #958E82: tertiary, chevrons, dividers.
• Moss — #3F5D3A: the single accent. Used for active states, links, the primary action in any flow.
• Moss-soft — #E6EBDD: the accent as a fill background (active nav pill, selected chip).
• Rust — #9A4A2C: destructive and warning only. Never decorative.
• Sky — #3A5874: reserved for "place" / map-related UI. The one cool color in the system.

Type

• Display / serif — Instrument Serif (regular + italic). Used for entry titles, big numbers, section headers. Never below 20px.
• UI / sans — Geist (400 / 500 / 600). All other text.
• Mono — Geist Mono (400). Timestamps, coordinates, debug-ish info.
• Body is 16px / 1.5. Captions are 13px / 1.45. No text below 13px except status-bar clock.
• Serif display is set with tight tracking (-0.01em) and generous leading (1.15).

Surfaces, corners, depth

• Radii: 4 (chip), 10 (button), 16 (card), 22 (sheet / list container), 28 (modal), 48 (device bezel).
• Cards: no shadow by default. Separation comes from background contrast (Paper vs Card) and 1px hairline borders in Ink-3 at 20% opacity.
• Elevation (sparingly):
  • e1 (sheets): 0 1px 2px rgba(31,27,22,.04), 0 8px 24px rgba(31,27,22,.06)
  • e2 (modals, menus): 0 2px 4px rgba(31,27,22,.06), 0 20px 44px rgba(31,27,22,.12)
• Borders: hairlines only (0.5–1px), in Ink-3 at 20–30% opacity. No thick strokes.

Motion

• Easing: cubic-bezier(0.2, 0.8, 0.2, 1) everywhere. One curve, applied consistently.
• Duration: 160ms for state changes (hover, toggle), 240ms for sheet transitions, 320ms for navigation.
• No bounce, no spring, no rubber-band. Fieldnote moves like turning a paper page — quick, decisive, settled.
• Fades are fine. Scale transforms only on press (0.98, 100ms).

Interaction states

• Hover (tablet / cursor): background shifts 4% darker; no color change.
• Press: transform: scale(0.98) + background shifts 8% darker. 100ms down, 160ms up.
• Focus: 2px Moss ring, 2px offset. Never a glow.
• Disabled: 40% opacity, no pointer events. Never greyscale.

Imagery

• Photography, when used, is warm and grainy — think overcast afternoon light, subtle film grain, muted saturation. Never oversaturated sunset shots or stock "teamwork" photography.
• Illustrations are sparse, hand-drawn line art in Ink at 80% opacity on Paper — never flat vector clip art.
• Full-bleed imagery appears in entry detail and onboarding only. Everywhere else, images are bounded inside a Card with 16px radius.

Layout

• Page padding: 16px horizontal on mobile, 24px on tablet.
• Safe areas are respected — bottom tab bars sit above the home indicator; nav bars clear the status bar.
• Content is left-aligned. Centered text only in alerts and the empty state in onboarding.
• Lists use 16px inset, 56px min row height. Rows divided by 0.5px hairlines, not shadows.

Transparency & blur

• Tab bars and the compose bar use a soft paper blur: background: rgba(246, 241, 232, 0.82) + backdrop-filter: blur(16px) saturate(140%). Never a pure glass / frosted-white blur.
• Scrims (modal dim): rgba(31, 27, 22, 0.32).
• The accent Moss is never used at <100% opacity. Either it's on, or it's not.

What Fieldnote is not

• Not glassy. Not neon. Not gradient-heavy. Not playful with emoji or mascots.
• Not dark-mode-first — a dark mode is provided, but the brand lives in Paper.
• Not hyper-modern sans-on-pure-white. That's the opposite of the brand.

---

Using this system

When designing any new Fieldnote surface:

1. Start with Paper as the background.
2. Pick one accent action per screen — use Moss; demote others to Ink-2 ghost buttons.
3. Pair Instrument Serif for one distinctive element (title, big date, empty-state line) and Geist for everything else.
4. Hairlines and background contrast, not shadows, separate surfaces.
5. If a color isn't in the palette, don't add it. Reach for opacity of an existing token instead.