Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jVTLDoIwEPyXnsEg6oGrB_7CgxgMKLJJwaB-vTPb2vZi9EbY7exjZoeJx7kbVNITz8pkZWbqerMvCoMkgyMaZIESMRf8gaO5X_iw0rhrIkfr1Q6QGQC1ZEC9QPzt0xuEX0wsSU3rpVImrvkQPNMe8wW2OZOIOM5XbLe6iA7G20Zwo0T_sBDCtJCRvvMSGDcl5_kIGdgvL1-7VHWAtaS9BwHVkRBMOQw5g5ygpNyK3ChAMJlO108dXkM6oAd7-wNBqQ8xq572Y24nmpTkcRKrlsK6Fe_CKSmuVfoRfntvuDYILxaEazYiV3PAy1ROZbGtvKTe-SKR (Athletic Sport), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth. Every section root carries data-pattern with its pattern id.
Viewport
Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.
Pages
Tokens at a glance
- Palette
- complementary, light · bg #FAFAFA · text #1F1F1F · accent #FF3B00
- Type
- Barlow Condensed / Barlow · scale 1.5, base 17px
- Grid
- 12 columns, gutter 16px, max 1400px · section space 104px
- Shape
- radius 0px · border thick 4px · shadow none · motion expressive
Sections on the home page (/), top to bottom
Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.
nav.athletic-stripe-bar Stripe bar · nav, on every pageBoxed wordmark in 1–3, italic uppercase links in 4–9, a primary button in 10–12, closed by a 4 px stripe and a 1 px stripe.hero.athletic-jersey-number Jersey number · heroA giant italic number (step 8, link colour) in 10–12 overlaps the top-right corner of a tall 4:5 athlete photo in 8–12; the uppercase italic headline at step 5 fills 1–7 tilted −6°; three slanted stripes in 1–4; subhead and two buttons under it.stats.athletic-scoreboard Scoreboard · statsA full-bleed accent2 band: italic title across the grid, then three or four giant italic figures (step 7) in a four-column row, each behind a 4 px left rule, with an uppercase label pinned to the bottom of its column.features.athletic-training-zones Training zones · featuresDisplay title in 1–8, a line in 9–12; then three to five full-width zone rows on the surface colour: a giant italic number in 1–2, a slanted stripe in 3, title 4–7, text 8–12.gallery.athletic-action-strip Action strip · galleryItalic title and an arrow link on one row; four to eight duotone 3:4 action shots in a horizontal carousel, each with an italic caps caption and a small meta line.list.athletic-fixture-list Fixture list · listTitle and a 'full schedule' link on one row; four to eight fixtures as ruled rows: mono date 1–2, italic uppercase match title 3–7, venue 8–10, a small ticket button 11–12.testimonial.athletic-locker-room Locker-room quote · testimonialThe quote in italic caps at step 5 across 2–11, the athlete's name behind a short accent bar in 2–7, and their jersey number giant in the link colour in 10–12.cta.athletic-finish-line Finish line · ctaA full-bleed accent band: three slanted onAccent stripes in 1–4, the headline at step 7 tilted −4° in 1–8, the line and a secondary button in 9–12.footer.athletic-final-whistle Final whistle · footer, on every pageAn 8 px stripe, stacked links in 1–4, address in 5–8, legal in 9–12, then the club name in italic caps at step 8 across the full grid.
More
To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.