Challenge card
One-line problem · Owner org
Design system
ZBIF style guide
Tokens, components, and states for the public site. Poppins only. Green carries brand. Gold is the spark.
Color
Primary green ramp
green-900
#06271D
green-800
#0A3527
green-700
#0B3D2E
green-600
#0F4F3B
green-500
#14684E
green-100
#DCEAE4
green-50
#EEF4F1
Accent
Gold ramp
gold-600
#B8941F
gold-500
#C9A227
gold-100
#F5EAC8
Neutrals
Ink
#101915
Muted
#5B6B63
Bg
#FFFFFF
Bg alt
#F7F9F8
Bg dark
#06271D
Status
Success
#1E7F51
Warning
#C9821F
Danger
#B23A3A
Info
#2A6F97
Typography
Poppins scale
One family for display, UI, and body. Fluid clamp sizes.
Eyebrow / caption
Display
Heading 1
Heading 2
Heading 3
Heading 4
Lead: short supporting sentence under a section heading.
Body copy stays within 72ch. Voice is direct and peer-to-peer. Never use em-dashes. Prefer commas, colons, or parentheses.
Small / helper text for metadata and captions.
Spacing and shape
Rhythm tokens
Spacing
4px base: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128. Section Y: 96 / 64 / 48.
Radius
Shadows
sm
md
lg
Buttons
Interactive states
Cards and badges
Marketplace surfaces
Solution card
Stage · Sector · Ask
Speaker card
Title · Organisation
open
in development
in deal
closed
Forms
Inputs and feedback
Success toast example
Error toast example
Signature
Marketplace stepper
1
Submit
Companies post challenges
2
Build
Innovators develop
3
Present
Forum pitches
4
Close
Deal Rooms
Auth
Account components
Password strength, persona cards, and OTP inputs used on registration and login.
OTP input pattern
Accessibility
Checklist
- AA contrast on text and controls (verify gold-on-white; darken if needed)
- Visible
:focus-visiblerings on interactive elements - Keyboard: mega-menu, drawer, command search (Ctrl/Cmd-K), accordion, carousel
- Skip-to-content link, landmarks, heading order
- Labels on inputs; alt text on meaningful images
prefers-reduced-motionhonored (instant fade, no Ken Burns)- Tap targets at least 44px; no horizontal overflow