Mituto Design System
Stable 1.1 Get the kit
Mituto UI · 1.1 Built & based in Luxembourg

Serious learning.
Delightfully taught.

One bright, calm system for child lessons, parent dashboards, and everything between. Built from semantic HTML, native CSS, vanilla JavaScript, and optional React adapters—without a UI library.

Explore components Use in React
  • 80+ original icons
  • Keyboard-ready behavior
  • Light surfaces only
Mathematics

Multiplication garden

12 min

Find the missing number to help this idea grow.

6×4=?
3 of 6
40+component patterns
0UI dependencies
AAcontrast target
44pxtouch target baseline
Brand

A learning bubble with a little spark

The rounded conversation bubble represents a tutor sitting alongside the learner. The open book keeps the promise grounded in learning; the coral dot and golden spark bring curiosity without turning the brand into a toy. Mituto is built and based in Luxembourg.

Give it air

Keep clear space equal to half the mark height on every side.

Keep the palette

Do not recolor individual letters, add gradients, stretch, rotate, or place on busy imagery.

Respect minimums

Use the full logo from 120px wide and the standalone mark below that size.

Foundations · Color

A palette that feels like encouragement

Warm cream and paper carry every surface. Lilac leads action, while coral, mint, sky, and sun provide friendly meaning. Deep plum is reserved for readable text—not dark containers.

RoleTokenUseContrast note
Canvas--mt-cream-0Global backgroundPair with ink
Ink--mt-inkPrimary text and icons12.1:1 on canvas
Action--mt-primary-300Primary controlsUse dark ink text
Success--mt-mint-100Positive surfacesAdd icon + label
Error--mt-danger-50Validation backgroundAdd explicit message
Light by design

Mituto has no dark theme. System dark-mode preferences must not invert product surfaces; color-scheme: light only is part of the token contract.

Foundations · Typography

Round where it delights, quiet where it explains

Fredoka gives headings their bubbly confidence. Nunito Sans keeps instructions, forms, and dense parent-facing information crisp. Both variable fonts are self-hosted in the kit.

Mituto Display · Fredoka

Aha! Now it makes sense.

--mt-font-display
Mituto Sans · Nunito Sans

Short explanations use friendly words, generous line height, and one clear idea at a time.

--mt-font-body
DisplayLearn brightlyclamp(3rem, 7vw, 6.5rem)
Heading 1One clear goal3rem / 1.05
Heading 2Guided practice2rem / 1.1
Heading 3A helpful next step1.25rem / 1.2
Body

Use 16px as the adult-facing baseline and 18–20px for core child instructions.

1rem / 1.55
LabelANSWER IN YOUR OWN WORDS.75rem / 900
Foundations · Spacing & shape

A steady rhythm with soft edges

The 4px base scale gives dense dashboards and roomy child flows a shared rhythm. Rounded corners grow with the component; pills are for compact labels and actions, not every container.

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
sm · 10px

Compact controls

md · 14px

Inputs and options

lg · 20px

Menus and panels

xl · 28px

Cards and dialogs

pill · 999px

Buttons and badges

Foundations · Layout

Compose with four predictable primitives

Use stack for vertical rhythm, cluster for wrapping actions, grid for responsive cards, and surface for contained content. The classes work unchanged as React className values.

Stack

.mt-stack

Cluster

.mt-cluster

Responsive grid

.mt-grid · minmax()
CSS composition
<section class="mt-scope mt-stack">
  <header class="mt-cluster">…</header>
  <div class="mt-grid">…</div>
</section>
Components · Actions

Buttons with a gentle bounce

One filled primary action per region. Secondary, ghost, and semantic variants support the hierarchy. Every state—including loading and disabled—preserves the label’s accessible name.

Variants.mt-button
Sizes
States
Icon actions
Use the right element.Use <button> for actions and <a href> for navigation. A disabled action needs a visible reason nearby; links must never imitate disabled buttons.
Components · Forms

Inputs that explain themselves

Labels stay visible. Hints answer likely questions before errors happen, while validation messages say what changed and how to fix it. Native input types retain browser and password-manager behavior.

Shown only inside your family account.

Email looks good.

At least 10 characters.

€/ mo

Enter all 6 characters from the invitation.

0 of 300 characters

Supported native typestextemailpasswordsearchtelurlnumberdatetimemonth
Components · Forms

A control for every kind of choice

Use checkboxes for independent choices, radios for one choice in a set, switches for settings that take effect immediately, and selects when screen space matters.

Checkboxes.mt-check
Radio group.mt-radio
Session length
Switchesrole="switch"
Segmented control.mt-segmented
View density
Native select<select>
Custom selectlistbox pattern
School cycle

Arrow keys, Enter, Space, Home, End, and Escape are supported.

Components · Forms

Rich input without a heavy runtime

The behavior layer adds only what native HTML does not provide consistently: filtered suggestions, steppers, accessible custom selection, drag feedback, and synchronized range output.

Autocompletecombobox pattern
Number steppernative stepUp()

Between 4 and 12 per learning block.

Range<input type="range">
65%
File uploaddrag + native input
Components · Data display

Evidence made friendly

Parent-facing information can be precise without feeling clinical. Cards group one idea, stats emphasize the useful signal, and tables remain semantic, sortable, filterable, and responsive.

Completed sessions18 3 this week
Focused time4h 12m Active time
Current confidenceHighEvidence-backed
Stars earned42½
Badges, pills & tags
AssignedNeeds practiceCompleteIn progressNewDraftCycle 3mathsfr-LU
Dismissible chips
Mathematics Cycle 3 12 minutes
Avatars
LIMANO
GESA+1
Content list
  • Multiplication gardenMathematics · 12 min
    Done
  • German sentence builderLanguage · 15 min
    Next
Interactive data tablefilter · sort · paginate
Status
Multiplication gardenMathematics02 Sep 20264½ starsComplete
Sentence builderGerman01 Sep 20264 starsComplete
Reading cluesFrench29 Aug 20263½ starsReview
Fractions picnicMathematics27 Aug 20265 starsComplete
Living thingsScience25 Aug 20264 starsComplete
Word explorerEnglish23 Aug 2026—Paused
Shapes around usMathematics20 Aug 20264½ starsComplete
1–4 of 7
Timeline
  1. Session completedToday at 16:42 · 4½ stars
  2. Parent approvedYesterday at 20:15
  3. Recommendation createdBased on two completed sessions
Empty state

No saved lessons yet

Save a topic to return to it quickly.

Components · Feedback

Specific, calm, and close to the action

Success tells the learner what went well. Errors explain the next move. Progress is honest, loading is announced, and celebrations stay warm without becoming noisy.

Session ready

Review the learning goal before creating the child link.

Beautiful work!

The session is complete and the parent report is on its way.

Connection is a little wobbly

Your answers are saved on this device. Keep this tab open.

We couldn’t create the link

Nothing was lost. Check the connection and try once more.

Progress
Learning block72%
Profile complete40%
Loading
Ratingkeyboard focusable

Detailed numeric scores stay in the parent report; children receive stars and specific words.

Toastaria-live="polite"
Components · Overlays

Reveal complexity only when it helps

Native dialogs provide focus management and Escape behavior. Accordions reduce scanning load, tooltips label unfamiliar icon actions, and carousels are reserved for optional peer content—not essential instructions.

Dialog & drawer
Tooltipsupplementary only
Accordion

Completed sessions combine mastery, independence, and eligible fluency, then map the result to the nearest half star.

Yes—when the parent-approved session policy allows it. First-attempt and eventual correctness remain separate evidence.

The paper workflow can be downloaded ahead of time and uploaded by the parent later.

Content carousel
Tip 1

One idea at a time

Keep the child’s primary task and action visible together.

1 of 3
Ready

Approve this session?

Sam will practise multiplication facts with six exercises. The session takes about 12 minutes.

Learning goalRecall 6× facts using known patterns.

Session details

Supporting information without leaving the page.
Use in your app

Component code

Copy-ready HTML for this example.

HTMLCSS only

Import @mituto/ui/styles.css once. Examples marked “Vanilla behavior” also use initMituto(); React-managed screens should use the adapters described in React integration.
Foundations · Iconography

Mituto Sprout icons

A compact original outline set for product actions, learning subjects, status, communication, data, and files. Use the 24px grid, rounded 2px stroke, and a visible text label whenever meaning is not universal.

80+ icons
Click an icon to copy React-ready markup.

Size

Default to 20px in controls, 24px standalone, and 28px in subject bubbles.

Stroke

Keep the 2px rounded outline. Do not mix filled third-party icons into a control group.

Meaning

Icons support labels. They replace text only for universally understood actions with an accessible name.

Product patterns

From focused practice to useful evidence

These compositions turn the primitives into Mituto-specific moments. Child flows use large type, one task, and one primary action. Parent flows show rationale, confidence, and control.

Guided practice

Build the sentence

2 of 5

Put the words in the right order.

Heutespieleichdraussen.
Parent recommendation

Ready for a gentle stretch

High confidence

Sam recalled 6× and 7× facts independently in two sessions. A short introduction to division would connect the inverse relationship.

11 of 12 first attempts correct Steady active time Objective demonstrated twice
Session complete

You found a clever pattern!

★ ★ ★ ★ ◐

You used the 5× fact to solve the 6× fact. That is strong mathematical thinking.

Child surface

18–20px instructions, 48px actions, one decision per screen, praise the strategy.

Parent surface

Show evidence and uncertainty, separate first attempts from retries, keep the parent in control.

Shared language

Learning blocks, active time, confidence, and next activity have the same meaning everywhere.

Implementation · React

Native foundations, React-shaped APIs

Import the stylesheet once, then use semantic classes directly or the optional adapters. The adapters manage their own state and import only React—no component, positioning, animation, or icon libraries.

1

Copy or publish the kit

The complete distributable is available at /design-system/.

2

Import the CSS

Add @mituto/ui/styles.css once near the app root.

3

Choose one behavior owner

Use React adapters inside React; reserve the vanilla initializer for server-rendered or static islands.

ProfileForm.jsx
import "@mituto/ui/styles.css";
import {
  Button, Field, Input, Icon, Select, Switch
} from "@mituto/ui/react";

export function ProfileForm() {
  const languages = [
    { value: "de", label: "Deutsch" },
    { value: "fr", label: "Français" },
    { value: "en", label: "English" }
  ];

  return (
    <form className="mt-scope mt-stack">
      <Field label="Child nickname" hint="Visible only to your family.">
        <Input name="nickname" autoComplete="off" />
      </Field>
      <Field label="Explanation language">
        <Select name="language" options={languages} />
      </Field>
      <Switch label="Read instructions aloud" />
      <Button type="submit">
        <Icon name="check" /> Save profile
      </Button>
    </form>
  );
}

Styled primitives

Button, IconButton, Badge, Avatar, Field, Input, Textarea, NativeSelect, Checkbox, Radio, Switch, NumberStepper, Progress.

Interactive primitives

Select, Autocomplete, Tabs, Accordion, Dialog, ToastProvider, useToast, and DataTable.

Vanilla enhancements

Dropdown, listbox, combobox, tabs, accordion, dialog, toast, data table, carousel, rating, range, stepper, and file drop.

React safety rule

Do not call initMituto() on a React-managed interactive subtree. Static CSS classes are always safe; interactive behavior should have one state owner.

Quality · Accessibility

Clarity is part of the curriculum

The system targets WCAG 2.2 AA and is designed for developing readers, touch input, keyboard navigation, zoom, reduced motion, and assistive technology. Accessibility is a product behavior, not a finishing pass.

Readable contrast

Ink on paper exceeds AA. Pastels are surfaces; semantic text uses a darker companion token.

Visible focus

A four-pixel lilac focus halo appears on every interactive element reached by keyboard.

Comfortable targets

Primary controls begin at 44px; child-facing choices should reach 48px or more.

Reduced motion

Motion is short, optional, and removed automatically when the user requests reduced motion.

Plain language

Labels use familiar verbs. Errors describe recovery. Feedback names a strategy, not a trait.

No color-only state

Status always includes a label or symbol, and validation is connected to its control.

Release checklist

Before a Mituto flow ships

  • Complete every task with keyboard alone.
  • Test at 200% browser zoom and 320 CSS pixels wide.
  • Verify labels, names, roles, values, errors, and live messages with a screen reader.
  • Check child-facing instructions with target-age readers and multiple languages.
  • Confirm focus returns after dialogs and never disappears behind sticky UI.
  • Run contrast checks against the final product background, not a token in isolation.