Getting Started

What this kit is, how it maps to the micro-frontends, and how to adopt it in your module.

What this is

The RVN Design Kit is the shared visual language for the RVN Connect micro-frontend platform. It is not a published npm package — it is the documented source of truth: the exact tokens, component classes and screen recipes the React (rate-fe, reference-fe, racar-fe, header-fe, report-fe, …) and Vue (administrator-fe, timesheet-fe) modules already ship. Every live example on this site is styled with the real tokens, so what you see is what renders in production.

Three layers

Foundations are the tokens (colour, type, spacing). Components are the reusable pieces (badge, button, sidebar, …). Patterns compose them into whole screens (list, detail).

How it maps to the micro-frontends

· Tokens live in each module’s src/assets/scss/layout.scss as $color-rvn-* variables.
· Shared components live in src/components/common/ (AppActionBar, AppSearchBar, AppFormFooter).
· The appshell composes the modules; class names are global, so the kit’s conventions (compound badge selectors, module-scoped sidebar brand colours) exist to survive that shared CSS scope.

Adopting it in a new module

# 1. Copy the token block into your module
#    → assets/scss/layout.scss  (see Foundations → Color / Typography / Spacing)

# 2. Copy the shared components into src/components/common/
#    AppActionBar, AppSearchBar, AppFormFooter  (+ their .css)

# 3. Add the badge classes (Components → Badge) to layout.scss

# 4. Build list/detail screens from the Patterns recipes

Contributing

When you change a shared token or component, update it here too so the kit stays the source of truth. If two modules diverge, the kit records the canonical value and notes the divergence.

Keep values identical across modules

The whole point is cross-module consistency in the appshell. If you must diverge, hardcode the exact hex (as report-fe does for badges) rather than letting a different variable resolve.