Conceptzilla

Overview

Conceptzilla is a rapid-fire design studio that transforms business ideas into polished visual systems within one week. The brand embodies "Architectural Minimalism"—a design philosophy that strips away ornament to reveal essential structure, using precision typography, stark contrast, and deliberate whitespace to communicate confidence and clarity. The aesthetic is deliberately austere: a near-white canvas (#f9f9f9) anchored by deep charcoal (#121214) and punctuated by strategic accent colors (tertiary pink #eb4f75 for error states and highlights). This creates an environment where ideas feel grounded, professional, and ready for execution. The emotional response is one of calm authority—users sense that complex design problems have been solved with rigor, not decoration.

The brand voice is direct, unpretentious, and action-oriented. Conceptzilla speaks in the language of makers and founders: concrete, outcome-focused, never breathless. Vocabulary patterns favor active verbs ("transform," "execute," "launch") over adjectives. The tone assumes the audience is busy, intelligent, and skeptical of hype. Example sentence in brand voice: "We help companies make lasting impact like we did with hundreds of startups and successful products."

Colors

The color system is built on a monochromatic foundation with surgical accent placement. Primary (#121214) is the deep charcoal used for all body text, buttons, and interactive elements—it is the workhorse color that establishes authority and legibility at 17px body size. Surface (#f9f9f9) is the near-white canvas that provides breathing room; it is not pure white (#ffffff) because pure white creates eye strain at scale and reads as cold. The surface stack (surface-dim #f2f2f2, surface-container #f2f2f2, surface-container-high #e7e7e7) creates subtle depth through incremental gray shifts—each step is approximately 5–7% darker, allowing cards and containers to separate from the background without introducing new hues. Outline (#919191) and outline-variant (#cccccc) are used for borders and d

Typography

The type system uses a single typeface family—Suisseintl (with Arial and sans-serif as fallbacks)—to reinforce the minimalist aesthetic. Display (84px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and sets the tone of scale and restraint; the 400 weight (book) is intentionally light, avoiding the heaviness of 700 and creating an airy, confident presence. Headline-lg (56px) and headline-md (40px) follow the same light weight, maintaining visual consistency across heading levels. Body-md (17px, 400 weight, 26px line-height) is the primary reading size and is set with generous line-height (1.53x) to ensure comfort at sustained reading lengths; the 17px size is slightly larger than the web default (16px) to accommodate the light weight and improve accessibility. Label-md

Layout

The page layout uses a fluid 12-column grid with a max-width of 1280px (container-max-width: 1280px) to accommodate both desktop and tablet viewports. The grid is not rigid; content often spans fewer columns to create asymmetry and visual interest (e.g., hero headline may span 8 columns, leaving 4 columns of whitespace on the right). Spacing follows a semantic scale: lg spacing (40px) is used for section separation (e.g., between hero and case studies), md spacing (24px) is used for component padding and moderate vertical rhythm, and sm spacing (12px) is used for tight groupings (e.g., label-to-input distance). The gutter (24px) is applied consistently to left/right margins on all sections, creating a safe zone that prevents content from touching the viewport edge. Whitespace is treated as

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color shifts. The elevation system uses three levels: Level 1 (Base) has no shadow and sits flush with the surface (#f9f9f9). Level 2 (Standard Card) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffuse shadow that suggests the card is 8–12px above the base. Level 3 (Elevated/Modals) uses a compound shadow: 0 6px 60px -4px rgba(0, 0, 0, 0.02), 0 4px 40px -4px rgba(0, 0, 0, 0.04), 0 2px 24px -2px rgba(0, 0, 0, 0.04)—this creates a layered effect where the shadow spreads across multiple distances, suggesting s

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used to soften the severity of the minimalist aesthetic without introducing organic curves. The rounded scale is: sm (4px) for small interactive elements and tight groupings, DEFAULT (8px) for form inputs and secondary components, md (12px) for medium containers, lg (16px) for buttons and primary cards, and xl (24px) for large modals and hero sections. Buttons use lg (16px) to create a welcoming, approachable feel despite the dark color; inputs use DEFAULT (8px) to maintain a compact, functional appearance. Cards use lg (16px) to mat

Components

Action Elements Buttons are the primary interactive element and use a two-layer animation system. Button-primary (background: #121214, text: #ffffff, height: 48px, padding: 12px 24px, rounded: 16px) is the main CTA and uses box-shadow: 0 8px 11px -8px rgba(35, 35, 35, 0.30) at rest. On hover, the shadow is removed and the button translates up 2px (transform: translateY(-2px)), creating a lift effect over 300ms (transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)). The button text also animates: the primary text translates up 1rem and becomes transparent, while a secondary "glow" layer (filter: blur(5px), opacity: 0 at rest) fades in to full opacity, creating a sense of energy and motion. Button-secondary uses a transparent background with a 1px border (border: 1px solid #cccccc) and the

Do's and Don'ts

**Do**

• Do use the full 84px display size for hero headlines—the light 400 weight needs the scale to command attention.
• Do apply lg spacing (40px) between major sections to create breathing room and visual rhythm.
• Do use primary (#121214) for all body text and interactive elements—it is the workhorse color and ensures legibility.
• Do animate button hovers with the lift effect (translateY(-2px)) and shadow removal to create tactile feedback.
• Do use tertiary (#eb4f75) exclusively for errors and high-priority alerts—its saturation ensures urgency without playfulness.

**Don't**

• Don't use pure white (#ffffff) as the background—use surface (#f9f9f9) to reduce eye strain and create subtle depth.
• Don't mix typeface families—Suisseintl is the only typeface; Arial and sans-serif are fallbacks only.
• Don't apply rounded corners larger than 24px (xl)—anything larger begins to feel organic and conflicts with the minimalist aesthetic.
• Don't use secondary (#3898ec) or tertiary (#eb4f75) as primary colors—they are accents and should appear sparingly.
• Don't remove shadows entirely on hover—use the shadow removal + lift effect together to create a cohesive interaction model.