← Back to Home
How we look, speak, and think
The principles, voice, and visual system that make Motherboard feel like itself.
The principles, voice, and visual system that make Motherboard feel like itself.
Motherboard is a calm, capable presence — like a friend who happens to be very organised. Not a brand. Not an assistant. A person who quietly has your back.
Warm cream and deep espresso. Nothing stark white. Nothing cold grey. Surfaces feel like paper. When in doubt, go warmer.
Earn trust by not crowding. Sections breathe. Inputs have room. Default instinct: add space.
Sky blue (accent) for CTAs, focus rings, and active states only. Brown mid-tone (ink-mid) for secondary text. No gradients. No decorative illustrations.
150ms ease-out. Responsive, not animated. Nothing bounces. Respect busy parents' time.
Personal family data. Calm UI. One thing at a time. No noise. No dark patterns.
Warm, not saccharine
Do
“Know what's missing before you go looking.”
Don’t
“We love helping families stay organized! 🎉”
Confident, not bossy
Do
“I'll handle the inventory. You handle the kids.”
Don’t
“You must connect Gmail to continue.”
Clear, not clinical
Do
“Takes about 2 minutes. I'll use this to start building their inventory.”
Don’t
“Input child profile data to initialize inventory generation.”
Understated, not cold
Do
“I'm building your family's inventory now.”
Don’t
“Processing request. Please wait.”
Empathetic, not dramatic
Do
“Every new season. No idea what's already in the house.”
Don’t
“The chaos of parenthood is real! We get it!”
Clear space: ¼ of logo height.
Headers, favicon. Same clear space.
surface
#F6F1EA
surface-raised
#EDEFF7
surface-wash
#D3D6E0
ink
#6D4837
ink-mid
#9E6C51
accent
#98CBE4
border
#BCBFCC
focus-ring
#98CBE4
gray-1
#EDEFF7
gray-2
#D3D6E0
gray-3
#BCBFCC
gray-4
#9DA2B3
gray-5
#6E7180
gray-6
#40424D
gray-7
#1E1E24
gray-8
#000000
Manrope — Light, Regular, Medium, Semibold, Bold, ExtraBold
The quick brown fox
The quick brown fox
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Choose the right one for the job.
Semantic colours for levels of urgency.
Error
#C0392B
#FDF0EE
#E8A89E
Warning
#A0522D
#FDF5EE
#E8C9A0
Success
#2E7D5E
#EEF5F0
#A8D1C0
Transient — auto-dismiss
Position — fixed bottom, centered
Use for — confirmations and low-stakes feedback
Persistent — user must act
Position — top of screen, below header
Use for — when the user is blocked
↑ banner sits here, pinned to the top of the mobile shell
Contextual — near the event
Use for — validation and field-level feedback
Enter a valid US phone number.