CraftGenie

Overview

CraftGenie is an AI-powered software development platform that democratizes application creation through conversational interfaces and intelligent code synthesis. Serving developers, entrepreneurs, and technical teams who value speed without sacrificing quality, the brand embodies a philosophy of "Intelligent Simplicity"—where complex engineering becomes approachable through natural language. The visual language is clean, professional, and trust-forward: a deep navy-blue (#2253ad) primary accent signals reliability and technical competence, while generous white space and a refined sans-serif palette (Inter) convey clarity and precision. The emotional response is one of empowerment: users feel capable, guided, and in control of their creative vision.

The brand voice is direct, confident, and human-centered. CraftGenie speaks in active verbs and concrete outcomes—not "leverage AI capabilities" but "build your app in minutes." The vocabulary emphasizes agency ("your vision," "you design," "you deploy") and removes friction language ("no complexity, no friction"). Example sentence in brand voice: "Describe your idea in plain English, and CraftGenie handles the architecture, testing, and deployment—so you ship faster."

Colors

The color system is anchored in a professional, trust-driven palette optimized for SaaS and developer tools. Primary (#2253ad) is a medium-saturation cobalt blue used exclusively on primary CTAs ("Start Building"), active navigation states, and focus indicators—it commands attention without aggression. Secondary (#436095) is a deeper slate-blue reserved for supporting UI elements, secondary buttons, and data visualization accents. Tertiary (#2e4266) is a near-navy used sparingly for tertiary actions and status badges. The surface stack is built on pure white (#ffffff) with carefully calibrated grays: surface-container-low (#f3f5f8) for input backgrounds, surface-container (#eff2f7) for card containers, and surface-container-highest (#e0e5f0) for hover states. On-surface text is always #051

Typography

The type system uses Inter exclusively for UI and body copy, paired with Fragment Mono for code blocks and technical content. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (44px, 700, -0.015em) is used for major section titles. Body-lg (18px, 400, 0.005em) and Body-md (16px, 400, 0.01em) form the reading hierarchy, with generous 28px and 24px line-heights respectively to ensure legibility on light backgrounds. Label-md (14px, 600, 0.02em) is applied to button text and UI labels, while Label-sm (12px, 500, 0.03em) handles badges and micro-copy. The weight progression (400 for body, 500–600 for labels, 700 for headlines) creates clear visual hierarchy without relying on color alone. On small labels over busy backgrounds or input fiel

Layout

The layout system uses a 12-column fluid grid with a max-width of 1290px, centered on the viewport. The gutter is consistently 24px (md spacing), applied between columns and as the outer margin on desktop. Container sections use lg spacing (40px) for vertical rhythm between major content blocks (hero, features, testimonials, footer). The hero section occupies full viewport height with 64px (xl spacing) padding top/bottom, creating breathing room around the headline and CTAs. Cards and content containers use md spacing (24px) for internal padding, with 12px (sm spacing) between nested elements. Input fields and form elements maintain 15px vertical padding with 16px horizontal padding, creating a 44px total height for thumb-friendly mobile interaction. The system prioritizes white space as a

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses four levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and hover states on flat elements; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and buttons; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating panels; and xl (0 3px 8px rgba(0, 0, 0, 0.15)) for the primary CTA button. Buttons transition from md to lg shadow on hover, signaling interactivity without jarring movement. Cards use md shadow by default and lg on hover, creating a subtle lift

Shapes

The shape philosophy is "Geometric Warmth"—rounded corners are used strategically to soften technical interfaces without sacrificing precision. Buttons and primary CTAs use lg radius (1rem / 16px), creating a pill-like, approachable form that invites interaction. Input fields and form controls use md radius (0.75rem / 12px), balancing friendliness with functional clarity. Cards and containers use xl radius (1.5rem / 24px) to create visual separation and a premium feel. Smaller UI elements like badges and tags use full radius (9999px) for maximum softness. The rationale: lg and xl radii on inte

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #2253ad background with white text, 19px vertical and 32px horizontal padding, lg radius (16px), and md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.08)). On hover, the background darkens to #1a3a7a and shadow elevates to lg (0 8px 24px rgba(0, 0, 0, 0.12)), with a 200ms ease-out transition. On active/pressed, the background becomes #0f2654 with no shadow lift. The secondary button (button-secondary) mirrors the primary in size and padding but uses white background with a 1px outline-variant border and primary text color; on hover, the background shifts to surface-container-low (#f3f5f8) and the border becomes outline (#6d7b95). Ghost buttons (button-ghost) have transparent background

Do's and Don'ts

**Do**

• Do use primary blue (#2253ad) exclusively on primary CTAs and active states—it's the brand's signature accent and must remain distinctive.
• Do maintain md spacing (24px) as the default gutter between sections; use lg (40px) only for major section breaks to avoid visual fragmentation.
• Do apply the 2px focus ring (rgba(34, 83, 173, 0.1)) to all interactive elements for WCAG AA compliance and consistent keyboard navigation feedback.
• Do use Inter 700 weight for all headlines (Display, Headline-lg, Headline-md) and 600 weight for labels and button text to create clear visual hierarchy.
• Do pair rounded corners (lg on buttons, xl on cards) with subtle shadows (md elevation) to create a premium, approachable aesthetic.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs—primary blue must remain the exclusive accent for the most important user actions.
• Don't apply shadows stronger than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) to any element; the system prioritizes subtlety and clarity over drama.
• Don't use Fragment Mono for body copy or UI labels—it's reserved for code blocks and technical content only; Inter is the universal UI typeface.
• Don't reduce padding below sm (12px) on interactive elements or md (24px) on containers; white space is a design material and must be respected.
• Don't animate border-radius or use variable radii across states—shapes remain constant to maintain visual stability and predictability.