Prompt Techies

Overview

Prompt Techies embodies a **Neon-Technical Futurism** aesthetic—a design language that merges electric cyan (#00c8ff) and cobalt blue (#004bff) accents with a clean, light-neutral canvas to communicate cutting-edge AI innovation and developer-first engineering. The brand serves ambitious students, startups, and enterprises seeking scalable, intelligent technology solutions. The visual identity evokes precision, energy, and forward momentum through bold color contrasts, geometric line work, and a minimalist interface hierarchy that prioritizes clarity over decoration.

The tone is direct, confident, and technically grounded—never breathless or hyperbolic. Prompt Techies speaks to builders and makers: the language is action-oriented, specific, and outcome-focused. Example: "Transform ambitious ideas into enterprise-ready digital products" (not "Unlock your potential"). The brand personality balances technical credibility with approachability; it's expert-level but not gatekeeping, innovative but not experimental.

Colors

The color system is built on a **light-neutral foundation with electric accents**. The primary color, Cobalt Blue (#004bff), is the signature CTA and interactive accent—used on buttons, links, focus states, and brand-critical UI elements. It commands attention without overwhelming the interface. Secondary, Cyan (#00c8ff), provides a complementary accent for highlights, hover states, and secondary CTAs, creating visual rhythm and depth. Tertiary, Golden Yellow (#ffe07d) and Warm Amber (#f5af19), are reserved for badges, status indicators, and accent highlights that require warm energy.

Surface colors follow a light-first strategy: pure white (#ffffff) as the primary surface, with carefully calibrated grays (#f5f5f5 to #cccccc) for container hierarchy and depth. On-surface text is near-blac

Typography

The type system uses **Geist** as the primary typeface—a modern, geometric sans-serif that communicates technical precision and contemporary design sensibility. Display (72px, 400 weight, -0.02em tracking) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) structures major sections; Body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at standard viewing distances. Label-md (14px, 700 weight, 0.05em tracking) is applied to buttons and interactive labels to signal actionability. The hierarchy is intentionally flat—only 3–4 distinct sizes are used per page to avoid visual fragmentation. On small labels over busy backgrounds (e.g., badges on gradient overlays), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to ensure legibility. Letter-spacing

Layout

The layout uses a **12-column fluid grid** with a max-width of 1400px, centered on viewport. Sections use lg spacing (40px) for vertical rhythm between major content blocks; gutter (24px) is applied to horizontal padding on mobile and tablet, increasing to 40px on desktop. The hero section occupies 100vh with a dark gradient background (#0a0a0a to #0c0c0e) overlaid with animated neon line work, creating visual depth and energy. Content sections below use white backgrounds with subtle container shadows (0 4px 12px rgba(0, 0, 0, 0.08)) to separate layers. Cards and components use md spacing (24px) internally; list items use sm spacing (12px) for compact density. Whitespace is generous but purposeful—never more than 64px (xl) between major sections, never less than 24px within components. Con

Elevation & Depth

Depth is conveyed through **layered shadows and subtle surface transitions** rather than dramatic elevation. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, modals) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that suggests gentle lift. Level 3 (floating elements, popovers) uses box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37)—a larger blur radius and offset to create pronounced separation. Interactive elements (buttons, inputs) receive a focused shadow on hover: 0 4px 16px rgba(0, 75, 255, 0.3), tinting the shadow with the primary bl

Shapes

The shape language follows **Geometric Precision with Approachable Softness**. Buttons and interactive elements use full-radius (9999px / border-radius: 9999px) to signal friendliness and modernity while maintaining technical credibility. Cards and containers use lg radius (1rem / 16px) for a balanced, contemporary feel—sharp enough to feel intentional, soft enough to avoid harshness. Input fields match buttons at full-radius to create visual cohesion in forms. Smaller UI elements (badges, chips) also use full-radius for consistency. The only exception is the hero section's animated line work,

Components

Action Elements Buttons are the primary interactive affordance. Primary buttons use #004bff background with white text, full-radius, 10px vertical / 20px horizontal padding, and 40px height. On hover, the background shifts to #003cb3 and the shadow expands to 0 4px 16px rgba(0, 75, 255, 0.3), creating a sense of lift and responsiveness. The transition duration is 200ms ease-out. Secondary buttons are transparent with a 2px solid #004bff border, same padding and height; on hover, the background becomes rgba(240, 240, 240, 1) and the border shifts to #003cb3. Ghost buttons (tertiary) use transparent background with #004bff text and no border; on hover, background becomes rgba(0, 75, 255, 0.05). All buttons use label-md typography (14px, 700 weight, 0.05em tracking) for maximum legibility

Do's and Don'ts

**Do**

• Do use primary blue (#004bff) exclusively for CTAs, focus states, and brand-critical interactive elements—never dilute it with secondary uses.
• Do apply full-radius (9999px) to all buttons and input fields to maintain visual consistency and signal modern, approachable design.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to avoid visual clutter and improve scannability.
• Do use the neon cyan (#00c8ff) and blue (#004bff) line work in hero sections to create atmospheric energy; blur at 8–40px for depth.
• Do apply box-shadow transitions on hover (200–300ms ease-out) to all interactive elements to signal responsiveness without jarring jumps.

**Don't**

• Don't use secondary colors (cyan, yellow) as primary CTAs—reserve them for accents, badges, and secondary interactions only.
• Don't apply sharp corners (0px radius) to buttons or inputs; the brand relies on full-radius for visual identity.
• Don't exceed 64px (xl spacing) between major sections; the layout should feel connected and rhythmic, not fragmented.
• Don't use drop-shadows on text except in specific cases (small labels over busy backgrounds); rely on color contrast and typography weight instead.
• Don't mix typefaces within a section; Geist is the primary typeface for all body and UI text—maintain consistency across the interface.