dede
An experimental code-first design system, exploring a more integrated approach to design and development.
The name reflects the philosophy: design and develop as part of the same continuous workflow. Rather than treating design and code as separate deliverables, the system is built around one shared set of tokens, layout primitives and components — edited in code, and documented by the same code that ships.
The name has the same structure as the thing it names: two identical syllables, built from one repeated unit. That is what a design system is.
Which is also why there is no Storybook. Every component is shown on its own page, in a viewer built out of those same components — so anything that cannot build the page is a thing that is wrong, and the documentation cannot drift from the product because it is the product.
Where to start
The nav reads in build order, and so does this.
Tokens are the foundation — eleven categories of value, each on its own page with the argument beside the numbers. Spacing is the one that shapes everything else: it splits into a fixed scale for what sits inside a component and a fluid one for what sits between regions. Icons sit beside them: the glyph set, handed to components as values rather than looked up by name.
Patterns are the two grid engines behind Stack — one builds a module from the weights you write, the other fits them to a fixed 25-column grid. They are engines rather than components, which is why they have a group of their own.
Layout is the chain everything composes with — Section > Stack > Slot > Sleeve, with Grid as a peer. Every page in this viewer is built from it, including this one.
Components are built on all three. Each one is shown in context on its Overview, and its Properties tab puts every prop live beside the rendering, with the code for whatever you have set.
dede is a work in progress. Version 0.1 is the foundations, the layout system and a first set of components; more follow.