What is Constraint-Based Design?
Traditional vector editors (like Illustrator or Figma) give you a blank artboard and infinite choices. While powerful, this freedom often leads to misalignment, clashing fonts, unbalanced spacing, and color schemes that fail contrast checks.
logoname takes a different approach: **Constraint-Based Design**. We restrict the editor's options to curated, mathematically balanced choices. By enforcing structured grids, limited typeface selections, preset alignment ratios, and verified color vibes, we ensure it's virtually impossible to create a poorly designed logo.
Traditional Editors
Infinite canvas, manual alignment, uncurated typography, easy to misalign, no real-time rendering on websites, slow export workflow.
logoname Engine
Preset grids, automatic spacing limits, curated font stacks, live interactive mockups, instant clean SVG export.
1. Curated Typography Scale
Typography is the voice of your brand. We offer five distinct font settings, each chosen for its visual weight, terminal geometry, and performance on modern screens.
The Font Stack Breakdown
| Font Option | Ideal Category | Visual Vibe |
|---|---|---|
| Geist Sans | SaaS / Developer Platforms | Minimalist, geometric, clean terminal angles. Designed for technical clarity. |
| Playfair Display | Luxury / Editorial / Finance | Elegant, high-contrast serifs, traditional stability, and premium aesthetics. |
| Geist Mono | API / Web3 / Developer Tools | Tabular alignment, monospaced layout, feels raw, functional, and tech-native. |
| Syne | AI / Web Agencies / Creative | Modern, expressive startup geometric shapes, wide letterforms that stand out. |
| Outfit | EdTech / Consumer Apps / Kids | Soft, rounded geometric terminals. Inviting, friendly, and approachable. |
2. Color Contrast & Accessibility
A common mistake in logo design is ignoring contrast. If your logo has a soft blue icon and a grey text name, it will become invisible when integrated into a dark header or printed in grayscale.
Our **Brand Vibes** restrict colors to high-contrast WCAG-compliant pairs by default. When building your logo:
- Keep it Transparent: In mockup configurations, our engine removes the solid background color of your logo. This is crucial for checking how the logo merges with different website header and footer colors.
- Check Contrast: Always test how your logo looks on pure black (zinc-950) vs pure white. A great logo uses high-contrast fills for the icon and typography so that it remains visible on all backdrops.
3. Spacing, Grids & Mathematical Snap
The logo canvas uses a coordinated grid system. Spacing (the gap slider) operates on a modular scale (typically 1px increments snapped to an underlying 8px grid).
- Alignment Snapping: The layout modes automatically align the center points of the icon and text fields. In horizontal mode, elements align midpoints vertically. In vertical mode, they align midpoints horizontally.
- Icon and Text Proportions: The editor constrains sizes. The brand name size is locked within a 16px to 80px range, and icon sizes are restricted between 20px and 120px to prevent elements from overwhelming each other.
Why Vector (.svg) is King
All assets in logoname are generated as pure vectors. Unlike raster images (PNG, JPEG), which store color data in fixed pixels, vector files store mathematical instructions (lines, curves, circles, text anchors).
"A vector logo is not just small in size; it's infinite in capacity."
This mathematical structure means:
- Zero Pixelation: Your logo will scale perfectly from a 16px favicon up to a high-resolution stadium billboard.
- Editability: The SVG files generated contain clean, semantic code that you can import into Figma or edit directly in VS Code.
- Maximum SEO Performance: Inline SVGs reduce page request sizes to virtually zero, helping websites hit 100/100 performance scores on Google Lighthouse.