Ustaxona: the workshop system.
A drafting table, not a SaaS landing page. Eight colours, three typefaces, 1px rules, zero radius, no shadows. This page is the living spec — and part of the portfolio.
Eight tokens, one accent.
Use: page background
Use: alternate sections, stripes
Use: text, buttons, 1px rules
Use: secondary text, captions
Use: grid lines, dividers, card borders
Use: the single accent
Use: accent tint, badges
Use: screenshots / data-viz only
Three typefaces, three scripts.
Every face must render the Uzbek modifier letter ʻ (U+02BB), Cyrillic and Latin. The test string runs at every weight.
Oʻzbekiston, gʻoya, eʼlon
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
Oʻzbekiston, gʻoya, eʼlon — Ўзбекистон — Uzbekistan 0123456789
3 h → 1 min · 4,000 · 08:00 · $1,500
The kit, assembled.
What we built
1px rule border → anor + 2px lift.
- 0101
Audit
30 min.
- 0202
Pilot
30 days.
- 0303
Scale
Retainer.
Figure placeholder — honest frame, no fake screenshots
Faq — native <details>
Zero JS. 1px rules.
Four rules of movement.
- 01
Scroll reveals ≤ 300 ms, easing cubic-bezier(.2,.8,.2,1) — cards and metrics only, never body copy.
- 02
Metrics count up once, in mono, when they enter the viewport.
- 03
The hero grid draws itself on load; the promise line rotates uz → ru → en.
- 04
prefers-reduced-motion disables all of it. No cursor followers, no parallax, no marquees.
duration ≤ 300ms · ease cubic-bezier(.2,.8,.2,1) · var(--ease-workshop)
Anti-AI-slop, run before every page ships.
No default fonts; type carries the brand.
No purple/blue gradients, glass cards, sparkle icons or emoji bullets.
No bento grid of feature icons — features are numbered claims with proof.
Copy is specific, in our voice, with numbers.
Every screenshot is a real product; every logo is a real client (or none).
The hero headline is a promise a client would repeat.
How this site is made.
- Type
- Piazzolla · Golos Text · JetBrains Mono (self-hosted, subset)
- Stack
- Next.js 16 · Tailwind v4 · next-intl · Supabase · Vercel
- Languages
- uz-Latn · ru · en — shared slugs, hreflang everywhere
- Grid
- 12 columns · 1px rules · zero radius · no shadows
Performance budget: LCP under 2.0 s on 4G mobile, INP under 200 ms — targets until measured on the live domain.