Back to demoTHIS THEME’S OWN COMPONENT BOOKID

Pijar Academy / DESIGN & COMPONENTS

Pijar Academy
Made of its own parts.

Try 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.

01 / Palette & type

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.

Ground#f3ce58
Ink#203c4b
Signal#23624c
Supporting surface#f9e7ab

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.

02 / Composition & behavior

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.

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.

03 / Controls, including the edges

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.

Component inventory (scroll to inspect)

  1. 01
    Today’s exercise on the first screen: two versions, a checked answer and a ✳ stamp

    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.

  2. 02
    Three levels of experience across three tracks, with a learning-plan download

    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.

  3. 03
    Trial-class kit: a four-item checklist, a card that changes with it and a TXT note

    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.

  4. 04
    Practice record with browser-local reflections

    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.

  5. 05
    Own component and state book

    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.

  6. 06
    Local brand personalization

    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.

  7. 07
    Select, tooltip & scroll area

    Keyboard behavior is shared; this theme owns the popup colors, border, radius, type and focus.

  8. 08
    Export & limits

    Fictional design study. Exercises, levels and meeting counts are illustrative; there is no schedule, fee, accreditation or enrolment, and exports remain local planning artifacts.

READ THE DESIGN

Why it is arranged this way.

The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.

Actual desktop capture of the Pijar Academy demonstration.123
Actual website capture. Follow the numbered notes.
  1. 01

    The question is the headline

    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.

  2. 02

    Two versions, one stamp

    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.

  3. 03

    A trial class, not enrolment

    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.

04 / Form & feedback contract

A local preparation note. Try an empty submission, correct it, then export your actual input.

10–1,000 characters. Kept in this page.

Your prepared note will appear here.

05 / Actual working components

Activate the full workspace when you want to inspect it. Its interaction code loads on demand.