This page is a visual board for the real Hanzify components. Use it to compare badges, HSK chips, dashboard cards, buttons, panels, and supporting UI while you design and tune the website.
Badge-only reference rows for learner rank and subscription state, using the same visual language as the profile area near the avatar.
One line, one badge, so you can judge spacing, color, and wording cleanly.
Subscription state reference badges for account and billing surfaces.
These map the page to the dominant HSK band. Higher bands are promoted when they cover at least 20% of the page.
Fallback level if no higher band reaches 20% of the page.
Assigned when HSK 3-4 words are at least 20% of the page.
Assigned when HSK 5-6 words are at least 20% of the page.
Assigned when HSK 7-9 words are at least 20% of the page.
These labels come from the page comprehension percentage in the reading analysis logic.
Almost everything is unfamiliar, so the page will feel unreadable.
You can pick out isolated words, but not enough to follow full meaning yet.
Repeated structures begin to stand out, even though much of the page is still new.
You can follow parts of the page, but reading still takes sustained work.
This is challenging but manageable, with enough context to keep pushing through.
You can read with a good sense of flow and only occasional interruptions.
Most of the page reads naturally, with minimal lookup or friction.
Reference for the informative feedback blocks inside the floating popup after reading analysis.
This area shows the HSK badges by themselves first, then the broader HSK card and progress system used across the website.
One line, one HSK badge, matching the chip system used in the starter selector.
Starter HSK selection chips and starter options for quick visual reference.
Live-reading style preview with pinyin above the word and the same underline-style HSK highlighting used on page.
These are the smaller UI pieces that show up repeatedly across the website and dashboard surfaces.
Primary and secondary action patterns, plus small tags used across cards and supporting content.
Light informational card for explanatory text, product notes, and supporting detail beside darker feature surfaces.
Reference card with the same rounded surface language used for resources, support content, and secondary product explanations.
These examples let you compare the darker feature surface against lighter informational cards in the same page.
Context-aware help without breaking the reading rhythm.
See level spread, density, and page feel before you commit to the read.
Capture words from the web and feed them back into review.
These are the home-page legend chips used in the feature grid.