Components — Ronix Design System

The home-page banner: a full-bleed stage carrying product imagery, with a white text wrapper overlapping its lower edge. The wrapper holds a Title 1, a Body 1 line and up to two calls to action.

The stage is a section-width frame; the text wrapper is a container-width frame pulled up over it. Padding inside the wrapper is Banner-Grid/Home page/text-wrapper-padding — 32 px at Large, 24 px at Small.

Product imagery

Your Reliable Solution in Routine Maintenance

Explore our flagship lineup of tool sets featuring a wide range of accessories, designed to streamline your everyday tasks with precision and convenience.

CTA CTA

Fig. 1Banner-001, Type=Extra, Size=Large. Resize the window to see the Small variant.

Product imagery

The Most-Versatile Cordless Tool Collection You’ll Ever Own

All the power you need in one battery. All applications covered in one toolbox. All the tools you want in one series.

View 86 Series

Fig. 2The single-action form: one square #1e1e1e button at 14 px, no leading dot.

Frame tokens

The banner carries its own grid tokens, separate from the page frames. They are what keep the stage height and the wrapper width in proportion at each breakpoint.

Token	Large	Small
`banner-001/wrapper/Extra`	656	540
`banner-001/wrapper/Default`	566	326
`banner-001/content-wrapper/Extra`	1320	540
`banner-001/content-wrapper/Default`	1140	326
`banner-001/Text wrapper size/Extra`	1400	576
`text-wrapper-padding`	32	24

Fig. 3Values in px, read from the Large and Small sections of the library.

Content rules

The title runs to two lines at most. Body copy stays under 160 characters so it holds two lines at Small.

Two actions maximum, and only one of them primary. A banner with two red buttons asks the user to choose without telling them which choice matters.

Shop the range Find a dealer

Fig. 4 Do One primary, one secondary.

Shop the range Find a dealer

Fig. 5 Don’t Two primaries. Neither action leads.

Buttons

Three variants. Primary carries the brand red and the single most important action on a view. Secondary is the default for everything else. Ghost is for actions inside a dense surface where a border would add noise.

Height is 40 px, padding is X-Small by Medium, radius is 4 px, and the label is Subtitle 2. Disabled buttons drop to background 4 and foreground 3.

Primary Secondary Ghost

With icon CTA

Fig. 6Variants and states.

Markup

<a class="rx-btn rx-btn--primary" href="/catalogue">Shop the range</a>
<button class="rx-btn rx-btn--secondary" type="button">Find a dealer</button>
<button class="rx-btn rx-btn--primary" type="button" disabled>Out of stock</button>

Tiles and cards

A tile is a coloured rectangle that groups content. A card is a tile with a function — it links somewhere or triggers something — and carries a 1 px stroke to signal that it is a target.

Cards sit on background 1 with Medium padding. The media area holds a 4:3 image; the title is Subtitle 2 and the supporting line is Body 1 in foreground 2.

Rotary hammer

SDS-Plus, 800 W

Angle grinder

125 mm, 1100 W

Impact driver

18 V, brushless

Fig. 7Card row at Medium padding with a 16 px gap.

Tiles in brand colours

Tiles may take the brand red or foreground 1 as a fill. When they do, content on them switches to Foreground/On brand.

A 4 px gap between tiles reads as a single composed surface; 16 px reads as separate blocks. Both are correct — pick one per group and keep it.

Brand

Dark

Surface

Placeholder

Fig. 8Tile group with a 4 px gap: one composed surface.

Fig. 9The same tiles at a 16 px gap: four separate blocks.