Rost
Rost started as a design system for my own needs and grew into a product of its own. Today it serves products across different industries.
Rost is the Romanian word for purpose or order, in the sense that something is where it belongs.
How it works
- A contractStepYAML
Each component is one YAML file: its parts, its tokens, every variant, how to use it, and where my apps build it. It's the source. Figma was where it started.
- Code from the contractStepCSS and React
The CSS is written straight from the contract, so nobody types a colour by hand. The React component follows the same parts.
- Checked against FigmaStepVisual test
Each variant of a built component is rendered in Chrome and compared with Figma's own screenshot. A wrong colour or a missing icon fails it. Text edges get a little slack, because Figma and Chrome never draw them quite the same.
Components
25 of them are in code so far, and their cards show the real thing. The rest are contracts, and they come next, one at a time.
Components
- 01BadgefeedbackIn code
- 02ButtonactionsIn code
- 03CarouselnavigationIn code
- 04ChipselectionIn code
- 05DividerdisplayIn code
- 06IconButtonactionsIn code
- 07InlineBannerfeedbackIn code
- 08InputinputsIn code
- 09ListItemnavigationIn code
- 10MenunavigationIn code
- 11NavigationnavigationIn code
- 12ProjectsdisplayIn code
- 13TabsnavigationIn code
- 14TagdisplayIn code
- 15TestimonialPicturedisplayIn code
- 16TestimonialsdisplayIn code
- 17ThumbsdisplayIn code
- 18ToggleselectionIn code
- 19TooltipfeedbackIn code
Patterns
Effects
- 01Floating effecteffectsIn code
- 02Lock frame effecteffectsIn code
- 03Menu effecteffectsIn code
- 04Paper effecteffectsContract
- 05Thumb effecteffectsIn code
