# Lara Kroeker Interactive design system

Generated from the canonical LKI Design Studio record. If this file and a screenshot disagree, use the record.

Version: 1.5

## Foundation
Guideline section descriptions use one responsive reading width of 65ch, capped by their container; spacing follows the record Layout tokens.
- Purpose: To build online experiences on foundations solid enough to outlast the platform they are built on, so clients get design leadership and technical execution from the same person instead of losing time and context between the two.
- Vision: A practice where twenty years of watching platforms come and go plugs directly into whatever tool or AI workflow comes next, without the foundation ever needing to be rebuilt.
- Mission: Closing the gap between strategy and execution on the design side, and between what AI can do and how organizations actually adopt it, one engagement at a time.

## Voice and mood
- Calm
- Considered
- Clear
- Confident
- Grounded

## Media presentation

## Colour tokens
Semantic feedback uses the same four base colours across projects: Error, Success, Warning and Info. Disabled is a Grey-based interaction state, not a fifth semantic colour. Do not use these base swatches as dark-surface text without checking contrast; use a contrast-checked surface foreground on a semantic fill, or a suitable approved pair.
- colour.surface.raised: #FFFFFF (White)
- colour.surface.page: #F6F6F5 (Neutral)
- colour.surface.inverse: #101E2A (Dark)
- colour.brand.accent: #7FD099 (Mint)
- colour.brand.primary: #BBF490 (Lime)
- colour.brand.secondary: #E4FBD3 (Pale lime)
- colour.brand.brand_on_light: #00AB8B (Green deep)
- colour.greys.text: #203B53 (Grey 1)
- colour.greys.muted_text: #4D6275 (Grey 2)
- colour.greys.large_text: #798998 (Grey 3)
- colour.greys.fill: #A6B1BA (Grey 4)
- colour.greys.hairline: #D2D8DD (Grey 5)
- colour.cta.default: #FF6B9D (CTA)
- colour.cta.hover: #FC2E7C (CTA hover)
- colour.cta.tint: #F8E3E9 (CTA tint)
- colour.additional.supporting_1: #FEE181 (Yellow)
- colour.additional.supporting_2: #00778C (Teal)
- colour.additional.supporting_3: #FC9D5D (Apricot)
- colour.semantic.error: #B91C1C (Error)
- colour.semantic.success: #15803D (Success)
- colour.semantic.warning: #A16207 (Warning)
- colour.semantic.info: #1D4ED8 (Info)

## Type styles
- type.title: Inter, sans-serif, 99px, weight 900, line-height 1.02 — Hero title
- type.h1: Inter, sans-serif, 77px, weight 900, line-height 1.06 — Page title
- type.h2: Inter, sans-serif, 46px, weight 800, line-height 1.08 — Section heading
- type.h3: Inter, sans-serif, 28px, weight 700, line-height 1.25 — Prose heading
- type.h4: Inter, sans-serif, 20px, weight 600, line-height 1.35 — Group heading inside a major section
- type.h5: Inter, sans-serif, 16px, weight 600, line-height 1.4 — Swatch, card and item title inside a group
- type.eyebrow: Inter, sans-serif, 12px, weight 600, line-height 1.1 — Labels and navigation
- type.button: Inter, sans-serif, 12px, weight 500, line-height 1.1 — Labels for primary, secondary and tertiary buttons
- type.body.large: Inter, sans-serif, 22px, weight 300, line-height 1.55 — Openings and introductions
- type.body.regular: Inter, sans-serif, 16px, weight 300, line-height 1.75 — Standard reading text
- type.body.small: Inter, sans-serif, 14px, weight 300, line-height 1.6 — Captions, buttons, and lists
- type.notes: "JetBrains Mono", ui-monospace, monospace, 11px, weight 400, line-height 1.45 — Explanations, specifications and instructions for using the brand

## Eyebrow badges
Section eyebrows only; do not badge navigation links or button labels. Use type.eyebrow, with colour.brand.primary fill (#BBF490) and colour.surface.inverse text (#101E2A); padding is layout.spacing.14 vertical and layout.spacing.13 horizontal, with layout.radius.6 radius. Apply the same badge on light and dark surfaces. It is a static label with no border, hover, or focus state.

## Layout
Use the shared core spacing scale for new layouts: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 120px. Original Layout spacing/radius entries and numbered token references remain unchanged for connected websites and existing buttons. Use core spacing for new layouts. Explicit client requirements override the default container or component treatment.
Default container: 1280px including gutters; text measure: 65ch. Use mobile roles at or below 640px; multi-column content stacks at or below 900px.
- page gutter: 32px desktop; 24px mobile.
- section padding: 80px desktop; 48px mobile.
- compact section padding: 64px desktop; 32px mobile.
- card padding: 32px desktop; 24px mobile.
- grid gap: 32px desktop; 24px mobile.
The numbered Layout entries below are preserved website compatibility values, not an additional recommended spacing scale. Button geometry remains as specified in Buttons.
- Spacing: 120px — Section breaks; 96px — Wide column gaps; 80px — Section padding; 64px — Large card padding; 56px — Panel padding; 48px — Between blocks; 40px — 3-column grid gaps; 32px — Grid gutters; 24px — Card padding; 20px — 4-column grid gaps; 16px — Paragraph rhythm; 12px — Label to field; 8px — Inside components; 4px — Icon-to-text nudge; 2px — Hairline gaps and optical nudges
- Radius: 0px — Square; 6px — Dense UI; 14px — Cards; 20px — Image wells; 32px — Reserved large surface; Pill — CTAs
- Elevation: Flat — Hairline border, default rest; Shadow XS — Hover lift on cards; Inset hairline — Reserved pale control edge

## Buttons
Use Grey 4 for disabled fills, Grey 2 for labels and arrows, and Grey 5 for borders and arrow badges. Do not use CTA, brand colours, filters or whole-button opacity. Text links remain transparent.
Button labels use type.button. Text links use type.body_small at medium weight (500), with normal tracking and sentence case. Variant token references are authoritative for typography, radius, spacing, icon, surface, and colours.
Shared geometry: use radius layout.radius.6 (999px; source most_common_button_example), horizontal padding layout.spacing.9 (24px; source nearest_layout_token), and vertical padding layout.spacing.13 (8px; source nearest_layout_token).
Use one system-wide radius and Layout spacing tokens nearest to 24px horizontal and 8px vertical padding for every button appearance. Text links have no button padding or radius. Keep per-variant geometry overrides only when the connected website clearly requires them.
Use the shared role names primary, secondary, tertiary for every client. On light surfaces, filled primary buttons use the record-selected fill source with a contrast-checked label; keep the outline transparent with a 1px neutral border and dark text. On dark surfaces, an inverse filled button uses White with dark text, a CTA filled button uses its action colour, and a glass button uses a restrained translucent fill with a light label. Keep panel labels light and text links muted-light by default.
Every enabled button has a visible hover and keyboard focus state. Text-link hover uses weight 700 with no underline. Pressed and disabled states use the exported state contract; disabled controls use Grey tokens at full opacity. Use the native disabled attribute for button elements. For links, set aria-disabled=true and prevent pointer and keyboard activation. Keep outlines 1px and focus outlines 3px with a 3px offset. Ghost/text links use icon.arrow-right. Other appearances use only their configured icon token; none means no icon. Button tokens inherit family, size, weight, line-height, style, tracking, and capitalisation from type.button.
On mobile, button labels do not wrap and buttons remain at least 44px high. Primary buttons become full width at or below 420px.
Button arrows use icon.arrow-up-right: a 14px inline SVG (viewBox 0 0 14 14, path M2.5 11.5L11.5 2.5M11.5 2.5H4.5M11.5 2.5V9.5) with a 1px stroke. Primary buttons with arrow badges use a 36px circular badge. Keep the arrow diagonal at rest; on hover and keyboard focus, rotate it 45 degrees clockwise so it points right.
Ghost/text links use icon.arrow-right: a straight 14px inline SVG (viewBox 0 0 14 14, path M2 7h10M7 2l5 5-5 5) with a 1px stroke. Do not use the diagonal button arrow on a text link.
- Arrow mapping: Use icon.arrow-up-right on buttons and icon.arrow-right on text or ghost links. On button hover and focus, rotate the diagonal arrow 45 degrees clockwise so it points right. Keep text-link arrows straight and move them subtly instead.
- Filled: Use the record-selected default fill source: CTA default, or inverse (Dark on light and White on dark). Select a contrasting label from the palette. Hover and pressed use their CTA tokens.
- Outline: Use a neutral 1px border and readable surface text by default. On light surfaces, hover may fill with CTA colour and dark text; on dark surfaces, keep the fill transparent and use a subtle CTA-coloured border.
- Soft: Use the pale CTA tint with dark text on light surfaces. On dark surfaces use a restrained translucent light treatment and a light label.
- Glass: On dark surfaces use surface foreground at 10% for the fill and 28% for the border; keep the label light and reserve saturated CTA colour for the circular arrow badge. Hover adds a subtle CTA tint. The badge sits inset by the button vertical-padding token.
- Text: Use muted surface text by default and stronger surface text on hover or focus; never underline. Use a straight arrow-right in the CTA accent colour.
On light surfaces, use a dark inverse primary pill with a medium-weight uppercase light label, a pink circular badge and a diagonal dark arrow. The secondary is a transparent pill with a 1px dark outline. Text links use medium-weight Small Body Text, muted dark text and a straight pink arrow. On dark surfaces, use a restrained glass primary and a muted-light text link with the same distinct arrows. Keep pink concentrated in the badge and interaction feedback; aim for one filled CTA per view.
- Start a project — filled default source: inverse; role: Primary; appearance: Filled; surface: light; radius: 999px; horizontal padding: 24px; vertical padding: 8px; icon: diagonal up-right button arrow; tokens: typography: type.button, radius: layout.radius.6, padding_x: layout.spacing.9, padding_y: layout.spacing.13, icon: icon.arrow-up-right, surface: colour.surface.page; colour states: default.background: colour.surface.inverse, default.foreground: colour.surface.raised, default.icon_foreground: colour.surface.inverse, default.icon_background: colour.cta.default, hover.background: colour.cta.hover, hover.foreground: colour.surface.inverse, hover.icon_foreground: colour.cta.default, hover.icon_background: colour.greys.text, pressed.background: colour.cta.hover, pressed.foreground: colour.surface.inverse, pressed.icon_foreground: colour.cta.default, pressed.icon_background: colour.greys.text, focus-visible.outline: colour.greys.text, disabled.background: colour.greys.fill, disabled.foreground: colour.greys.muted_text, disabled.border: colour.greys.hairline, disabled.icon_foreground: colour.greys.muted_text, disabled.icon_background: colour.greys.hairline
- View services — filled default source: inverse; role: Secondary; appearance: Outline; surface: light; radius: 999px; horizontal padding: 24px; vertical padding: 12px; tokens: typography: type.button, radius: layout.radius.6, padding_x: layout.spacing.9, padding_y: layout.spacing.12, surface: colour.surface.page; colour states: default.foreground: colour.greys.text, default.border: colour.greys.text, default.icon_foreground: colour.greys.text, hover.background: colour.cta.hover, hover.foreground: colour.surface.inverse, hover.border: colour.cta.hover, hover.icon_foreground: colour.surface.inverse, pressed.background: colour.cta.hover, pressed.foreground: colour.surface.inverse, pressed.border: colour.cta.hover, pressed.icon_foreground: colour.surface.inverse, focus-visible.outline: colour.greys.text, disabled.background: colour.greys.fill, disabled.foreground: colour.greys.muted_text, disabled.border: colour.greys.hairline, disabled.icon_foreground: colour.greys.muted_text
- Explore work — filled default source: inverse; role: Tertiary; appearance: Text link; surface: light; icon: straight right arrow; tokens: typography: type.body_small, icon: icon.arrow-right, surface: colour.surface.page; colour states: default.foreground: colour.greys.muted_text, default.foreground opacity: 1, default.icon_foreground: colour.cta.default, hover.foreground: colour.greys.text, hover.foreground opacity: 1, hover.icon_foreground: colour.cta.default, pressed.foreground: colour.greys.text, pressed.foreground opacity: 1, pressed.icon_foreground: colour.cta.default, focus-visible.outline: colour.greys.text, focus-visible.foreground: colour.greys.text, focus-visible.foreground opacity: 1, disabled.foreground: colour.greys.muted_text, disabled.icon_foreground: colour.greys.muted_text
- Book a discovery call — filled default source: inverse; role: Primary; appearance: Glass; surface: dark; radius: 999px; horizontal padding: 24px; vertical padding: 8px; icon: diagonal up-right button arrow; tokens: typography: type.button, radius: layout.radius.6, padding_x: layout.spacing.9, padding_y: layout.spacing.13, icon: icon.arrow-up-right, surface: colour.surface.inverse; colour states: default.background: colour.surface.raised, default.foreground: colour.surface.raised, default.border: colour.surface.raised, default.icon_foreground: colour.surface.inverse, default.icon_background: colour.cta.default, hover.background: colour.cta.default, hover.foreground: colour.surface.raised, hover.border: colour.cta.default, hover.icon_foreground: colour.cta.default, hover.icon_background: colour.surface.raised, pressed.background: colour.cta.default, pressed.foreground: colour.surface.raised, pressed.border: colour.cta.default, pressed.icon_foreground: colour.cta.default, pressed.icon_background: colour.surface.raised, focus-visible.outline: colour.surface.raised, disabled.background: colour.greys.fill, disabled.foreground: colour.greys.muted_text, disabled.border: colour.greys.hairline, disabled.icon_foreground: colour.greys.muted_text, disabled.icon_background: colour.greys.hairline
- Read more — filled default source: inverse; role: Tertiary; appearance: Text link; surface: dark; icon: straight right arrow; tokens: typography: type.body_small, icon: icon.arrow-right, surface: colour.surface.inverse; colour states: default.foreground: colour.surface.raised, default.foreground opacity: 0.65, default.icon_foreground: colour.cta.default, hover.foreground: colour.surface.raised, hover.foreground opacity: 1, hover.icon_foreground: colour.cta.default, pressed.foreground: colour.surface.raised, pressed.foreground opacity: 1, pressed.icon_foreground: colour.cta.default, focus-visible.outline: colour.surface.raised, focus-visible.foreground: colour.surface.raised, focus-visible.foreground opacity: 1, disabled.foreground: colour.greys.muted_text, disabled.icon_foreground: colour.greys.muted_text
- View services — filled default source: inverse; role: Secondary; appearance: Outline; surface: dark; radius: 999px; horizontal padding: 24px; vertical padding: 12px; tokens: typography: type.button, radius: layout.radius.6, padding_x: layout.spacing.9, padding_y: layout.spacing.12, surface: colour.surface.inverse; colour states: default.foreground: colour.surface.raised, default.border: colour.surface.raised, default.icon_foreground: colour.surface.raised, hover.foreground: colour.surface.raised, hover.border: colour.cta.default, hover.icon_foreground: colour.surface.raised, pressed.foreground: colour.surface.raised, pressed.border: colour.cta.default, pressed.icon_foreground: colour.surface.raised, focus-visible.outline: colour.surface.raised, disabled.background: colour.greys.fill, disabled.foreground: colour.greys.muted_text, disabled.border: colour.greys.hairline, disabled.icon_foreground: colour.greys.muted_text
- Interaction states: Every enabled control has visible hover and keyboard-focus feedback; focus uses a 3px outline with a 3px offset. Keep primary, secondary, and tertiary roles consistent across clients. Light-surface filled, outline, and soft controls use CTA hover and pressed tokens, with dark text over CTA fills. On dark surfaces, filled controls retain a dark default fill and light label; outline, soft, and glass controls keep light labels and restrained treatments with a subtle CTA tint or border. Button arrows start diagonal and rotate 45 degrees clockwise on hover and keyboard focus so they point horizontally right; text-link arrows stay straight and shift 2px right. The primary arrow badge is 36px. Pressed controls move down 1px. Disabled controls use 48% opacity and do not respond; hover is never the only cue. Respect reduced-motion settings.
- Mobile behaviour: Maintain a 44px minimum touch target. Action groups wrap; at narrow widths, stack. In stacked groups, the primary action fills the row; secondary and text links stay content-width. Never shrink or crop labels.

## Interface
Shared system icon samples illustrate Phosphor Light, not a curated or approved project-specific selection. The guideline Icons section includes an expandable library: search all names, show 48 results at a time and download SVG files. Browsing does not change canonical records. Client-specific personality icons remain separate.
Preview hero: use #FFFFFF text (including metadata labels) on #101E2A, and #FFFFFF for link hover/focus. Photo overlay opacity is 0.61 over the entire image; text contrast must remain at least 4.5:1.
Elevation treatment: existing. Retain the authored elevation requirements.
Elevation shadow: none; hover lift: 0px.
Guideline section navigation uses colour.cta.hover on hover and keyboard focus, with a visible focus outline using colour.cta.default.
Preview interaction timing uses 140ms fast, 240ms standard, and cubic-bezier(0.32,0.72,0.24,1) easing.
- Accessibility: Meet WCAG AA, keep keyboard focus visible, pair colour with words or icons, write useful alt text, and preserve content at 200% text zoom.
- Motion: Use the defined duration and easing tokens for purposeful feedback only, and remove non-essential movement when reduced motion is requested.
Guideline resource links use bold body-small type, a right arrow, colour.cta.default on hover and keyboard focus, and a visible CTA-coloured focus outline. Spacing follows Layout; folder access is governed by the storage provider.
Logo and active Media groups show resource links only when a URL is supplied. Missing destinations are omitted without placeholders and must not be invented. Media examples use the local LKI Media Library; source collections use folder links, not separate reference webpages.

## Client section folders
- Logo: Google Drive Folder (https://drive.google.com/drive/u/0/folders/1u7IjlxBDqnW4YfGsU3o2JV1t0k43orvp)
- Icons: Open the complete icons folder (https://drive.google.com/drive/u/0/folders/13ju_SnzG4Lj-ZuGs4E8r37dXsyQhxw_v)

## Authored explanations and example copy
The following is project context, not an alternative token specification. Structured design settings and technical requirements above are authoritative. Do not infer new colours, geometry, typography or interaction values from explanations; flag contradictory prose for clarification.

### Foundation
- Section title: Foundation
- Section description: Lara Kroeker Interactive brings design direction and technical delivery together. These foundations explain why the work matters, what it aims to achieve, and how to make decisions that give clients clear, lasting results.
- Purpose: To build online experiences on foundations solid enough to outlast the platform they are built on, so clients get design leadership and technical execution from the same person instead of losing time and context between the two.
- Vision: A practice where twenty years of watching platforms come and go plugs directly into whatever tool or AI workflow comes next, without the foundation ever needing to be rebuilt.
- Mission: Closing the gap between strategy and execution on the design side, and between what AI can do and how organizations actually adopt it, one engagement at a time.

### Voice & mood
- Introduction: Voice & mood
- Traits 1 / Trait: Calm
- Traits 2 / Trait: Considered
- Traits 3 / Trait: Clear
- Traits 4 / Trait: Confident
- Traits 5 / Trait: Grounded
- Principles: Direct, thoughtful and approachable. The voice reflects an experienced creative partner who explains things clearly, brings fresh ideas and makes complex work feel manageable. Lead with the useful point. Use plain language and concrete examples so people understand the work and why it matters. Show confidence through specific ideas, recommendations and results. Write in the first person, as a person speaking to another person. Let warmth and personality come through naturally. Keep the language grounded, avoid jargon and hype, and use humour when it fits.

### Audience
- Section title: Audience
- Description: LKI works with agency owners, organization leaders and entrepreneurs who need strategy, design and development to work together. These three profiles help shape the brand’s language, examples and priorities around what each audience needs.
- People 1 / Persona name: Colette
- People 1 / Audience role: Agency owner
- People 1 / Summary: Runs a small creative or digital agency and needs an experienced design-and-build partner who can extend the team without adding another layer of management.
- People 2 / Persona name: Naomi
- People 2 / Audience role: Small organization leader
- People 2 / Summary: Leads a member-based, cultural, or non-profit organization and owns the website alongside everything else. Needs clarity, momentum, and a system the team can maintain.
- People 3 / Persona name: Priya
- People 3 / Audience role: Entrepreneur
- People 3 / Summary: Has an established offer and a growing expert-led business. Needs the brand and website to catch up, with strategy and execution handled as one connected engagement.

### Logo
- Logo definition / explanation: Use the supplied logo files so the brand looks consistent wherever it appears. Keep the original proportions, give the logo room, and choose a version that is easy to see against the background.
- Section title: Logo
- Logo guidance: Use the supplied logo files and keep their colours, proportions and orientation intact. Choose a background with enough contrast for the logo to stand out clearly. Leave clear space on all sides, equal to the height of “lara” in the wordmark or the blue pencil stem in the icon.
- Heading: Wide-format use
- Text: Use the horizontal logo in website headers, footers and documents where there is enough width to keep it clear and legible.
- Logos 1 / Label: Light
- Logos 2 / Label: Dark
- Heading: Small-scale use
- Text: Use the icon for profile images, favicons and app tiles, or in small spaces where the full logo would be difficult to read.
- Logos 1 / Label: Light
- Logos 2 / Label: Dark

### Media
- Media definition / explanation: Choose images that help people connect with the subject, whether that is a person, a place or an idea. Photography and graphics should support the message and make information easier to understand. Use the groups below to find the right starting point.
- Section title: Photography & graphics
- Media sections 1 / Heading: Photos
- Media sections 1 / Description: Photography is used primarily for blog posts and hero images. Images should feel creative, expressive and a little unexpected, using colour, texture, movement and unusual perspectives to spark curiosity. Choose images that connect with the subject or mood of the content, with room for text where needed. Avoid generic business imagery and overly polished stock photos.

### Icons
- Icons definition / explanation: Icons are small visual cues that help people find their way and understand an action. Use them where they make something clearer, not simply to decorate the page.
- Section title: Icons
- Description: LKI uses a system set for everyday interface work and a personality set for expressive moments. Other brands may need only the system set.
- Heading: System icons.
- Description: Phosphor, Light weight, always this suffix. Use these for utility, navigation, and inline interface moments.
- Heading: Personality icons.
- Description: Animated Lordicon icons create motion and emphasis at section level.
- Sample icons 1 / Label: typewriter
- Sample icons 2 / Label: person-conductor
- Sample icons 3 / Label: bug
- Sample icons 4 / Label: firebreather
- Sample icons 5 / Label: fountain
- Sample icons 6 / Label: crystal-ball
- Sample icons 7 / Label: candy-machine
- Sample icons 8 / Label: bee
- Sample icons 9 / Label: tail-whale
- Sample icons 10 / Label: aquarium-bowl
- Sample icons 11 / Label: pen-nib-vector
- Sample icons 12 / Label: frog-head
- Sample icons 13 / Label: donkey-head
- Sample icons 14 / Label: lamb-head
- Sample icons 15 / Label: peacock
- Sample icons 16 / Label: lungs
- Sample icons 17 / Label: send-to-back
- Sample icons 18 / Label: paint-bucket
- Sample icons 19 / Label: cart
- Sample icons 20 / Label: dice-cube
- Sample icons 21 / Label: chess-rook-alt
- Sample icons 22 / Label: chess-knight
- Sample icons 23 / Label: kite
- Sample icons 24 / Label: person-housekeeper
- Sample icons 25 / Label: bricks-toy
- Sample icons 26 / Label: doll
- Sample icons 27 / Label: sofa
- Sample icons 28 / Label: rocking-chair
- Sample icons 29 / Label: key-holder
- Sample icons 30 / Label: air-movement
- Sample icons 31 / Label: broom
- Sample icons 32 / Label: person-balancing
- Sample icons 33 / Label: person-pushups
- Sample icons 34 / Label: person-deadlift
- Sample icons 35 / Label: medal-first-place
- Sample icons 36 / Label: moon-stars
- Sample icons 37 / Label: feeding-chicken
- Sample icons 38 / Label: person-office-work
- Sample icons 39 / Label: shooting-stars
- Sample icons 40 / Label: person-diving
- Sample icons 41 / Label: coffee-stand
- Sample icons 42 / Label: person-slippery-floor
- Sample icons 43 / Label: phone-book
- Sample icons 44 / Label: sumo
- Sample icons 45 / Label: lion-head
- Sample icons 46 / Label: chat
- Sample icons 47 / Label: person-punching
- Sample icons 48 / Label: brochure
- Sample icons 49 / Label: box-template
- Sample icons 50 / Label: t-shirt-mockup
- Sample icons 51 / Label: heat-press-printer
- Sample icons 52 / Label: billboard
- Sample icons 53 / Label: cookies
- Sample icons 54 / Label: fireworks
- Sample icons 55 / Label: pegasus-flying-horse
- Sample icons 56 / Label: ai
- Sample icons 57 / Label: blocks-cubes
- Sample icons 58 / Label: globe
- Sample icons 59 / Label: calendar
- Sample icons 60 / Label: fire
- Sample icons 61 / Label: creepy-cat
- Sample icons 62 / Label: gift-bag
- Sample icons 63 / Label: handbell
- Sample icons 64 / Label: two-gifts
- Sample icons 65 / Label: oven-mitt-heart
- Sample icons 66 / Label: pot-gold
- Sample icons 67 / Label: ladybird
- Sample icons 68 / Label: nestlings
- Sample icons 69 / Label: chick
- Sample icons 70 / Label: trash-bin-full
- Sample icons 71 / Label: roulette-online
- Sample icons 72 / Label: buildings-city
- Sample icons 73 / Label: pencil
- Sample icons 74 / Label: newspaper
- Sample icons 75 / Label: money-bag
- Sample icons 76 / Label: brain
- Sample icons 77 / Label: hands-open-heart
- Sample icons 78 / Label: bathtub-shower
- Sample icons 79 / Label: chocolate-bar
- Sample icons 80 / Label: cow-head
- Sample icons 81 / Label: image-mountain
- Sample icons 82 / Label: burger
- Sample icons 83 / Label: apple
- Sample icons 84 / Label: cherry
- Sample icons 85 / Label: icecream
- Sample icons 86 / Label: meat-chicken
- Sample icons 87 / Label: honey
- Sample icons 88 / Label: mug-tea
- Sample icons 89 / Label: banana
- Sample icons 90 / Label: servers
- Sample icons 91 / Label: glass-water
- Sample icons 92 / Label: camera
- Sample icons 93 / Label: person-stretching
- Sample icons 94 / Label: person-swimming
- Sample icons 95 / Label: sleeping-in-bed-sleepy
- Sample icons 96 / Label: avatar-man-it-developer
- Sample icons 97 / Label: female-customer-service
- Sample icons 98 / Label: avatar-man-handsome
- Sample icons 99 / Label: hand-smartphone
- Sample icons 100 / Label: thumb-up-stars
- Sample icons 101 / Label: color-swatch
- Sample icons 102 / Label: brush-alt
- Sample icons 103 / Label: inkwell
- Sample icons 104 / Label: crayons
- Sample icons 105 / Label: easel
- Sample icons 106 / Label: watercolors
- Sample icons 107 / Label: drawing-compass
- Sample icons 108 / Label: violin
- Sample icons 109 / Label: cloud-settings
- Sample icons 110 / Label: airplane
- Sample icons 111 / Label: person-crosswalk
- Sample icons 112 / Label: big-fish
- Folder link text: Open the complete icons folder

### Colour
- Colour definition / explanation: Colour helps people recognise the brand and understand what they can do next. Use the roles below consistently: surfaces give content room, brand colours establish identity, and action colours show the next step. Choose approved text and background combinations so everything remains easy to read.
- Section title: Colour

### Type
- Type definition / explanation: Typography gives a page its voice and helps people see what matters first. Use the heading and body styles below consistently, with clear levels and enough space for comfortable reading.
- Section title: Typography
- Type scale 1 / Example text: Hero Display
- Type scale 2 / Example text: Page Title
- Type scale 3 / Example text: Section heading
- Type scale 4 / Example text: Prose heading
- Type scale 5 / Example text: Component title
- Type scale 6 / Example text: H5
- Type scale 7 / Example text: Eyebrow
- Type scale 8 / Example text: Button label
- Type scale 9 / Example text: Lead paragraph, for openings and introductions.
- Type scale 10 / Example text: Body copy, the standard reading size used everywhere else.
- Type scale 11 / Example text: Small text, for captions, buttons and list items.
- Type scale 12 / Example text: Annotations

### Layout
- Layout definition / explanation: Layout is how content is arranged on a page. Use the spacing, corner and depth settings below to make related elements feel connected and give each section enough room to be read comfortably.
- Layout Spacing definition / explanation: Spacing is the room inside and between elements. Use the ten-step core below to create a steady rhythm across pages, sections, cards and controls. The desktop and mobile roles show which values to use; avoid one-off gaps.
- Layout Radius definition / explanation: Corner radius controls how rounded an element looks. Use consistent shapes for controls, cards and images. Buttons use the shape specified in their own examples; not every brand needs pill buttons.
- Layout Elevation definition / explanation: Elevation describes how a surface appears to sit above the page, usually through a shadow or a small movement. Keep it quiet, use the documented brand treatment, and add a lift only when it helps explain an interaction. Flat is the default; use borders and shadows only to clarify grouping or interaction.
- Section title: Layout

### Buttons
- Buttons definition / explanation: Buttons help people take the next step. Use the styles below to distinguish the main action from supporting actions and quieter links. Keep labels clear and use the matching light or dark version for the background.
- Section title: Buttons
- Example label: Start a project
- Button examples 1 / Example label: Start a project
- Button examples 2 / Example label: View services
- Button examples 3 / Example label: Explore work
- Button examples 4 / Example label: Book a discovery call
- Button examples 5 / Example label: Read more
- Button examples 6 / Example label: View services

### Interface
- Interface definition / explanation: Use these examples to combine the colours, type and layout rules into familiar cards, links and forms. Reuse the same patterns so people can understand what to read and what to do next.
- Section title: A small set of repeatable rules.
- Category label: Category label
- Card title: One raised surface.
- Card text: White, a light hairline, 14px corners, and only a quiet lift on hover.
- Description: Pink is reserved for interaction, so it remains recognizable wherever a link appears.
- Link text: Read the next step →
- Default field label: Default and focus
- Default field value: Tab here to see focus
- Error field label: Error
- Error field value: name@
- Error message: Enter a complete email address.