prompts!

Overview

prompts! is a technical resource directory built for builders who ship with AI coding agents and engineering workflows. The design system embodies "Minimalist Monochrome Precision"—a philosophy that strips away visual noise to expose pure information hierarchy. The aesthetic is deliberately austere: a near-black canvas (#0a0a0a) with pure white accents (#ffffff) and a restrained gray palette (hsl(0, 0%, X%)). This creates an environment where every pixel serves function, not decoration. The brand personality is direct, pragmatic, and unadorned—the voice of a senior engineer who values clarity over charm. Example: "Copy this prompt. Paste it into your agent. Ship faster."

Colors

The color system operates on a principle of maximum contrast and minimal distraction. Primary (#ffffff) is reserved exclusively for call-to-action buttons and interactive focus states—it is the only warm accent in an otherwise cool, neutral palette. Surface colors form a strict stack: surface (#0a0a0a) anchors the base, surface-container (#1a1a1a) lifts interactive elements 10% in luminance, and surface-container-highest (#323232) reserves the brightest neutral for elevated modals or overlays. On-surface (#fafafa) provides text contrast at 98.26% luminance. Secondary (#b3b3b3) and tertiary (#e9ecef) are mid-tone grays used for supporting text, borders, and disabled states—never for primary interaction. Error (#ff6b6b) is a muted red reserved for validation and destructive actions. The outl

Typography

The type system is built entirely on Geist Mono—a technical monospace family that reinforces the brand's engineering-first identity. Display (72px, 600 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) sets the baseline for all body copy and ensures 1.5x line-height for readability on dark backgrounds. Label-md (14px, 500 weight, 0.01em tracking) governs all button text and UI labels, with tighter tracking to reinforce precision. The monospace choice is non-negotiable: it signals technical authority and creates visual consistency with code snippets embedded throughout the site. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) on all body text over the dark backgroun

Layout

The page grid operates on a 12-column fluid layout with a max-width of 1280px, centered on viewport. Horizontal gutter is 24px on desktop, collapsing to 12px on mobile. Vertical rhythm is governed by the spacing scale: lg (40px) separates major sections (hero from featured prompts, featured from browse section); md (24px) separates cards within a grid; sm (12px) separates inline elements. The hero section occupies 100% viewport height with a 2-column split: left column (60%) holds the headline and CTAs; right column (40%) displays the featured prompt card. Cards are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile, with md spacing between items. Container max-width of 1280px prevents text lines from exceeding 80 characters, maintaining readability. All padding

Elevation & Depth

Depth is conveyed through a restrained shadow system and border treatment rather than color shifts. Level 1 (Base): no shadow, surface color #0a0a0a. Level 2 (Cards, inputs): 1px solid border at {colors.outline-variant} (#505050) + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). Level 3 (Modals, elevated cards): 1px solid border at {colors.outline} (#666666) + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15). Hover states on interactive elements add a secondary shadow layer: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.1). Focus states on buttons and inputs apply a 3px outl

Shapes

The shape philosophy is "Technical Softness"—rounded corners are applied strategically to soften the monochromatic severity without introducing organic curves. Buttons use full (9999px) border-radius to create pill-shaped affordances that signal clickability; this is the most rounded element in the system. Cards and containers use lg (1rem / 16px) border-radius, creating a subtle visual softness while maintaining geometric precision. Input fields use DEFAULT (0.5rem / 8px) border-radius—tighter than cards to signal a different interaction model. Badges and small UI elements use md (0.75rem / 1

Components

Action Elements Buttons are the primary affordance for user intent. button-primary uses {colors.primary} (#ffffff) background with {colors.on-primary} (#0a0a0a) text, full border-radius (9999px), 12px horizontal padding, and 40px height. Apply transition: background-color 200ms ease, box-shadow 200ms ease on all button states. On hover, shift backgroundColor to {colors.primary-fixed-dim} (#d0d0d0) and add box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1). On active, shift to {colors.primary-container} (#e5e5e5) and reduce shadow to 0 2px 8px rgba(0, 0, 0, 0.08). button-secondary uses rgba(255, 255, 255, 0.1) background with a 1px border at rgba(255, 255, 255, 0.15), same padding and height. On hover, increase background opacity to 0.15 and border to rgba(255, 255, 255, 0.25). button-ghost has

Do's and Don'ts

**Do**

• Do use monospace typography (Geist Mono) for all UI text—it reinforces technical authority and maintains visual consistency with code.
• Do apply full (9999px) border-radius exclusively to buttons; use lg (1rem) for cards and DEFAULT (0.5rem) for inputs to create a clear visual hierarchy.
• Do reserve {colors.primary} (#ffffff) for primary CTAs and focus states only; never use it for backgrounds or secondary elements.
• Do maintain 1px solid borders on all cards and containers at {colors.outline-variant} (#505050); borders are required for visual separation in this dark system.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active); this creates a responsive feel without feeling sluggish.
• Do use rgba(255, 255, 255, X%) overlays for hover states rather than shifting hue; this preserves the monochromatic aesthetic while signaling interactivity.

**Don't**

• Don't introduce color accents beyond {colors.primary} (#ffffff) and {colors.error} (#ff6b6b); the system's power comes from restraint.
• Don't use sharp corners (0px border-radius) on interactive elements; minimum is DEFAULT (0.5rem) for inputs, lg (1rem) for cards.
• Don't apply shadows stronger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.15)); excessive shadow depth contradicts the minimalist aesthetic.
• Don't use system fonts or sans-serif fallbacks for body text; Geist Mono is non-negotiable for brand consistency.
• Don't compress vertical spacing below lg (40px) between major sections; the system requires breathing room to avoid visual fatigue on dark backgrounds.
• Don't apply text-shadow or text-stroke effects beyond the specified 0 1px 2px rgba(0, 0, 0, 0.3) on body text; additional effects reduce legibility.