Logo
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.
Built to be read by people and AI alike — a plain-text version is at /llms.txt.
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.
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 says something failed, blue says this is information. People read the meaning before they read the design, so these stay conventional rather than expressive. Never use these in a social post, a slide or a document. A red that means “this failed” in the interface means nothing on a poster, and simply looks like a colour that is off-brand.
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 the decision gets made once and then reused.
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.
