Design Guidelines

Bold and clean.

Surface.

These are the three core surfaces: page canvas, raised cards, and dark sections. The theme also uses one full-lime statement band and one pale-grey section band as deliberate, limited exceptions.

Brand colours.

The colours that make the work recognizably LKI. They are named for what they look like because their exact job can change by context; the usage note on each swatch says what it does here. The number of Brand colours is not fixed: another client may need fewer or more, but every colour must have a real role rather than filling a quota.

Greys.

Five even steps, numbered dark to light, tinted toward the brand rather than neutral. Grey 1 and 2 are safe for body text. Grey 3 needs to be large. Grey 4 and 5 are fills and borders, never type.

CTA.

One interaction colour in three strengths. Pink marks links, arrows, hover and pressed states; the main filled button rests dark. It is never decorative, so people can trust that pink signals action.

Additional.

Illustration and editorial colours used outside the everyday interface. They may appear in social posts and other editorial graphics with restraint, supported by the core brand palette rather than replacing it. A layout should not need them to feel finished.

Semantic.

Four conventional interface meanings belong in the system whether or not the brand uses similar hues. They are functional colours, not Brand colours. Always pair them with an icon and written label so meaning never depends on colour alone. Error, Success, and Warning pass AA for normal text on white; Info is for icons or large text on white, and passes AA for normal text on dark.

Approved combinations.

These foreground and background pairs are approved for normal text. Do not reverse the lime or pink pairings to light text; both need the dark foreground to remain readable.

Inter for structure, Instrument for expression, Mono for annotation.

Capitalisation

Sentence case everywhere — headings, subheadings, buttons, body copy. Capitalise the first word and proper nouns, nothing else.

Space. Shape. Depth.

The three scales nobody looks at directly. Spacing sets the rhythm, radius gives every edge its character, and elevation decides what sits above what. All three are fixed lists, so each decision is made once and reused.

Spacing.

Use the defined scale for recurring component and section rhythm. Unique structural measurements such as container widths and navigation height may sit outside it when the layout requires them.

Radius.

Radius gives each interface edge a consistent character, from square structural surfaces to soft cards and pill-shaped actions.

The curve applied to an interface element. Smaller radii belong to dense controls, while larger radii belong to cards and surfaces. Buttons and tags use their own defined treatment.

Elevation.

The visual difference between surfaces. Flat is the default; borders and shadows are used only where they clarify hierarchy, grouping, or interaction.