LogoFast

Overview

LogoFast is a free AI-powered logo creation platform that removes barriers to professional design by enabling users to generate beautiful logos in seconds without any design experience. The brand serves entrepreneurs, small businesses, and creative professionals who need fast, accessible design solutions. The aesthetic is "Playful Minimalism with Functional Clarity"—a design language that balances approachable, rounded forms with precise geometric controls. The UI evokes confidence and ease: users feel empowered to experiment because the interface is transparent, responsive, and never intimidating. The emotional response is one of liberation: "I can do this myself, and it looks professional."

The brand voice is conversational, encouraging, and direct. LogoFast speaks in short, action-oriented sentences that celebrate speed and simplicity. Vocabulary leans toward empowerment ("Create," "Design," "Export") rather than technical jargon. The tone is optimistic but grounded—never breathless or overselling. Example sentence in brand voice: "Pick an icon, choose a preset, export. Your logo is ready."

Colors

The color system is built on a clean white canvas (surface: #ffffff) with a vibrant golden-yellow primary accent (primary: #ffbe18) that commands attention on CTAs and interactive elements. This primary is the brand's signature—it appears on the Download button, active preset indicators, and all high-priority interactions. The secondary palette introduces a soft, playful pink (secondary: #f9dcf8) used for preset buttons and supporting UI elements, creating visual variety without chaos. A muted purple-gray tertiary (tertiary: #9c92ac) provides depth for secondary text and disabled states. The surface stack progresses from pure white (#ffffff) through subtle grays (#f5f5f5, #e9e9f5, #d4d4d4) to support layering and visual hierarchy. On-surface text is a near-black (#303030) for maximum reada

Typography

The type system pairs Space Grotesk (geometric, modern, weights 300–700) for headings and UI labels with Bricolage Grotesque (warm, approachable) for body text. This pairing communicates both precision and friendliness: Space Grotesk's tight letterSpacing (-0.02em on display, -0.01em on headlines) conveys efficiency and control, while Bricolage's looser tracking (0em) and generous lineHeight (28px on body-lg) ensures readability and approachability. Display text (56px, 700 weight, -0.02em letterSpacing) is reserved for hero moments and major section breaks. Headline-lg (36px, 700 weight) anchors feature sections. Body-md (16px, 400 weight, 24px lineHeight) is the workhorse for descriptions and instructional text. Labels (14px, 600 weight, Space Grotesk) are used for form fields, buttons, a

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing the interface to scale gracefully from mobile to desktop. The primary workspace (logo editor) occupies the center, with a left sidebar for controls (icon selection, size, rotation, border, color) and a right sidebar for presets and secondary actions. White-space is generous: the md spacing token (24px) separates major sections, lg spacing (40px) creates breathing room between the editor and sidebars, and sm spacing (12px) groups related controls. The gutter (24px) is applied consistently to container edges. This rhythm prevents cognitive overload and makes the interface feel spacious rather than cramped. The container-max of 1280px ensures that on ultra-wide displays, the UI doesn't stretch uncomfortably; instead,

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surfaces rather than dramatic depth effects. Level 1 (Base): the white background (surface: #ffffff) with no shadow. Level 2 (Cards and inputs): elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) creates a barely-perceptible lift, signaling interactivity without visual noise. Level 3 (Hovered cards, active buttons): elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) adds depth on interaction, providing tactile feedback. Level 4 (Modals and dropdowns): elevation.lg (1px 1px 14px 1px rgba(0, 0, 0, 0.25)) creates clear separation from the backgrou

Shapes

The shape philosophy is "Soft-Technical Pragmatism"—rounded corners are used strategically to soften the interface and invite interaction, but never so much that the design feels childish or loses precision. Buttons use rounded.sm (0.25rem / 4px) for a subtle, professional finish that still feels approachable. Cards and modals use rounded.lg (1rem / 16px) to create clear visual containers without appearing overly playful. Input fields use rounded.DEFAULT (0.5rem / 8px) as a middle ground—enough rounding to feel modern, but tight enough to maintain focus. Preset buttons and badges use rounded.f

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary yellow (#ffbe18) with near-black text (#1a1a1a) for maximum contrast and visibility. Padding is 12px 24px (md horizontal, sm vertical) with a height of 48px to ensure touch-friendly targets. On hover, the background shifts to primary-fixed-dim (#ffbe18) and the shadow elevates to elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)), providing clear feedback. The active state uses primary-container (#ffd00b) with a reduced shadow (elevation.sm) to indicate the button is pressed. All button transitions occur at 160ms ease. The button-secondary component uses a transparent background with a 2px border in secondary pink (#f9dcf8) and rounded.full (9999px) for a pill shape. On hover, the backgr

Do's and Don'ts

**Do**

• Do use primary yellow (#ffbe18) exclusively for high-priority CTAs and active states—it's the brand's signature and must remain distinctive.
• Do apply 160ms ease transitions to all interactive elements (buttons, cards, inputs) for consistent, predictable feedback.
• Do maintain the 24px gutter on all container edges and use md spacing (24px) to separate major sections—this rhythm is core to the brand's approachability.
• Do use Space Grotesk (600+ weight) for all interactive labels and buttons to signal clickability; reserve Bricolage Grotesque for body text only.
• Do layer shadows according to the elevation scale (sm/md/lg) to create clear visual hierarchy without visual noise.
• Do use rounded.full (9999px) for preset buttons and badges to create visual distinction from rectangular containers.

**Don't**

• Don't use colors other than primary (#ffbe18) for main CTAs—secondary pink (#f9dcf8) is for supporting elements only, never for primary actions.
• Don't apply rounding greater than rounded.lg (1rem / 16px) to cards or modals; excessive rounding obscures the functional clarity the brand depends on.
• Don't use shadows stronger than elevation.lg (1px 1px 14px 1px rgba(0, 0, 0, 0.25)) or the interface will feel heavy and dated.
• Don't mix Space Grotesk and Bricolage Grotesque within a single text element; maintain clear separation between UI labels (Space Grotesk) and body copy (Bricolage).
• Don't use on-surface text (#303030) at less than 16px font-size without increasing line-height or letter-spacing; readability is non-negotiable.
• Don't apply transitions longer than 160ms ease to interactive elements; faster feedback feels more responsive and reduces perceived latency.