Cards & Tiles

Cards and tiles are content containers with clearly defined but different interactions.

Colours

Colour tokens specifically for cards and tiles

#ffffff

Card default surfaces

#051a3f

Heading

#3c4253

Body

#d9dbdd

Border

Card

1rem

Horizontal Padding

1rem

Vertical Padding

1rem

Base

Border Radius for cards

Tokens for tile hover interaction

0 0 0 4px rgba(17,105,152,0.3)

Hover

Hover style for elements like tiles

0 0 0 2px rgb(9,16,36), 0 0 0 6px rgb(38,206,191)

Focus

Focus Rings

0 0 0 4px rgba(67,150,194,0.3)

Active

Active style