Sunrise Yellow
#FFC93C
Buttons, highlights and key shapes
Asphalt text on this yellow is 9.54 to 1. White text on it is 1.54 to 1, so the button label is Asphalt.
BeltLine Pace Run ClubDesign system
One set of colors, three text styles, and shared components. Change the source and every page follows.
Color
Asphalt
#1E2A32
Headings and body text
On Concrete, 12.87 to 1. On white, 14.66 to 1. On Mist, 10.82 to 1.
Concrete
#F2F0EB
Page backgrounds
Body text on Concrete is Asphalt.
Trail Green
#2E7D5B
Links and small accents
On white, 5.00 to 1. On Concrete, 4.39 to 1. On Mist, 3.69 to 1. On Asphalt, 2.93 to 1. Green text sits on white only.
Mist
#D9DEE2
Dividers and card backgrounds
Cards use Mist with Asphalt text. Links are not placed on Mist.
Type
Oswald Bold for headings. Open Sans Regular for body. No other fonts. Body copy stays at 18px. Nothing on the site is under 16px.
Heading
Show up. We will pace you.
Subheading
Four pace groups
Body
BeltLine Pace Run Club is a free, volunteer run club in Atlanta. It meets near the BeltLine in Old Fourth Ward, and every run ends with coffee.
Components
Navigation bar
The bar at the top of this page is the shared component. Join a Run stays visible when the menu is closed, including on a phone.
- Home
- Weekly runs
- Join
- Partners
- Gear
Button
Primary is Sunrise Yellow with Asphalt text. That pair is 9.54 to 1. The packet asked for white text, which is 1.54 to 1, so it was logged and not used.
Join a RunSee this weekPartners
Run row
Tuesday
6:30 PM
Social Run · 3 miles
Starts at Bean Counter Coffee
Pace card
01
Walk
Every run has a walk group.
Package card
Pacer
$150
Logo on the website
Client update path
Facts live in lib/content.ts. The button classes live in components/Button.tsx. Colors live in app/globals.css as variables. Set clientUpdate.active when the mid-build note arrives, and write the message there. Do not invent an update before it shows up.
Live edit
These swatches change the shared Sunrise color. Buttons and markers on every page follow it. The label stays Asphalt so the 4.5 to 1 rule holds. White text is not offered.
Current shared color: #FFC93C
Join a RunMarker
Open Home or Weekly runs after a change. The same color is already there.