Bijak Web Design System

Established design guidelines for the Bijak and Just apps, which later grew into a full design system.

The web system documents every foundation and component in one Figma library: grids, spacing, colour, type, buttons, inputs, tables, selection controls, icons and cursor states. Each component ships with its variants and states so design and engineering build from the same source.

Ten spacing steps from 8 to 56, with 4px reserved for tight icon padding.

Semantic roles sit on top of four tonal palettes. Click any swatch to copy its hex.

Twelve Roboto styles, each in Regular, Medium and Bold. Switch the weight to see the whole scale change.

These are the live components from the library. Change a state and the component re-renders exactly as it is defined in Figma.

Thirteen cursors tell the user what an element will do before they click. Hover a tile to try the real cursor.

Every page in the library opens with a cover that names its owner and shows where it stands. The status moves through six stages, so anyone opening the file knows whether a component is ready to use.

Review notes are part of the kit too, so feedback lives next to the component it is about.