Introduction

About Kiddosy

Kiddosy is a product I co-founded. It has two sides: parents search for activities for their children and book them, and organisers manage their work, from the dashboard to the group calendar. I lead operations, product, design and the overall direction.

I built its design system from scratch. These pages document it: the foundations, the most important components with every variant and state, and the AI-native process that keeps it consistent. All values are read from the Kiddosy code (October 2026). See the Kiddosy case study

• 45+components in the package
• 16component families
• 8category colour pairs
• 44 pxminimum touch target

Principles

• One source of truth

  Every raw value lives in one token file. Components read roles, so a change in one place changes the whole product.

• Only system tokens exist

  Tailwind’s default palette, shadows and fonts are switched off. A value outside the system cannot slip in.

• Every state is designed

  Each component gets its states from the catalogue: hover, focus, disabled, error, loading, empty.

• Accessible by default

  Touch targets of at least 44 px, a visible focus ring, contrast checked by a scanner, not by eye.

• Presentational components

  Copy comes from the app’s translations and links are injected by the app, so the same component works in Polish and English and in any router.

• Category identity

  Each activity category has its own colour pair, and every control that picks a category uses it.

Structure

The system is built in one order: tokens, then atoms, molecules, organisms and layouts. A component goes where its complexity puts it, not where it was first built, and families stay together in the catalogue.

1. 01
   Foundations

   Colours, type, spacing, radius, shadows, motion

2. 02
   Atoms

   Button, checkbox, chip, badge, avatar

3. 03
   Molecules

   Form fields, search, date picker, phone and code inputs

4. 04
   Organisms

   Navbar, sidebar, bottom navigation, activity panel, filters

5. 05
   Layouts

   Step card, confirmation hero, dashboard welcome, footer

How to read these docs

• Previews are live: they are rebuilt here in HTML and CSS from the Kiddosy tokens, so they react to hover and keyboard.
• The Anatomy tab shows how a component is put together; the States section forces hover and focus so they are visible without a mouse.
• The API tables describe the real props in words. Source code is not published, by choice.