twc-018 / A study by Syafril · not client work
A small fictional practice studio whose site is its classroom board. The first screen is today’s exercise: choose version A or B, check it, and a teacher’s ✳ stamp marks a right answer. Three levels of experience run across three tracks, and a trial-class page builds the card a visitor takes along.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
The first screen is today’s exercise, not a slogan: the question is the page’s h1, with the instruction and a link to the full exercise. The three tracks hang from the board as tabs; on a phone only the active one says its name.
Versions A and B are real radios drawn as cards. A right answer is written to the practice record and gets the teacher’s ✳ stamp; the result is said in a status line, and a wrong one gets a hint, not red.
The filled plate on the signboard leads to the trial-class kit: four things to bring, a card that changes as they are ticked and a TXT note. No form, schedule, fee or personal data is sent.
#f3ce58#203c4b#23624c#f9e7abWHAT IS HERE / WHAT COMES NEXT
Try one exercise first.
This tool includes a working workspace and its own component book. Its controls operate on local state.
Exports are generated in your browser. No account, cloud storage or external service is connected.
Fictional design study. Exercises, levels and meeting counts are illustrative; there is no schedule, fee, accreditation or enrolment, and exports remain local planning artifacts.
Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.
Prepare a brief for this directionTry one exercise first. Courses and small schools are judged by what learning there feels like, so the practice board is the whole site: a signboard on top, track tabs hanging from the board, a question, two versions and a stamp.
Workshop yellow for the wall, the board’s cream, 2px slate-ink rules and a hard ink shadow; exercise drawings, the stamp and ticked items in green. A shield crest with a spark (✳, “pijar”) marks the school, the stamp and every completed exercise.
Lexend, drawn to make reading easier, sets the questions, the wordmark, the board’s headings and buttons. DM Sans reads the exercises, tabs, the programme sheet and the trial-class card. No monospace.
Every page is one board in a classroom: the school’s signboard (crest, wordmark, chapters and a filled Trial class plate), the board with tabs hanging from its top edge and a note on the right, then a ruled foot. The opening sets the question left and versions A/B right, with three ways to join below. On a phone the signboard takes two rows and the board reads question, choices, check, result.
No motion library. After a right answer the stamp lands with a short scale, only when motion is allowed and the device is not constrained; reduced motion shows it still. The trial card’s slight tilt is static.
Static bilingual Next.js pages with two validated browser drafts (practice record and trial-class kit), explicit TXT exports and independently scoped components. No account, external submission or production transaction.
Real radios and checkboxes, pressed buttons for levels and tracks, a live count on the kit and every result said in a status line (the stamp is decoration). Visible focus, 44px targets, no state shown by colour alone, reduced motion.
Free time, on purpose.