★★★★★
My daughter looks forward to every lesson. Classes feel like play, not homework.
👩
Sarah
Parent of Mia, age 7
Reusable website components
Trường Quốc tếPalFish Singapore
A compact native Bricks library covering all 15 reference groups, reusable properties, responsive behavior, and governance.
15
Reference groups
8
Bricks Components
44px
Minimum target
0
Code elements
Typography foundation
Typography hierarchy
Every sample below inherits from the sitewide PalFish Base Theme Style: Linotte for headings, Inter for body content.
H1 — Learning without limits.
H2 — Build confident young speakers.
H3 — Explore every learning path.
H4 — A clear section heading.
H5 — A compact card heading.
H6 — A small semantic heading.
Body & inline text
Display paragraph — English learning that feels like play.
Introductory paragraph text establishes context while remaining part of the shared body typography.
Paragraph text uses Inter and the body scale from Theme Style. It can include strong emphasis, italic emphasis, an inline link, small supporting text, highlighted text, and inline code.
Lists & hierarchy
Lists inherit the body typography from Theme Style.
- Unordered list item
- Second item
- Nested list item
- Another nested item
- Final list item
- First ordered step
- Second ordered step
- Third ordered step
- Definition term
- A short explanation for the term.
Quote & citation
Children learn best when curiosity, encouragement, and meaningful practice come together.
Caption and supporting-note text remain part of the body typography system.
1. Navigation Components
Navigation Components
Header, navigation, account access, and responsive menu patterns.
🐟 PalFish
Courses
Teachers
Pricing
Resources
About
Usage
Use one shared header pattern and keep the primary action easy to find.
Variants
Default
Transparent
Logged In
Sticky
2. Section Heading & Badge System
Section Heading & Badge System
Reusable hierarchy and semantic labels for every landing-page section.
Learn your way
English learning that feels like play.
Short lessons, engaging stories, and real teachers build confidence naturally.
Why PalFish
A better learning rhythm.
Use the centered idea only when the section content is symmetrical.
Most Popular
Available
New Course
Live Class
Parent Favorite
Age 6–8
3. Course Cards
Course Cards
Shared discovery cards for courses, search, and recommendations.
🎧
Speaking
Speak & Listen
Build speaking confidence through games and live practice.
📖
Reading
Read & Discover
Explore stories that strengthen vocabulary and comprehension.
👑
Writing
Write & Shine
Structure sentences, express ideas, and build creative confidence.
🔤
Phonics
Phonics Adventure
Connect letters and sounds through playful activities.
4. Teacher Cards
Teacher Cards
A standard teacher profile pattern for listings and recommendations.
👩
Teacher Emily
Native English Teacher
★ 4.9
Ages 5–8
Online
👩
Teacher Anna
Phonics Specialist
★ 4.8
Phonics
Online
👩
Teacher Sophia
Reading Coach
★ 5.0
Reading
Online
👩
Teacher Mia
Speaking Coach
★ 4.9
Speaking
Online
5. Feature / Benefit Cards
Feature / Benefit Cards
Flexible blocks for pedagogy, product benefits, and landing pages.
🎮
Learning Through Play
Games and stories keep children engaged while practicing essential skills.
👩🏫
Real Teacher Support
Live teachers provide feedback, encouragement, and speaking practice.
📈
Visible Progress
Parents can see milestones, completed lessons, and progress over time.
6. Stats & Progress
Stats & Progress
Trust signals and parent-facing learning progress using one clear scale.
1M+
Young learners
4.9/5
Parent rating
30+
Learning topics
24/7
Learning access
Learning progress
Speaking
82%
Reading
68%
Vocabulary
76%
7. Tabs & Filters
Tabs & Filters
Native switching patterns for content categories and learning levels.
Overview
Keep tab labels short and parallel. Tabs switch content inside the same learning context.
Curriculum
Show lesson structure, levels, and skill progression with concise supporting content.
For Parents
Show reporting, safety, support, and learning guidance for families.
FAQ
Use the accordion pattern when a topic contains several detailed questions.
8. Forms & Inputs
Forms & Inputs
One native form language for trials, contact, accounts, and parent enquiries.
Input rules
Always show visible labels.
Use one consistent field height.
Place validation directly below its field.
Keep mobile forms to one column.
Make the primary form action easy to tap.
9. Alerts, Toasts & Status
Alerts, Toasts & Status
Consistent feedback patterns plus static native modal and toast previews.
ℹ
Lesson reminder
Your class starts in 15 minutes.
✓
Trial booked
We’ve sent the details to your email.
!
Connection unstable
Video quality may be reduced.
×
Payment failed
Check your card details and try again.
Free Trial
Book your child’s first class
Static native modal preview using the same badge, button, spacing, and surface resources.
✓
Trial booked
We’ve sent the class details to your email.
10. Accordion / FAQ
Accordion / FAQ
Native disclosure for longer FAQ and policy content.
What age is PalFish suitable for?
＋
Programs can be organized by age and learning level, with clear paths for each stage.
How does the free trial work?
＋
Parents choose a suitable time, share learner information, and receive a class confirmation.
Can parents track progress?
＋
Yes. Progress views can show completed lessons, skill development, and teacher feedback.
Can I change teachers?
＋
Yes. The same teacher discovery and booking pattern supports finding a better fit.
11. Testimonials
Testimonials
Reusable social proof for landing pages and conversion sections.
★★★★★
We could clearly see his speaking confidence improve after a few weeks.
👨
Daniel
Parent of Leo, age 8
★★★★★
The teacher is patient, encouraging, and keeps a young learner engaged.
👩
Emma
Parent of Lily, age 6
12. Pagination & Loading
Pagination & Loading
Static native utility previews for larger course, teacher, and article libraries.
Pagination
Skeleton
13. Reusable CTA Band
Reusable CTA Band
A componentized final conversion block for landing pages.
Ready to help your child speak with confidence?
Start with a free trial lesson and find the right learning path together.
14. Footer Component
Footer Component
A shared native footer preview for the PalFish website system.
© 2026 PalFish. Component demo only.
Privacy · Terms · Cookies
15. Component Governance
Component Governance
Rules that keep the design system scalable and understandable.
1
Reuse before creating
Check whether an existing component can be extended with a clear variant.
2
Separate content from structure
Cards accept new content while preserving shell, spacing, and states.
3
Use tokens
Spacing, radius, colors, and shadows come from centralized resources.
4
Name by role
Prefer Course Card and CTA Band over names based on color or position.
5
Document variants
Record props, breakpoints, empty states, and accessibility behavior.
6
Audit duplicates
Merge components that solve the same job before the system fragments.
Button demo. Native button system
Native button system
The preserved seven variants, four sizes, and mobile full-width helper remain a dedicated reference section.