Fernwell · component library & design system · 8 artboards
Fictional institution. Pan and zoom the canvas, artboards stack top to bottom. Artboards 5 and 6 are interactive.
01
Cover
LIGHT-BACKGROUND LOCKUP
For #F3F5F4 and #FFFFFF surfaces.
DARK-BACKGROUND LOCKUP
For #1E3A34 fills and photography.
Fernwell: Component Library & Design System
The reusable visual language behind the Fernwell case study, documented so any new screen stays consistent.
LOGO USAGE
COLOR
TYPE
COMPONENTS
TRUST PATTERN
SPACING & ICONS
02
Logo usage
Clear space is measured in multiples of the icon's own height (x)
CLEAR SPACE = 0.75x
SPEC, LIGHT LOCKUP
Use on: #F3F5F4 page background and #FFFFFF card fills only.
Clear space: 0.75x on all four sides, where x is the icon's height. Nothing enters that box, no rule, no nav item, no photo edge.
Minimum size: 104px wide on screen, 22mm in print. Below that the wordmark's stem joints close up.
Header height: 32px icon in app chrome, 56px on marketing pages.
CLEAR SPACE = 0.75x
SPEC, DARK LOCKUP
Use on: #1E3A34 fills, and over photography only where the area behind the mark measures darker than #3A4F49.
Clear space: identical 0.75x box. On photography, add a #1E3A34 scrim at 70% behind the clear-space box rather than shrinking the mark.
Minimum size: 104px wide, same floor as the light version; reversed marks do not get to go smaller.
Never: on the caution or critical accent. Both fail contrast against the mark's own ink.
DON'T
Don't recolor the mark. It ships in two versions and neither is tintable.
Don't put the reversed version on a light background, the wordmark drops to roughly 1.4:1.
Don't stretch or rotate it. Scale proportionally, and keep the baseline horizontal at every size.
03
Color
Five values, no others. Contrast ratios measured against the surface each one is used on.
#F3F5F4
Page
Background, cool neutral, not sterile white. Every screen starts here; white is reserved for what sits on top.
#FFFFFF
Surface
Surface for cards and elevated content, not the page background. If two white cards touch, separate them with #DEE4E1, never a shadow alone.
#1E3A34
Primary
Primary, trust and structure, buttons, headers, brand moments. One primary button per screen, the moment it repeats, neither is primary.
#FFF on it = 11.2:1
#B8763F
Caution accent
Caution accent, holds and warnings, never for alarm. Pending authorizations, paused cards, "we need one more thing", states the customer waits out, not ones they've lost.
#FFF on it = 3.6:1 · 19px+ only
#A6433D
Critical accent
Critical accent, reserved for genuinely critical states only, used sparingly, confirmed fraud, a failed payment, a destructive confirm. Budget: at most one instance visible at a time.
#FFF on it = 5.2:1
HOW THE TWO ACCENTS DIVIDE
Caution means the system is still working and the customer's money is intact, a pending hold, a paused card. Critical means something ended badly and needs a decision, a declined payment, a confirmed dispute. If you can't say which of those two sentences applies, the state is caution.
04
Typography
Inter for display and body · IBM Plex Mono for labels and data
SCALE, INTER
DISPLAY
54 / 1.12 / −2.5% Your card is safe
54 / 1.12 / −2.5% Your card is safe
H1
34 / 1.2 / −1.5% We paused your card
34 / 1.2 / −1.5% We paused your card
H2
22 / 1.3 Recent transactions
22 / 1.3 Recent transactions
BODY
17 / 1.6 Holds usually clear in one to three days, and the final charge may be lower than the amount shown.
17 / 1.6 Holds usually clear in one to three days, and the final charge may be lower than the amount shown.
SMALL
14 / 1.55 Checking your rate takes about two minutes and doesn't affect your credit score.
14 / 1.55 Checking your rate takes about two minutes and doesn't affect your credit score.
CAPTION
12 / 1.5 Rates shown are illustrative and vary by credit profile.
12 / 1.5 Rates shown are illustrative and vary by credit profile.
Display, one per screen, for the outcome sentence in a full-page moment.
H1, screen title, or the lead sentence of an alert dialog.
H2, section heads inside a card. Never used for emphasis on a single line of body.
Body, all explanatory prose. Max measure 62 characters.
Small, secondary detail under a value or control.
Caption, legal and provenance only. Never load-bearing instruction.
IBM PLEX MONO
SECTION LABEL · 11 / .16EM
•••• •••• •••• 4417
CASE 9K-4417 · SEPT 15, 2026
Labels, data callouts, and anywhere a number needs tabular alignment. All-caps labels get .16em tracking; data stays sentence case and untracked.
LIVE, TABULAR FIGURES
PROPORTIONAL, DIGITS SHIFT
$1,412.86$111.00$98,700.11
TABULAR, DIGITS HOLD COLUMN
$1,412.86$111.00$98,700.11
Digits align in a column instead of shifting width digit to digit, implemented as font-feature-settings: tnum, not just visual alignment. Applies to every balance, amount, rate and date in the product.
05
Core components
Every state labeled · the input is live, click it
BUTTONS
Primary. One per screen. Verb first, one to three words, and the amount when money moves.
Secondary. Any number per screen, for reversible actions. Same size as primary, never smaller, or it reads as disabled.
Disabled. Only when the blocker is visible on screen and named. If the reason isn't on screen, keep the button enabled and answer in an error.
TEXT INPUT
Payment amount
$0.00
DEFAULT
Payment amount
FOCUSED, 3PX RING = 2.6:1 VS SURFACE
Payment amount
$2,900.00
!
That's more than your balance of $1,412.86. Enter that amount or less.
ERROR
Error text replaces nothing, it is added below the field and the border thickens to 2px, so the state survives at 200% zoom and in grayscale. Say what's wrong and how to fix it in one sentence; name the limit, never blame the person.
Live field value: {{ amount }}, {{ amountNote }}
ALERT BANNERS
i
Your statement for September is ready. Nothing is due until Oct 16.
INFO · PRIMARY #1E3A34
For facts the customer didn't ask for but will want. Dismissible, and never reappears once dismissed.
!
$340.00 is held at Vermeer Home Supply. Holds usually clear in one to three days.
CAUTION · #B8763F
For states the customer waits out. Persists until the state resolves itself, not dismissible.
!
Your $600 payment was declined by your bank. Try another account or pay a smaller amount now.
CRITICAL · #A6433D
For something that ended badly and needs a decision. Always carries an action; never the only thing on screen.
COPY RULE, ATTACHED TO THE COMPONENT
Lead with what happened, then what to do, never longer than 2 sentences.
Fails review if it opens with an apology, uses "unfortunately", or needs a third sentence, that's a page, not a banner.
STATUS BADGE
Active
■Paused
✕Closed
SAME BADGES, COLOR REMOVED
Active
■Paused
✕Closed
Still legible. That is the test.
DIRECTION
Never color alone, always pair with an icon or word.
Each badge carries three signals: a shape (dot, square, cross), a word, and a container border. Strip the fill and the meaning holds, which is what WCAG 1.4.1 asks. Badges state facts only, they are never clickable; if the status needs an action, the action goes in a button beside it.
06
The permission and trust pattern
"Know Your Agent" consent pattern · interactive, pause a scope
KNOW YOUR AGENT · SCOPES
What Fernwell Assistant may do for you
Each permission is a specific action with its own limit and its own pause. Turning one off never affects the others, and never turns off your account.
Pay my statement in full on the due date
From Checking ••3092. Up to $2,500 per payment. Stops if the balance exceeds that and asks you instead.
GRANTED JUN 4, 2026 · USED 3 TIMES
Move money into Savings when Checking is above $1,000
Weekly, on Fridays. Never leaves less than $1,000 in Checking. Maximum $400 per transfer.
GRANTED JUN 4, 2026 · USED 11 TIMES
Dispute a charge on my behalf
Off by default. The assistant may prepare a dispute and show it to you, but only you can file it.
NEVER GRANTED
AUDIT TRAIL, PLAIN LANGUAGE
NEWEST FIRST
{{ row.when }}
{{ row.what }}
{{ row.tag }}
Every row names the actor, the amount, and the limit it respected. No row says "action completed successfully".
DIRECTION
Any AI action taken on a customer's behalf gets this pattern: a specific, legible scope, a plain-language audit trail, and an equally easy pause action, never a vague on/off toggle.
THE THREE PARTS, SPECIFIED
01Scope, one sentence naming the action, the account, and a numeric ceiling. "Manage my payments" is not a scope; "pay my statement in full, up to $2,500, from Checking ••3092" is.
02Trail, past tense, actor named, amount shown, limit restated. Written for someone reading it a year later during a dispute.
03Pause, same row, same tap count as granting. No confirmation dialog, no retention plea, no "are you sure". Pausing logs a row like any other action.
FAILS REVIEW IF
A single master toggle governs more than one kind of action.
A scope has no number in it.
Pausing costs more taps than granting, or opens a dialog that argues.
The trail is only in an email, or only downloadable as a file.
Any row in the trail uses the word "successfully".
07
Spacing, radius, and iconography
4px base unit · three radii · one icon weight
SPACING SCALE
s1 · 4
icon to its label
s2 · 8
label to its field
s3 · 16
between sibling controls
s4 · 24
card padding
s5 · 40
between sections
Base unit 4px; every gap is one of these five. Anything between two steps rounds up, never down, cramped is the failure mode we see, not airy. Use gap on a flex or grid parent, not margins on children.
RADIUS SCALE
r1 · 8pxbuttons, inputs, badges
r2 · 14pxcards and banners
r3 · pillstatus chips and toggles only
A pill shape means "this is a state or a switch, not a destination". Never pill a button, a pill that clicks through is the one ambiguity the scale exists to prevent.
ICONOGRAPHY
CARD
LOCK
PENDING
SECURED
Icons stay single-weight and geometric, no duotone, no illustration style, consistent with the wordmark's construction.
Drawn on a 24px grid, 1.75px stroke, square caps, mitred joins, no fills. Rendered at 20, 24 or 30px only. Never the sole carrier of meaning, every icon in the product sits beside a word.
08
Quick reference
Screenshot this one. Every rule from artboards 02–07, condensed.
DESIGN SYSTEM QUICK REFERENCE · v1.0 · SEPT 2026
LOGO
Clear space 0.75x the icon height, all sides.
Minimum 104px wide / 22mm. No exceptions for the reversed version.
Light lockup on #F3F5F4 or #FFFFFF; dark lockup on #1E3A34 or anything darker than #3A4F49.
Never recolor, stretch, rotate, or place on an accent.
COLOR
#F3F5F4 page · #FFFFFF surfaces only · #1E3A34 primary.
#B8763F caution = intact and waiting. #A6433D critical = ended badly, needs a decision.
One primary button and at most one critical element visible at a time.
#FFF on #B8763F needs 19px+ type.
TYPE
Inter: 54 display / 34 h1 / 22 h2 / 17 body / 14 small / 12 caption.
IBM Plex Mono for labels (11px, .16em, caps) and all data.
Every amount, rate and date gets tnum.
Body measure caps at 62 characters. Caption never carries instruction.
COMPONENTS & COPY
Buttons: verb first, 1–3 words, amount when money moves. Never "Submit" or "Continue".
Banners: what happened, then what to do. Two sentences maximum.
Errors: what's wrong and how to fix it, one sentence, name the limit, don't blame the person.
Disabled only when the blocker is named on screen.
Badges: never color alone, icon or word, always.
KNOW YOUR AGENT
One scope per action, with a number in it and the account named.
Audit trail in plain past tense: actor, amount, limit respected.
Pause costs the same tap count as granting. No dialog, no argument.
Destructive scopes (disputes, closures) stay off by default and stay manual.
SPACING, RADIUS, ICONS
4 / 8 / 16 / 24 / 40 only. Between two steps, round up. Use gap, not margins.
8px buttons and inputs · 14px cards · pill for states and switches only.
Icons: 24px grid, 1.75px stroke, square caps, no fills, no duotone.
No icon ships without a word beside it.
Fernwell is a fictional institution created for portfolio purposes. No real bank, trademark, or customer data is represented anywhere in this system.
8 ARTBOARDS · END