Jinnga design system
LayoutsThe page skeletons every product screen is composed of. A layout owns structure only: where navigation, header, content and the secondary column go, and how that collapses on phones. Each one is shown live at phone width and at desktop width.
AppShellTop bar with brand, context and controls; sidebar on lg and up, bottom bar of up to five items under lg. The frame on the left is a phone, the one on the right a desktop.
Jinnga
· Colegio San Martín
StudentsNo students yet. Add the first one or import a list.
128 students
Jinnga
· Colegio San Martín
StudentsNo students yet. Add the first one or import a list.
128 students
AuthLayoutOne task, centred, for sign in, invitations, consents and the device code.
Jinnga
Sign in
design.warebit.com
Jinnga
Sign in
design.warebit.com
PageHeader and DashboardGridTitle, lede, breadcrumb above and actions on the right; cards of equal weight flowing in a grid.
OverviewTokens, components and patterns for every Jinnga interface: the web panel and the mobile apps, in four languages, in light and dark. Games keep their own design.
Live
Students
128
At risk
6
Advanced
42
Contests
3
OverviewTokens, components and patterns for every Jinnga interface: the web panel and the mobile apps, in four languages, in light and dark. Games keep their own design.
Live
Students
128
At risk
6
Advanced
42
Contests
3
DetailLayoutOne object: identity header, tabs, the active panel and, on lg and up, a secondary column.
Chloé Tremblay
At risk
Classification
Signals2 sessions this week
Chloé Tremblay
At risk
Classification
Signals2 sessions this week
FormLayoutA single column of fields, a stepper for wizards, the actions at the end.
✓
Students
2
Groups
3
Continue
✓
Students
2
Groups
3
Continue
ListLayoutFilters, toolbar, count, then the list or table.
6 students
Chloé Tremblay9B
At risk
Diego Castaño8C
At risk
6 students
Chloé Tremblay9B
At risk
Diego Castaño8C
At risk
SplitLayoutMaster and detail side by side on lg and up; on phones one replaces the other.
JN-10482Access and account
JN-10479A game
JN-10482Access and account
JN-10479A game
JN-10482Ticket JN-10482 created. We answer within 24 hours.
FullBleedEdge to edge, no chrome, one exit: a game, a meditation session, a memory trial.
05:00
Wellbeing
05:00
Wellbeing
Rules
·A screen is one layout with patterns inside; a layout never carries content of its own.
·AppShell has at most five bottom items and seven sidebar entries (information architect).
·Every layout collapses to one column at 375px without horizontal overflow.
·FullBleed is the only layout without the shell; it keeps one visible exit.
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
·Shown live at phone and desktop width on this page