Jinnga design system
ComponentsEvery component with every state, in the active theme and language. Interact with them: this gallery is the acceptance test of each component. Switch theme and language in the header.
TextRoles, never raw font values.
StudentsNo students yet. Add the first one or import a list.1240 points this week5-day streakThe email or password is not right. Check both and try again.
ButtonOne primary per screen. Secondary is calm teal, tertiary is text, destructive confirms. Loading keeps the width.
Kinds
Sizes, loading, disabled, icon
Icon buttons (always with a label)
BadgeShort status or count. White text on strong roles; ink on the character colour.
Tones
Training
Live
UC-ANA-002
1 240 pts
Advanced
At risk
New
ProgressBarDeterminate, with an accessible value. Gold for achievement, lime for progress.
42 %
42 %
Avatar
Sizes and the character ring
VR
MO
CT
Field and TextInputLabel above, helper or error below, error linked to the control and announced.
name@example.org
Write a short subject.
TabsViews of the same object; active marked by weight and the character edge.
Classification
Banner, EmptyState, Skeleton
You are offline. Changes will be sent when the connection returns.You are offline. Changes will be sent when the connection returns.
Changes saved.
Too many attempts. Wait 15 minutes or reset your password.Forgot your password?
StudentsNo students yet. Add the first one or import a list.
ListRow and DataTableRows are 44px, selectable, keyboard operable. Tables on md and up; cards on phones.
Valentina RuizGroups 9B
Advanced
Mateus OliveiraGroups 9A
Moderate
Chloé TremblayGroups 9B
At risk
Student
Group
Score
Valentina Ruiz
9B
980
Mateus Oliveira
9A
940
Chloé Tremblay
9B
905
Dialog and Toast
Open them
Definition of done
·WCAG 2.2 AA: text 4.5:1, large text and UI 3:1, visible focus 3:1, touch targets 44px
·Light and dark from day one, resolved in the theme roles, never in the component
·Every state: default, hover, focus, pressed, loading, empty, error, disabled
·Four locales through i18n keys; tolerates 30 % text expansion without breaking layout
·Universal: works on web and native; nothing DOM-only outside .web files
·Responsive across the breakpoints; one column on phones
·Rendered in this gallery with every state before it is used by a pattern
Inventory
·Text, Stack, Row, Surface, Card, Divider, Button, IconButton, Icon, Badge, ProgressBar, Avatar, Field, TextInput, Checkbox, ChoiceGroup, Tabs, Banner, EmptyState, Skeleton, ListRow, DataTable, Dialog, Toast, ThemeToggle, LanguageMenu