elements library 01
Structure, containers and content modules, styled the Kudos way. Copy any element from this page and its styling travels with it.
structure & containers
section / row / column
section — full-bleed colour band
row — max 1240px
column
column
column
Sections alternate flat colour bands: navy, near-black, off-white, orange strip. No gradients, no shadows.
group
nested modules, one style
Heading, text and button grouped. Style the container once, nest infinitely.
column widths
2_3
1_3
Set a column fraction at module.advanced.type: 1_2, 1_3, 2_3, 1_4, 3_4. Fractions in a row add up to a full width.
content modules
heading + text
start on top
Body copy is Inter Light 16/24. Keep sentences short. Clear product benefits, minimal jargon, and always speaking to you, the player.
blurb
high quality
Checked, weighted and finished to play straight out of the case.
button
image
Product imagery sits at 10px radius. Swap this placeholder for an Image module once photography lands.
icon (graphic marks)
Ten spirograph marks are the only pictorial device in the system. They work at 22px and at 1100px.
divider
A mark plus a 0.7px accent hairline is the section-heading device. A plain hairline separates rows.