marathon-tile.png
Marathon
Sunday at 7:00 AM
26.2
miles
1,513 spots remaining
CR
Cowtown Run Club
Module library
The color, type, and page modules proposed for the new Cowtown Marathon site.
-
Register
Get a runner from interest to signed up in as few taps as possible.
-
Watch
Fitness videos and tutorials that are easy to browse and filter.
-
Train
Plans that adjust to the race, the goal, and the week you’re in.
-
Connect
Group runs, runner stories, and ways to volunteer or cheer.
All content here is sample. Dates, prices, and counts are placeholders, and imagery is illustrative artwork standing in for race photography. The longhorn mark is a stand-in for the official logo.
Foundations
A small, disciplined kit. Soft pastel surfaces carry the content, one bright yellow marks every action, and heavy type does the talking.
Color
Pastels separate neighboring tiles, so no two touching tiles share a tint. Ink handles text and dark tiles.
Ink text 12.4:1
Sun yellow#FFD21FEvery call to action, plus selected states and the numbers that matter most.
Ink#16161D
Text, dark tiles, and primary buttons.
Body#F7F7F7
The page background. Cards and buttons sit on it in white.
Slate#5B5E6A
Secondary text, captions, and supporting details.
Lime#DCF3A2
Surface tint for training and fitness content.
Lavender#DDC6F3
Surface tint for community and tags.
Sky#BCD8EE
Surface tint for course and race information.
Sand#EFDCC6
Surface tint for stories and quotes.
Typography
Archivo carries the personality, stretched wide for headlines and squeezed narrow for the big mileage numbers. Inter keeps reading comfortable.
26.2
Run Fort Worth
Race weekend
Course and elevation
Half marathon
Pick your distance, choose a plan, and we’ll get you to the start line ready.
Body text stays under 60 characters a line and never dips below 16px, so long guides and race-week instructions stay easy to read on a phone.
Small text is for supporting details like start times and price notes.
Shape, space, and grid
Bigger surfaces get bigger corners. Spacing runs on a 4px base, and every layout sits on one 12-column grid.
Corner radius
Larger surface, larger corner.
- 40Frames and footers
- 32Bento tiles and cards
- 20Media and inner panels
- 14Small thumbnails
- PillButtons, chips, and badges
Spacing scale
Pixels. Sections use 128, modules 112.
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 48
- 64
- 96
- 128
Layout grid
12 columns, 20px gutters, 1240px maximum, 32px page margin.
Below 900px tiles stack into a single column. Below 600px the page margin drops to 20px.
Core components
Every control is at least 40px tall, and primary actions are 52px or more so they’re easy to tap.
Buttons
Yellow registers. Ink is the main action everywhere else.
Chips and badges
Chips filter and select. Badges report status.
Filter chips
Tags
BeginnerStrengthCourseStories
Status badges
OpenFilling fastOpens Nov 1Sold out
Form fields
Labels sit above fields, and focus is always visible.
Email me race updatesText me on race day
Progress and toggles
Capacity meters make “filling fast” feel real. The bar shows how many spots are left.
Banners
Most pages open with a large photo. These templates hold the space, keep the text readable over any image, and crop cleanly on a phone.
Home banner
The tallest banner, for the homepage and race weekend pages. The headline and actions sit bottom-left over a soft scrim, and the four distances stay one tap away.
Interior banner
For Train, Watch, Community and Race info. Shorter than the home banner, with a breadcrumb, a title, and one sentence of context.
Split banner
When the message needs more room than a photo can give it, the text moves onto a tint and the photo sits beside it.
Register
The homepage’s first job: get someone to their distance, show them how full it is, and put a registration button within reach.
Registration hero
Six distances as a bento, each showing how many spots remain, with its own yellow button. Numerals are the hero, and the marathon tile holds a photo behind them.
Run Fort Worth
Six distances, one race weekend, and a finish line waiting for you.
158days until race weekendFilling fast
Half marathon
Sunday at 7:00 AM
13.1
miles
895 spots remaining
10K road race
Saturday at 7:00 AM
10K
6.2 miles
Ultra Marathon
Sunday at 7:00 AM
50K
31 miles
Adult 5K
Saturday at 7:00 AM
5K
3.1 miles
Kids 5K
Saturday at 9:45 AM
5K
3.1 miles
Race tiles
For the races page and filtered lists. Same actions everywhere: Register first, details second, price always visible.
race-card-50k-ultra.png
race-card-marathon.png
race-card-half-marathon.png
race-card-10k.png
race-card-adult-5k.png
race-card-kids-5k.png
Race list rows
The same six distances as the tiles above, in a compact list for results pages and filtered views.
Every distance
The same six races as the tiles above, plus a virtual option for runners going another way.
Ultra Marathon
31 miles, an out-and-back extension of the marathon course. 10-hour time limit.
Marathon
26.2 miles through Fort Worth, starting and finishing at Will Rogers Memorial Center.
Half marathon
13.1 miles from the Cultural District to the river.
10K
6.2 miles along the Trinity River.
Adult 5K
3.1 miles, flat and fast.
Kids 5K
Discounted for ages 12 and under with an adult 5K entry.
Virtual runs
Every distance, on your own route and your own schedule.
Pricing timeline
Shows the price steps in order, so the reason to register today is clear without a countdown banner.
Marathon pricing
Prices go up on each date and never come back down.
On now
Early rate
Through Oct 31
$85
Lowest price of the year
Next
Standard
Nov 1 to Jan 15
$105
Adds $20
Later
Late
Jan 16 to Feb 19
$125
Adds $20
Last chance
Race week
Feb 20 to Feb 25
$145
If spots remain
Race day
Everything runners look up in the final weeks: how long is left, what the day looks like, where the course goes, and why the race is worth the trip.
Countdown and race details
A live countdown paired with the facts people ask about most. Both are editable fields, not images.
countdown-tile.png
Time until race weekend
Sunday, February 28, 2027 at 7:00 AM Central
158
Days00
Hours00
Minutes00
SecondsRace day at a glance
- Marathon and half start
- 7:00 AM
- Predicted temp
- 43–61°F
- Start and finish
- Will Rogers
Memorial Center - Packet pickup
- Fri and Sat
Course map and elevation
Pick a distance to redraw the route, then hover the elevation profile. Elevation gain is calculated from the profile itself.
Loading map…
Marathon
26.2 miles through Fort Worth
- Elevation gain
- 0 ft
- Highest point
- 0 ft
- Water stops
- 0
- Time limit
- 0
Elevation profile
Each bar is a tenth of a mile. Hover, tap or use the arrow keys.
Reading elevation from Mapbox terrain…
By the numbers
Big figures with a single takeaway each. The chart tile takes its data from a simple field per year.
More finishers than last year
+9.4%
Finishers by year
All distances, in thousands
States represented
46
Runners came from every corner of the country.
Watch
Training videos and tutorials for every level, built to be browsed, filtered, and watched on a phone.
Featured video and playlist
One big video with a short playlist beside it. Each video is a post type with a category, coach, level, and length.
Video library with filters
Filter by category without leaving the page. Filtering is instant, and the count always says what’s showing.
video-first-ten-weeks.png
Training plans18 minYour first ten weeks: building a base
Coach Marisol Reyes, Beginner
video-run-tall.png
Form and technique9 minRun tall: posture and cadence
Coach Dan Whitfield, All levels
video-runners-strength.png
Strength30 minRunner’s strength in 30 minutes
Coach Priya Nair, Intermediate
video-hips-calves-hamstrings.png
Mobility12 minHips, calves, and hamstrings
Coach Marisol Reyes, All levels
video-week-before-the-race.png
Race week14 minThe week before the race
Coach Dan Whitfield, All levels
video-fueling-long-runs.png
Nutrition11 minFueling your long runs
Coach Priya Nair, Beginner
No videos in this category yet. Try another category or view all videos.
Train
Training is how runners stay on the site for months, not minutes. These modules turn “I want to run a marathon” into a plan and a first workout.
Training plan builder
Change any setting and the plan redraws: length, weekly mileage, and the first week’s schedule. Try switching the race.
16-week marathon plan
Four runs a week, peaking at 38 miles.
16
Weeks
412
Total miles
38
Peak week
Starts
Mon, Sep 28
Ends
Sun, Jan 17
Race day
Sun, Feb 28
Week 1Week 8Race week
Week 1 schedule
Workout detail
What a single workout page looks like: the essentials up top, one clear button, and the full circuit beside it.
The circuit
Three rounds, 45 seconds on and 15 seconds off. Rest for a minute between rounds.
Split squat
Each legSingle-leg glute bridge
Each legKettlebell deadlift
Both legsSide plank with reach
Each sideBanded lateral walk
Both directions
Stories
Articles are the long game: search traffic, trust, and a reason to come back between race weekends. The layouts favor reading over decoration.
Editorial bento
A featured story, a guide with related links, a video, and a topic cloud. Content decides which tile is largest.
editorial-feature.png
GearFeb 22Sponsored
What to wear for a cool February race in Fort Worth
Ready, set, go: how to start running and stick with it
Walk-run intervals, the right shoes, and the first three weeks in plain language.
story-lazy-days.png · transparent PNG
MindsetFeb 12
Getting out the door on the lazy days
5 min video
Easy days and hard days, explained
NutritionGearBeginnersRecoveryStrengthRace day
Article layout
Reading comes first: a comfortable 680px measure, generous line height, and a pull quote to break up long pieces.
TrainingMarathon
How to pace your first marathon
article-image.png
Most first-time marathoners go out too fast. The first five miles feel easy, the crowd is loud, and your legs are fresh, so it’s tempting to bank a little time. Resist it.
Aim to run the first half a touch slower than the second. A calm early effort keeps energy in reserve for the stretch where the race really begins.
Start with a plan for the first 10K
The opening miles set the tone for everything after. Give yourself a simple set of rules and let the rest of the race come to you.
- Run the first two miles at least 20 seconds per mile slower than goal pace.
- Take water at every station, even when you don’t feel thirsty yet.
- Check in with your breathing at each mile marker.
Coach Dan WhitfieldThe first half of a marathon is a promise. The second half is how you keep it.
By the time you reach the halfway point, you should feel like you’ve barely started. That’s exactly the point.
Community
Runners come for a race and stay for the people. These modules make it easy to find a group, hear from other runners, and get involved.
Group runs
Weekly and monthly runs that anyone can join. Pace groups and RSVP are right on the card.
group-run-saturday-long-run.png
Every SaturdayTrinity Trails
group-run-thursday-speed-night.png
Every ThursdayTCU track
group-run-sunday-social-5k.png
First SundayCowtown HQ
Runner stories and rating
One story told in full, next to a single trust signal. Rotates through featured runner posts.
I signed up for the 5K on a dare. A year later I crossed the marathon finish line with my sister, and I’ve never felt prouder.
Average runner rating
4.9
From 25,000+ runners
Ways to get involved
For everyone who wants to be part of race weekend without running it.
Call to action banner
A friendly closing prompt for the bottom of long pages. Photo cards tilt in around the message on wide screens and step aside on phones.
cta-tile-1.png
cta-tile-2.png
cta-tile-3.png
cta-tile-4.png
Ready to start your running journey?
Pick a distance today and join thousands of runners heading for the same finish line.
Partner logos
Logos sit in a quiet grid so partners are visible without competing with the registration buttons.
- Presenting partner
- Partner logo
- Partner logo
- Partner logo
- Partner logo
- Partner logo
- Partner logo
Run clubs
Fort Worth has a lot of independent run clubs, and most of them only live on Instagram and Facebook. Cowtown gives each one a real page: their info, their socials, their own calendar, all findable from one place.
Club directory
Every partner club in one grid. Each card links to that club’s own page.
Ampersand Running Club
Social runs on the Trinity Trails with DJ sets, local food, and ice plunges after.
River District Run Crew
Trail-first runners who treat the Trinity levee like a second home.
Club page
One template every club gets, whether they have 40 members or 400. Ampersand Running Club, based in Fort Worth, is the example here.
About Ampersand
Ampersand brings the Fort Worth fitness scene together with consistent, community-focused social runs. The group meets three times a week (Monday and Thursday evenings, and Saturday mornings) on the Trinity Trails, with workouts ranging from three to six miles for runners of every level. Runs often turn into something bigger, with live DJ sets, product demos from local brands, and post-run gatherings with food and recovery extras like ice plunges.
Latest updates
Posted by the Cowtown team from Ampersand's socials
Saturday's ice plunge sold out in under an hour. We'll have more slots next week, first come, first served.
Thursday night's DJ set was a good one. Same lineup is back this week, plus a food truck at the finish.
Added a river overlook stretch to the Monday route. Extra half mile, worth every step.
Huge turnout for product demo night. Thanks to everyone who came out and tried the new shoes.
Follow along
Ampersand doesn't have its own site. Their Instagram is where every route and update goes out first.
Club facts
- MeetsMon & Thu 7:30 PM, Sat 7:00 AM
- Start pointTrinity Trails
- Typical distance3–6 miles
- PaceAll paces welcome
- Members210
Upcoming events
See on the full calendarHow it fits together
One club entry, shown in three places.
Club page
What runners find
- About, socials, and meetup facts in one place
- Updates posted on the club’s behalf, pulled from their own captions
- No website to maintain on their end
Main calendar
Where their runs show up too
- Every club run appears as its own event type
- Filterable alongside races and Cowtown’s own group runs
- Each event links back to the club’s page
Directory
How runners find a club
- One grid, sorted by neighborhood
- New clubs are just a new entry, no extra setup
- Cowtown approves and onboards each one
Events
The Cowtown runs sub-races, weekly group runs, fitness classes and community events all year. The calendar makes every one of them easy to find, filter and add to a phone.
Year at a glance
Twelve months on one strip, with a dot for each kind of event. Tap a month to open it in the calendar below.
Event calendar
Switch between a month grid and a list, filter by kind of event, and pick any day to see what’s happening. Weekly runs repeat on their own.
0 events
Event page
One template for every event: when, where, how much, and one clear yellow button. Runners can add it to a phone calendar right there.
event-trinity-trails-10k.png · 1600 × 1000
About this race
A flat, fast 10K along the Trinity River, made for first-timers and personal bests alike. Water stops every two miles, a post-race taco truck, and finishing times posted within the hour.
- Chip timing and a finisher medal
- A soft tech tee for everyone who registers by October 1
- Stroller-friendly course, walkers welcome
- Free parking at the Trinity Trails lot
How events work
The team enters each event once. The site does the rest.
One entry
What editors fill in
- Title, date, time, place and kind of event
- Distance, price and registration link
- A photo and a short description
Repeats
For weekly and monthly runs
- Set a rule once, like every Thursday
- Skip a date for holidays or race days
- Every occurrence gets its own page
Everywhere
Where events show up
- The calendar, the homepage and the race pages
- A subscribable feed for Google, Apple and Outlook
- Search results and share cards
Shop
Race apparel and finisher gear, sold through Shopify and styled like the rest of the site. Runners browse here, and checkout happens on Shopify’s secure page.
Shop the race
Collection tiles for the shop landing page. Each one pulls its name, count and photo from a Shopify collection.
Product grid
Filter by category and sort without leaving the page. The plus button adds a product to the cart in one tap.
Nothing here yet. Try another category.
Product page
Choose a color and size, then add to cart. Sold-out sizes stay visible but can’t be picked, so runners know to check back.
product-race-tee-front.png · 1200 × 1500New
Cowtown 2027 Race Tee
Soft, light and made to move. A tri-blend tee with a relaxed fit, printed with the 2027 course art.
Color Lime
Size M
Size guide- Free shipping on orders over $75
- Pick up free at packet pickup
Fit and sizing
Relaxed unisex fit. If you’re between sizes, size down for a closer fit. The model is 5′10″ and wears a medium.
Fabric and care
50% recycled polyester, 25% cotton, 25% rayon. Machine wash cold and hang dry.
Shipping and returns
Ships in 3 to 5 business days. Unworn items can be returned within 30 days.
Cart
A slide-in drawer on desktop and a full page on phones. It shows how close a runner is to free shipping, then hands off to Shopify to check out.
Keep it moving
Add something from the product grid or the product page and watch this cart update. The header count changes too.
- A free-shipping meter nudges people toward a bigger order
- Quantity and remove controls stay on the line item
- The yellow button opens Shopify’s secure checkout
Registration add-ons
Offer merch at the moment runners are most excited: right after they pick a distance. Add-ons ride along with the registration order.
Finish the look
Runners are already reaching for a card. Two taps gets a shirt or a race belt into the same order.
Marathon registration
Sunday, February 28, 2027
Total$85
How it fits together
Shopify runs the store. WordPress shows it, in the same design as every other page.
Products
From Shopify
- Names, prices, photos and variants stay in Shopify
- Stock changes show up here without editing a page
- Collections become the filter chips
Cart
On this site
- The cart lives in the header and the drawer
- It remembers a runner between visits
- Registration add-ons join the same order
Checkout
On Shopify
- Payment, tax and shipping run on Shopify’s secure page
- Orders and returns stay in the Shopify admin
- The checkout is branded to match the site
Mobile video
Most runners will watch on a phone, so video is vertical first: short clips that feel like stories, with the coach, the length and the view count always in view.
Vertical video cards
One 9:16 card for fitness clips and runner stories. The frame, the creator row and the view count never change, so a mixed feed still reads as one product.
Story viewer
Tap right for the next clip, left to go back, or pause with the button. Try it with a community group run.
Watch in sequence
A group run recap arrives as a short series. Runners move through it with one thumb, and every clip stays under a minute.
- Segments at the top show how many clips are left, and any one can be tapped to jump there
- Tap the right half to skip, the left half to go back
- Clips are muted until the runner turns sound on
Info
Answer the questions before they become emails, then close every page with one calm footer.
FAQ
Native accordions, so answers stay searchable and work without scripts. Sample answers only.
Race questions
Can’t find your answer here? The race office replies within one business day.
Contact the race officeCan I switch distances after I register?
Yes. You can move to a different distance from your registration account until the transfer deadline. Any price difference is charged or refunded automatically.
Is there a time limit?
Every distance has a time limit, listed on its race page. Course support closes on that schedule.
Can I walk the 5K or 10K?
Yes. Walkers are welcome in both, and everyone who finishes within the time limit gets an official time.
Where do I pick up my race packet?
Packet pickup is at the race expo on the two days before race day. Bring a photo ID and your confirmation email.
Can I run virtually?
Yes. Every distance has a virtual option you can run anywhere, on any day in the race window.
Footer
Full width like the header. Newsletter signup, four link groups, and a giant wordmark that fades out at the bottom of every page.
What changes at each breakpoint
Three breakpoints cover every screen. Nothing hides content, it only re-stacks.
1240 and up
Full bento
- 12-column grid, 32px page margin
- Registration bento fills two rows
- Mega menu shows four distances and a guide
Under 900
Tablet and small laptop
- Tiles stack, pairs stay side by side
- Pill nav becomes a menu button (from 1120px)
- Two-column lists become one
Under 600
Phone
- 20px page margin, 80px section spacing
- One column, full-width buttons
- Every tap target is 40px or taller