The brand,
built like a product.
One System is the identity this site runs on: foundation, logo, type, color, layout, motion, and access, in one place. It is a working reference and a case study of the thinking behind it. Core token values render from the live CSS, so the numbers below are the real ones; the usage guidance and examples are maintained alongside them.
Foundation / the spine
Creative built like a system and accountable to what it does after it ships. The breadth is the proof of the idea, not a separate selling point.
Logo / the loop
One continuous stroke that closes on the orange node: the system, end to end, as a mark. Default to the primary lockup. The wordmark carries the circular period; the lockups don't.
Type / three faces, one system
Each face has one job. Clash Display is the voice: display, h1, h2. Clash Grotesk is reading type: sub-headings and body. JetBrains Mono is the system layer: labels, data, and code. All three ship as one variable file per family, so every weight below is real rather than the nearest available one.
Tracking is optical, not decorative. It tightens as type gets bigger, sits at zero for reading, and opens up for uppercase mono. Mono labels and emphasis are always uppercase, because heavy tracking is an uppercase device and breaks apart on lowercase; sentence-case mono is the data tier at +5% instead.
| tier | face | wt | track | where | sample |
|---|---|---|---|---|---|
| display | Clash Display | 700 | -2% | every page head, closing CTA, stat figures | One system. |
| h1 | Clash Display | 600 | -1% | the wordmark lockup | Pratik Mehta |
| h2 | Clash Display | 500 | -1% | section heads, journal lead post, mobile nav | Engineer turned creative. |
| h3-h6 | Clash Grotesk | 500 | 0% | card titles, index rows, sub-heads | SPORTIME Clubs |
| body | Clash Grotesk | 400 | 0% | copy / lh 1.65 / strong = 600 | The work stays coherent and the loop closes. |
| label | JetBrains Mono | 400 | +10% | kickers, badges, section labels / always uppercase | Brand / Social / Performance |
| data / nav | JetBrains Mono | 400 | +5% | rail nav, scoreboard values, the clock / sentence case | Home / 2023-2024 / 12:53 PM |
| emphasis | JetBrains Mono | 600 | +10% | buttons / always uppercase | View work |
A tier says which face. A step says how big. Every size on the site is one of these, so a rule never writes a pixel value. The steps sit where the design already clustered rather than on a ratio, which is why they crowd at the small end: most of the system is labels and captions.
--fs-fluid-* for type that scales with the viewport. Container-query sizing stays per-component.Color / warm monochrome, one accent
A warm neutral ramp from paper to ink, a single signal-orange accent, and a restrained state set. Both light and dark are first-class.
FBFAF6
F4F2EB
EAE7DE
DBD8CD
C6C2B5
A6A294
847F72
6E6A5D
615D52
46433B
2B2924
171713
0B0B0A
FFEDE6
FFD6C6
FFB89F
FF8F66
FF7038
FF5A1F
E8480F
C13A0A
8F2B08
5C1C06
Layout / a 4px base
Everything measures from a 4px unit. Layout is a 12-column grid, max-width 1200, 24 gutters, 64 margins. Radius base is 8px; the mono system layer uses sharp 0 corners.
Motion / functional, not decorative
Quick and confident. One ease-out curve, five durations, short travel, no bounce. Reels inherit this: cuts over fades, snap transitions.
Colour contrast / checked against WCAG AA
The single orange signal can't sit on top of itself. Three rules carry most of it.
| Pair | Ratio | Verdict |
|---|---|---|
| Ink on paper | 17.6:1 | AAA |
| Secondary #615D52 on paper | 5.9:1 | AA |
| Accent-700 text on paper | 4.8:1 | AA |
| Ink on orange fill | 6.3:1 | AA |
| Paper on ink (dark) | 17.6:1 | AAA |
Formats / the brand, in format
How the system shows up as social posts, reel frames, and a lower-third. Placeholder content at true export dimensions, rendered live so the mockups re-theme with the page.
end to end.
headline goes
right here.
not
briefed.
caption line
build.
@pratikm96
Voice / source: System Master
Direct, specific, natural, not over-polished, not obviously AI-written. Lead with the answer. No inflated claims, no buzzwords, no unsupported proof. No em or en dashes.
- Lead with the answer
- Name real numbers, verified
- Plain, confident sentences
- Label concept work clearly
- Inflate or overclaim
- Reach for buzzwords
- Over-polish into AI-speak
- Imply concepts are client work
Open to creative or marketing roles