Logo
Two versions.
The LKI logo system includes a full wordmark and a compact icon mark, each supplied for light and dark backgrounds. Use the version with enough contrast and clear space to remain immediately recognizable.
The source of truth for the Lara Kroeker Interactive visual identity — colour, type, logos, photography, icons, spacing, and the rules around them. Follow these whenever you create or update anything for LKI.
Purpose
To build online experiences on foundations solid enough to outlast the platform they’re 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.
The LKI logo system includes a full wordmark and a compact icon mark, each supplied for light and dark backgrounds. Use the version with enough contrast and clear space to remain immediately recognizable.
Photography should feel observed, specific, and editorial rather than staged or stock-like. This selection is drawn from real LKI work and published imagery, so the page reflects the visual direction in use.
LKI uses two icon sets. Animated Lordicon icons create motion and emphasis at section level; light-weight Phosphor icons handle static utility, navigation, and inline interface moments.
Phosphor, Light weight, always this suffix. A sample below, 1,412 in the full set.
chat-centered-dots
calendar-blank
camera
cloud-arrow-down
file-archive
folder-dashed
gear
globe-hemisphere-east
heart
house
image-broken
lightbulb-filament
lightning-a
lock-key
map-pin-area
moon
music-notes
paint-brush-broad
The backgrounds every layout sits on. Pages, cards, and dark sections. Nothing outside these three is used as a background.
The brand colours. Used for accents, highlights, and anything that should read as the brand rather than as interface.
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.
One colour in three states. Buttons, links, and anything asking to be clicked. Never used decoratively, so a person can trust that this colour means action.
Used sparingly, for illustration and editorial work. Not part of the everyday interface, and not required for a layout to feel finished. Never use these in a social post, a slide or a document. They belong inside the product, and off-site they read as a different brand.
Colours that carry meaning rather than style. Red signals failure; blue signals information. Keep them conventional and reserve them for interfaces. Never use semantic colours in social posts, slides, or documents.
Lead paragraph, for openings and introductions.
Body copy, the standard reading size used everywhere else.
Small text, for captions, buttons and list items.
Editorial accent
Sentence case everywhere — headings, subheadings, buttons, body copy. Capitalise the first word and proper nouns, nothing else.
Sentence case — use this
Great design shouldn’t break in the build.
A few things built recently.
Book a discovery call
Title Case — not used
The Single-Operator Fix
Book A Discovery Call
Capitalising every major word is not part of this system, in any context.
ALL CAPS — a treatment, not a way of writing
Design and development
The caps above come from CSS (text-transform: uppercase plus letter-spacing) and are used on eyebrow labels only. The text itself is written in sentence case. Never type words in capitals, and never set a heading, a button or a sentence in caps.
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.
The space between elements. Use the defined scale rather than inventing values between the steps. Smaller values control component rhythm; larger values separate content groups and sections.
The space between elements. Use the defined scale rather than inventing values between the steps. Smaller values control component rhythm; larger values separate content groups and sections.
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.
The visual difference between surfaces. Flat is the default; borders and shadows are used only where they clarify hierarchy, grouping, or interaction.
The visual difference between surfaces. Flat is the default; borders and shadows are used only where they clarify hierarchy, grouping, or interaction.
Three levels of emphasis: a filled pill for the main action, an outline for the secondary one, and a ghost link for everything else. Aim for one filled button per view. Hover fills with the CTA pink and pressing deepens it, so the rollover reads the same everywhere. Labels on that pink stay dark rather than white, which is a contrast requirement and not a preference.
