rastrillo design system
An overview of everything the design system provides. Theme: day. Language: English.
Overview
The Rastrillo design system aims to be a starter framework for any app to get a consistent, polished, accessible UI with no or minimal JavaScript dependence, available in multiple languages, and using clean, modern HTML and CSS. It's designed to be delightful to use with or without LLM assistance, and easily remixable.
The demo application
A working app built only from this system: a dashboard, a list, one record open. Each has its own address. No JavaScript.
Where to go next
- Getting startedDetails about the stylesheets and scripts that ship with the Rastrillo design system.
- TokensEvery custom property the system is built out of: the theme's colour and type, and the scales for size, spacing and radius.
- IconsEvery icon slug, at the size components draw it, with the call to copy and its lucide.dev name.
- List screenGeneric list screen with title, toolbar, rows that work desktop and mobile.
- DisplayThe small pieces of vocabulary a screen is assembled from: status, identity, progress and the one alert shape.
- FormEvery control, in the states a real form puts it in. Each one sits in a padded rst-box, because that is the rule these partials assume.
- Date and timeThe four fields datetime.js enhances, each keeping its native input underneath, so a reader with no script gets the plain control and not a broken one.
- RouteThe pieces that are a whole response rather than a piece of one.
- UI primitivesThe shapes a component cannot be, because they wrap a body only the caller knows: cards, data grids, menus and the shells' own chrome.
- Dates, numbers and namesHow to show dates, numbers, money, names and addresses, and which ones people mix up.
- ScreensExamples of screens using the design system. You can use these as starter templates for your own apps.
- ShellsThe page frames rastrillo new can scaffold. Each opens full width.