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 about page (/about), 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.testimonial.athletic-locker-room Locker-room quote · testimonialThe quote in italic caps at step 5 across 1–9, the athlete's name behind a short accent bar under it in 1–7, and their jersey number giant in the link colour in 10–12, bottom-aligned.team.athletic-roster Roster · teamItalic title, then four to twelve players four per row: a duotone 3:4 portrait, then name (italic caps) and squad number (step 4, link colour) on one baseline, and a mono position.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.logos.athletic-sponsor-band Sponsor band · logosA mono label, then sponsor names as a marquee in italic caps between a 4 px and a 1 px stripe.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.