Brand Guidelines
2025
Concept
Naming things is hard. "Maddy" or "Maddie"? Both are valid, neither is wrong, and honestly who cares. So we made it a toggle. Pick whichever you want. Switch whenever.
It animates nicely. Satisfying to click. Gives us something to play with that isn't just "look, another gradient." The brand gets a built-in interactive element, which is more than most companies can say about their logo.
Oh and the brandmark? We flipped the LiMSight one upside down and gave it a new coat of paint. It kind of looks like a person with four arms now, so we're calling it "the people" to represent the company behind the product. Is that a stretch? Maybe. But here we are.
Design Inspiration
We had to use "Madd(y|ie)" in the logo. Have you tried setting that in display type? It looks terrible. And there's like three ways to represent "or" visually, like what, a literal OR gate? The toggle was basically the only option that didn't look bad and I guess design do be like that some times.
Logo
Maintain breathing room equal to the icon height on all sides. This ensures the logo remains legible and impactful.
The Icon
In Motion
Approved Backgrounds
White
Light Gray
Approved Light Gradients
Lavender (PRIMARY)
Dark Lavender
Treated Photos & Textures
Non-Distracting ELEMENTS
Approved Dark Gradients
Transparent Glass
Avoid
Secondary colors
Linear gradients
Unedited photos
Distorted
Effects
Busy backgrounds
Wordmark alone
Rearranged
Mixed colors
Brand
Lavender is our workhorse. Use it for backgrounds, CTAs, buttons, links, and anywhere the brand needs to show up boldly.
Indigo, Blue, and Cyan appear in gradients, data viz, or adding visual variety. They complement Lavender, never compete with it.
Supporting colors shouldn't appear solo as backgrounds or primary action colors. They work best in gradients or as accents alongside Lavender.
OKLCH color space for perceptual uniformity. Brand colors at 54% lightness for consistent vibrancy across hues.
Lavender
Primary
#9854ff RGB 152, 84, 255 HSL 264° 100% 66% OKLCH 0.54 0.25 305 Indigo
Supporting
#5e42fe RGB 94, 66, 254 HSL 249° 99% 63% OKLCH 0.54 0.26 280 Blue
Supporting
#007dff RGB 0, 125, 255 HSL 211° 100% 50% OKLCH 0.54 0.20 255 Cyan
Supporting
#0891b2 RGB 8, 145, 178 HSL 192° 91% 36% OKLCH 0.54 0.15 210 Dark Lavender
Dark / Text
#201844 RGB 32, 24, 68 HSL 251° 48% 18% OKLCH 0.22 0.119 297 White
Background
#ffffff RGB 255, 255, 255 HSL 0° 0% 100% OKLCH 1.00 0.00 0 Color System
Keep it simple. Primaries sit at 54% lightness - that's where AAA contrast lives on white. For hover states, +/- 4%.
OKLCH makes the full spectrum available if you need it. Same chroma, same hue, just slide the lightness. If you venture lighter, aim for at least AA contrast.
Dark Lavender plays by different rules - its base lives at 22%.
Atmosphere
We don't use hard linear gradients. Instead, brand colors become soft, blurred shapes that create depth and atmosphere.
Large blurred shapes at low opacity create an aurora-like effect. Circles, ovals, stretched blobs. Be creative with the forms, but keep them soft and diffused.
Use 2, 3, or 4 colors. There's no strict rule. Layer them, let them overlap and blend naturally. The key is subtlety and depth, not precision.
Properties
circles, ovals, blobs, lines, etc 80-150px 8-15% (watch text) see brand palette Shown Here
Visual Language
Personal & Authentic
Sourced from archives, libraries, and artists. Hand-drawn illustrations, vintage scientific diagrams, organic textures. Used when conveying warmth, humanity, and the story behind the technology.
About pages · Blog posts · Team content
Atmospheric & Subtle
Photography desaturated and blended over brand colors. Creates depth and atmosphere without competing with content. The photo becomes texture, not subject.
Hero backgrounds · Section dividers · Motion
Digital & Technical
Clean geometric shapes, solid color fills, precise outlines. Minimal iconography with consistent stroke weights. Used when demonstrating capability and precision.
Product UI · Feature diagrams · CTAs
Transformed work is yours, but redistributing stock photos usually requires an active subscription. Public domain and Creative Commons are great, just verify the source.
Specimens
Primary
Aa
Display / 500
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Secondary
Aa
Body / 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789