Farmers Prototype Style Guide
Colors, typography, icons, and component reference for the Supply Chain Map web app.
v1 · June 202601 — Colors
All colors are defined as CSS custom properties on .scm.
02 — Typography
Two typefaces from Adobe Typekit — kit dvx7bjk.
https://use.typekit.net/dvx7bjk.css
'balboa-plus-fill', sans-serif
"alternate-gothic-no-3-d", sans-serif
Type Scale
| Role | Font | Size | Weight | Line-height | Letter-spacing | Transform | Sample |
|---|---|---|---|---|---|---|---|
| Eyebrow | Body | 20px | 700 | — | 0.22em | uppercase | Welcome to our |
| Heading H1 | Heading | 54px | 400 | 1.05 | −0.01em | — | Not-So-Secret Supply Chain |
| Intro body | Body | 26px | 400 | 1.2 | — | — | We partner with farmers who care as much as we do. |
| Location nav item | Body | 18px | 600 | — | — | — | Uganda Cocoa |
| Farmer label | Body | 14px | 400 | — | 0.16em | uppercase | Farmer Name |
| Farmer name | Body | 26px | 900 | 1.15 | 0.01em | uppercase | Katuramu Musanzambindu |
| Stat label | Body | 18px | 500 | — | — | — | Parcel size |
| Stat value | Body | 18px | 700 | — | — | — | 3.1 ha |
| Callout text | Body | 20px | 500 | 1.5 | — | — | Beyond Good works with 133 cocoa farmers |
| Badge | Body | 11px | 700 | — | 0.1em | uppercase | Cocoa Farm |
| Sheet title | Body | 21px | 800 | 1.15 | — | — | Katuramu Musanzambindu |
| Sheet subtitle | Body | 14px | 400 | — | — | — | Uganda |
| Explore pill | Body | 15px | 700 | — | — | — | Explore Our Supply Chain |
| Promise button | Body | 13px | 700 | — | — | — | Our Farmer Promise |
| Map label | Body | 13px | 700 | — | 0.18em | uppercase | UGANDA |
| Nav hint | Body | 18px | 400 | — | — | — | Select a location to explore |
| Legend text (desktop) | Body | 18px | 500 | 1.2 | — | — | Cocoa Farms |
| Legend text (mobile) | Body | 14px | 500 | 1.4 | — | — | Cocoa Farms |
03 — Icons
All icons are inline SVG on a 24×24 viewBox using currentColor. Click Copy SVG or download each file.
Location Identity
UI Chrome
Stat Icons
Legend Dots
04 — Components
Visual specimens for each UI element with size and color references.
.scm-badge
Background: #f5c243 · Text: #5d2a2c · Padding: 3px 10px · Radius: 6px · 11px / 700 / uppercase / 0.1em
.scm-locations
Panel bg: rgba(36,28,21,0.92) · Border: rgba(255,255,255,0.08) · Radius: 16px · Width: 230px
Default item: white text · Active item: white bg + inset ring 2px #f5c243 · Icon chips: 34×34 / 50% radius
.scm-detail__stat
Grid: 36px 1fr auto · Icon circle: 40×40 / bg #faf6ef · Divider: rgba(43,33,24,0.12)
Label: 18px / 500 / #5d2a2c · Value: 18px / 700 / right-aligned / nowrap
.scm-detail__callout (desktop) · .scm-callout (mobile)
Desktop: bg #fdf3d7 · border-top rgba(245,194,67,0.5) · padding 16px 20px · 20px / 500
Mobile (.scm-callout): same bg · radius 14px · link-style row with chevron · icon circle 40×40 / bg #f5c243
.scm-detail__accent-line
36×3px · radius 2px · #f5c243
.scm-explore-pill
Bg: #f5c243 · Text: #5d2a2c · Radius: 9999px · Padding: 14px 20px · 15px / 700 · Shadow: 0 4px 14px rgba(20,14,8,0.18)
.scm-legend
Cocoa Farms
Recent Deforestation (Last 2 Years)
Desktop: bg #fff · width 230px · radius 16px · shadow 0 4px 14px rgba(20,14,8,0.18)
Mobile: rgba(255,255,255,0.93) · backdrop-filter blur(6px) · horizontal flex-wrap · radius 12px
.scm-sheet (mobile bottom sheet)
Bg: #faf6ef · Radius: 22px 22px 0 0 · Shadow: 0 -8px 30px rgba(20,14,8,0.25)
Avatar: 62×62 · bg white · border 3px #f5c243 · Collapsed: translateY(calc(100% - 110px))