Slopless Design · reference render
Everything above this panel is the design
Design code sd1.jVQ7DoJAEL3L1mgQtaC14BYWQiCgyBgWg_H0vjcLu9sY7QgzO7_3YeJlanultKWsTJIlpij2pzQ1SDIQUS8zmIi94A9czf3CxyilUxMx2m2PKJmgoLZcidz0Ao-CuO2jrogMDxNaktOqVNLEDe-DDe1xM8M2JwIR1vla250uVAfidSnQKKuvKPgwLWTg87fAuEm5BQ-fgftS-TqlsgOoReO9WFAdCcEYQ5_TSwUmbUaROwkIJOPtOtviNagDeHC3Pyoo9D42qqf92NuRJgZ5sDKqpbBvTl04Jvmcq3QD_PZZ8mwgXmgI1yxFbuaMlzGdsvSQL5T6AAFDQW (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.