Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jZTBDoIwEET_pWcwiHrg6oG_8GCNBhTZpGAwfr0zW2gbL3IjdLvbnX07DDyPTadID1wrk5WZqevdsSgMggyWqJMJJKIv-ANb87_w4cT6beKMtpsDUmZIqCUX-InuLEcsRJJ1PwmHf3I4vNEU8wlmOVL-2MRPRi9TzInpXq1gH5lzUTwc0y56esxHYNLEa9Y-REBLbrm-TUnAhJJHvZlQ3QeH6bxCTCcXUJM7kSdhw9TSntqhwW1gglFAoxUZdMzhzKl__enbA5IOtB_EecVQt-IOeGpCzF3aHt76spQNkMWCcEgr8jAn3EzRKYt9NePzBQGKdY (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.