ProjectOne

Overview

ProjectOne embodies a philosophy of **Decisive Minimalism**—a design aesthetic that rejects complexity in favor of clarity, confidence, and directness. The brand serves small business owners who are exhausted by freelancer delays, AI-generated mediocrity, and endless design revisions. The UI communicates through bold typography (Satoshi at 76px, 900 weight), a signature neon-lime accent (#c6fd50) that pops against a warm neutral palette, and deliberate use of negative space. Every interaction feels intentional: buttons have hard shadows (4px 4px offset in pure black), cards sit slightly elevated, and the color story is monochromatic with one electric accent—like a minimalist poster that refuses to apologize. The emotional response is one of relief: "Finally, someone who gets it." The brand personality is no-nonsense, Canadian-direct, and slightly irreverent. Voice: conversational but authoritative, avoiding jargon and corporate platitudes. Vocabulary favors action verbs and specificity: "live in two weeks," "one price," "no freelancers," "no AI." Example sentence in brand voice: "We build your site. You launch it. No meetings about meetings."

Colors

The color system is built on a **Warm Neutral Foundation with Electric Accent** model. The primary palette consists of warm grays and off-whites (#fafafa surface, #f2f2f2 surface-dim, #131311 on-surface) that create a calm, professional backdrop—never sterile, always approachable. The signature primary color is #c6fd50, a neon-lime that appears on all primary CTAs, focus states, and brand moments. This accent is used sparingly but decisively: it must never be diluted or desaturated. Secondary color is #2a2a27, a near-black used for secondary buttons, navigation, and text hierarchy. Tertiary accent #8dc5c5 (muted teal) provides a softer supporting color for secondary UI elements and status indicators. Error states use #d32f2f for critical warnings. The surface stack follows Material 3 conve

Typography

The type system pairs **Satoshi** (geometric, bold, 700–900 weights) for headlines and display text with **Inter** (neutral, highly legible, 400–600 weights) for body and UI labels. This pairing creates visual hierarchy through personality contrast: Satoshi's geometric warmth draws attention, while Inter's neutrality ensures readability. Display (76px, 900 weight, -0.03em letter-spacing) is reserved for hero headlines like "Your Website, Handled." Headline-lg (48px, 700 weight) anchors section titles. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and ensures comfortable reading at arm's length. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and UI labels, with tight tracking to reinforce hierarchy. All headlines use negative letter-

Layout

The page layout uses a **12-column grid with 1280px max-width**, centered with symmetric gutters of 24px on desktop. Sections are separated by 40px (lg spacing) vertically, creating a rhythm that feels spacious without being wasteful. The hero section occupies full-width with a light background (#fafafa), establishing visual calm before introducing the brand accent. Cards and containers use 24px (md spacing) internal padding and 10px border-radius (DEFAULT rounded), creating a soft-technical feel that bridges minimalism and approachability. Negative space is treated as a design element: whitespace around CTAs is generous (40px+ margins), forcing focus. Container max-width is 1280px to prevent text lines from becoming uncomfortably long; body text rarely exceeds 65 characters per line. The

Elevation & Depth

Depth in ProjectOne is achieved through **Hard-Shadow Architectural Layering**, not blur or soft gradients. The elevation system uses three distinct levels: Level 1 (Base) has no shadow—flat against the surface. Level 2 (Standard Card/Raised) uses a hard offset shadow: box-shadow: 4px 4px 0px 0px rgba(19, 19, 17, 1), creating a 4px displacement in both x and y axes with zero blur. This shadow is always pure black at full opacity, reinforcing the decisive aesthetic. Level 3 (Elevated/Hover) uses the same 4px offset but reduces opacity to rgba(19, 19, 17, 0.6), creating a subtle depth shift on i

Shapes

The shape philosophy is **Soft-Technical Pragmatism**: rounded corners are used strategically to soften the geometric grid without sacrificing clarity. Border-radius follows a tiered scale: sm (5px) for small inputs and tight UI elements, DEFAULT (10px) for buttons and standard cards, md (16px) for larger cards and containers, lg (20px) for hero sections and prominent surfaces, xl (30px) for secondary buttons and softer CTAs, and full (9999px) for pill-shaped badges and circular elements. Buttons use DEFAULT (10px) for primary CTAs and xl (30px) for secondary buttons, creating visual distincti

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses #c6fd50 background, black text, 10px border-radius, 12px vertical / 24px horizontal padding, and a hard shadow (4px 4px 0px rgba(19, 19, 17, 1)). On hover, the background shifts to #b9b9b7 (primary-fixed-dim) and shadow opacity reduces to 0.8, creating a subtle depth shift. The transition is instant (0ms) or 80ms max to feel responsive. **button-secondary** uses #2a2a27 background, white text, 30px border-radius (xl), and no shadow—a softer, secondary action. On hover, background darkens to #41413f. **button-ghost** is transparent with a 2px solid border in on-surface color (#131311), used for tertiary actions like "Learn More." All button text uses label-md typography (14px, 600 weight, 0.01em letter-

Do's and Don'ts

**Do**

• Do use the neon-lime accent (#c6fd50) exclusively on interactive elements—CTAs, focus states, badges—never as a background for body text or large surfaces.
• Do apply hard shadows (4px 4px offset, no blur) to cards and buttons to reinforce the decisive, architectural aesthetic; never use soft blur-based shadows.
• Do pair Satoshi (bold, geometric) with Inter (neutral, readable) to create visual hierarchy through personality contrast, not just size.
• Do maintain generous negative space (40px+ margins) around CTAs and key content to force focus and prevent visual clutter.
• Do use the full Material 3 color token stack (surface-container-lowest through surface-container-highest) to create subtle depth without relying on shadows alone.
• Do keep button transitions instant (0ms) or very fast (80ms max) to reinforce the no-nonsense, responsive brand personality.

**Don't**

• Don't use the primary accent (#c6fd50) as a background for body text or large surface areas; it is reserved for interactive elements and accents only.
• Don't apply soft, blurred shadows (box-shadow: 0 8px 32px) or atmospheric depth effects; the brand rejects glassmorphism and favors hard-edged clarity.
• Don't mix rounded corners arbitrarily; use the tiered scale (5px, 10px, 16px, 20px, 30px) consistently to maintain visual coherence.
• Don't use system fonts (sans-serif, -apple-system) in final output; always load Satoshi and Inter via @font-face to ensure brand consistency.
• Don't apply letter-spacing >0.05em on body text; it reduces legibility. Reserve tight letter-spacing (-0.02em to -0.03em) for headlines only.
• Don't create hover states with color shifts alone; combine background color changes with shadow opacity or scale adjustments (e.g., 4px 4px shadow → 2px 2px on hover) for tactile feedback.