01
FLL Explore
For curious K-3rd graders
A gentle introduction to robotics and engineering with LEGO Education kits.
A reference page for the rebuilt site
The style
guide.
Built from the colors, ribbons, and mascot already in the Piedmont Makers logo. Used across every page so the site reads as one publication rather than ten templates.
01 Palette
Six tokens. No more.PM Red
#E51926
Primary brand. Headers, banners, donate button.
PM Cyan
#00AEEF
Secondary brand. Section accents, link hovers, banners.
PM Purple
#92278F
Mascot color. Highlight blocks, feature callouts.
Ink
#0F1B2D
Body text and serious blocks.
Cream
#FFF6E8
Default background. Warmer than pure white.
Paper
#FFFCF6
Lighter cream. Page background.
02 Typography
Two families, four sizes.Display — Bricolage Grotesque
Build, tinker,
teach, repeat.
Subhead — Bricolage Grotesque medium
Where East Bay kids learn to make.
Body — Newsreader
Piedmont Makers is a 501(c)(3) nonprofit running youth robotics teams, a community engineering lab, a yearly school maker faire, and a monthly tech speaker series. Hands-on workshops, a full toolset, and a friendly cyan robot named Makey watching over the whole thing.
Caption — Newsreader italic small
FRC team during the 2026 regional, Mary G. Ross Engineering Lab
Type scale
- Display 72/0.95
- Heading 30/1.1
- Subhead 20/1.3
- Body paragraph 16/1.65
- Eyebrow label 12/1.4
03 Ribbon banners
The signature element.Pulled directly from the logo. Used for section headings, badges, and the donate CTA. Three brand colors, three sizes, optional flipped tail.
FIRST Robotics Maker Faire 2026 Popup Maker Space Built like a girl
← Back to grants ← All programs
Build, tinker, teach.
Founded 2014.
04 Buttons & external CTAs
Inline ribbons for primary actions.Inline buttons
External CTA cards
05 Cards & photos
Program cards and image treatments. 02
FLL Challenge
For 4th–8th graders
Build LEGO robots, run autonomous missions, and present a research project.
03
FTC
For 7th–12th graders
Design and program a competition robot using metal, custom parts, and Java.
06 The mascot
His name is Makey.
A cast member, not an icon
Makey is the cyan robot who lives in the corner of the logo. On the rebuilt site he gets to be big: featured in heros, peeking out of section corners, holding placards in the empty states. He's the most recognizable thing about the brand. Use him.
Sizing: minimum 96px tall in nav/footer, 256px+ in feature blocks, full-bleed for hero treatments.
Living document
This page is the system.
Edit src/styles/global.css and src/components/Ribbon.astro to change the system in one place. Every page on the site picks up the change automatically.