FieldnoteBrand guidelinesv1.1
Research that stays findable after the study ends
- Version
- 1.1 · Dec 2025
- Discipline
- Product management
- Sector
- Research operations
- Prepared by
- Berke Tok
Foundations
A research repository where interviews, surveys and support tickets become tagged evidence, and every insight links back to the exact quotes that support it.
1.1Purpose
A note with its corner lifted. Research is the page; the insight is the corner someone bothered to turn over.
1.2Audience
Who it is for
Researchers who run the studies, and the designers and PMs who need the findings later.
Positioning
For organisations that keep re-running the same interview. Unlike slide decks that end the study, Fieldnote keeps every insight attached to its quotes.
1.3Principles
- P1
Highlight as you read
Transcripts are tagged in place. A highlight carries its speaker and timestamp wherever it is reused.
- P2
Insights with receipts
An insight card shows how many people said it and opens onto the quotes, so a finding cannot drift away from its evidence.
- P3
Synthesis on a board
Notes cluster into themes on a shared canvas, and a theme can be linked to an opportunity in the product backlog.
Voice
How Fieldnote sounds in product, support and marketing. One voice; the tone moves with the moment, not the channel.
2.1Traits
Evidential
A finding is always followed by how many people said it and where.
Quiet
The participant’s words are the loudest thing on the page. Our copy stays out of the way.
Findable
We write titles that will make sense in a search two years from now.
2.2Say this, not that
- Say
7 of 12 participants missed the autopay toggle.
NotUsers struggled with autopay.
- Say
Mariam, small business owner, 14:32
NotA user said
- Say
Autopay study · Synthesis · Oct 2025
NotFinal final research v3
2.3House style
- 01Counts as “7 of 12”, never percentages under 30
- 02Quotes verbatim, with timestamp
- 03Studies titled topic · stage · month
Logo
One mark, one wordmark, one horizontal lockup. The mark is drawn on a 48-unit grid and is never redrawn, only scaled.
3.1Lockups
3.2Construction
Construction circles and the 4-unit grid the mark is drawn on.
- Grid
- 48 units, 4-unit subdivisions
- Construction
- Orthogonal, no curves
- Lockup
- Mark 132 : word 561 units wide
- Gap
- 48 units between mark and word
3.3Clear space and size
Shown at true size. Below these the mark fills in and the word loses its counters.
3.4Misuse
Do not stretch or squash
Do not rotate
Do not recolour
Do not outline
Do not add effects
Do not set on low contrast
Colour
Four colours with fixed roles. Values are the source of truth for screen; print is proofed against the CMYK starting points below.
4.1Palette
- PrimaryButter
- HEX
- #F5D05E
- RGB
- 245 208 94
- HSL
- 45 88% 66%
- OKLCH
- 86.8% 0.138 91
- CMYK
- 0 15 62 4
- On it
- Ink
- GroundInk
- HEX
- #1D1B16
- RGB
- 29 27 22
- HSL
- 43 14% 10%
- OKLCH
- 22.3% 0.010 89
- CMYK
- 0 7 24 89
- On it
- Paper
- TintCream
- HEX
- #FBF1D3
- RGB
- 251 241 211
- HSL
- 45 83% 91%
- OKLCH
- 95.8% 0.041 92
- CMYK
- 0 4 16 2
- On it
- Ink
- PaperPaper
- HEX
- #FFFDF6
- RGB
- 255 253 246
- HSL
- 47 100% 98%
- OKLCH
- 99.4% 0.009 94
- CMYK
- 0 1 4 0
- On it
- Ink
4.2Proportion
Share of a typical surface. Primary is an accent even where it leads.
4.3Tonal scale
Derived from Butter in linear light, for charts, states and illustration. Never for the mark.
- 50FEF9F1
- 100FDF5E6
- 200FBEDCF
- 300F9E4B3
- 400F7DA91
- 500F5D05E
- 600E1BF55
- 700C9AB4C
- 800AE9340
- 9008C7632
4.4Contrast
WCAG 2.2 ratios. AA needs 4.5:1 for text, 3:1 for large text and icons.
- Aa16.90:1AAA
- Aa15.26:1AAA
- Aa11.52:1AAA
- Aa1.11:1Fail
- Aa1.47:1Fail
- Aa16.90:1AAA
- Aa1.47:1Fail
- Aa1.32:1Fail
- Aa11.52:1AAA
Typography
Hanken Grotesk for everything, from display to captions. One family keeps the product and the marketing in the same voice.
5.1Typeface
Hanken Grotesk
Semibold 650 · Regular 400
5.2Scale
Base 16 px, ratio 1.2. Line height tightens as size grows.
- Display40 / 1.08 / -3%Research that stays findable after the study ends
- Heading 133 / 1.2 / -1.5%Research that stays findable after the study ends
- Heading 228 / 1.2 / -1.5%Research that stays findable after the study ends
- Heading 323 / 1.5 / 0%Research that stays findable after the study ends
- Lead19 / 1.5 / 0%Research that stays findable after the study ends
- Body16 / 1.5 / 0%A research repository where interviews, surveys and support tickets become tagged evidence, and every insight links back to the exact quotes that support it.
- Caption13 / 1.5 / 0%A research repository where interviews, surveys and support tickets become tagged evidence, and every insight links back to the exact quotes that support it.
5.3Setting
Sentence case
Headings, buttons and labels. Title case only for product names.
Tabular figures
Every amount, time and count, so columns line up and values do not jump.
60–75 characters
Running text measure. Short labels may run to the edge of their container.
Layout
Two grids and one spacing scale cover every screen. Print uses the same 12 columns on the A-series.
6.1Grid
6.2Spacing
A 4 px base. Components step on 4 and 8; sections on 48 and up.
- space-14 px
- space-28 px
- space-312 px
- space-416 px
- space-524 px
- space-632 px
- space-748 px
- space-864 px
- space-996 px
Interface
The identity carried into the product: tokens first, then the handful of components every screen is made from.
7.1Tokens
- radius.sm
- 3 px
- radius.md
- 6 px
- radius.lg
- 9 px
- focus
- 2 px #F5D05E · 2 px offset
- elevation.1
- 0 1 2 / 8%
- elevation.2
- 0 12 32 / 14%
- motion.fast
- 160 ms · ease-out
- motion.base
- 240 ms · ease-out
- hit target
- 44 × 44 px
7.2Components
Live components, set in the brand typeface with the tokens above.
7.3In product
Applications
Where the rules meet the world. When something here is not covered, follow the checklist and keep the lockup clear.
8.1In context
8.2Checklist
Before anything ships.
- The lockup is at least 18 px tall on screen and 8 mm in print.
- Clear space around the lockup is at least half the mark’s height on every side.
- Body text is Ink on Paper: 16.9:1, AAA.
- Butter is not used for body text on Paper (1.5:1); keep it for fills, marks and large type.
- Headings use Hanken Grotesk; amounts use tabular figures.
- Copy follows the house style in 2.3, starting with “Counts as “7 of 12”, never percentages under 30”.