# DESIGN.md — dannpetty.com ## 1. Visual Theme & Atmosphere Dann Petty's personal site is a statement of confident minimalism operating in full dark mode. The canvas is near-black — not pure, but a dark charcoal that feels rich and intentional. Against this ground, a single electric lime-yellow accent explodes with deliberate maximum contrast. The palette feels like a designer who understands that restraint plus one bold move creates more impact than many competing colors. The site communicates personality through scarcity: tight Framer Motion animations, a compressed type scale, and almost no decorative surface work. The overall mood is confident, direct, and a little editorial. --- ## 2. Color Palette & Roles ### Background - **Deep Charcoal** (`rgb(17, 17, 17)` = `#111111`): The primary canvas. Not black — there is just enough visible distinction from pure black to feel intentional rather than default. ### Accent / Highlight - **Acid Lime** (`rgb(206, 251, 80)` = `#cefb50`): The defining brand color. Used as a surface for a primary highlight card or CTA zone. Luminance 0.855 — extremely bright against the dark ground, designed to create immediate visual hierarchy. ### Neutral Light - **Light Gray** (`rgb(242, 242, 242)` = `#f2f2f2`): A near-white surface appearing on secondary cards or lighter content zones. Provides visual contrast against the dark ground without introducing full white. ### Text - **Near-Black Text** (`rgb(0, 0, 0)` = `#000000`): Default text color set on the body — paradoxical on a dark background, suggesting text is placed on light surface areas. Link text inherits browser default blue (`rgb(0, 0, 238)`), signaling raw or lightly styled interactive elements. --- ## 3. Typography Rules Two variants of Inter handle all type: **Inter Tight** (28px, weight 700, 33.6px line-height): The display/heading typeface variant. The "Tight" variant's compressed tracking suits dark editorial layouts — headlines are dense and confident. **Inter SemiBold** (16px, weight 600, 22.4px line-height): Sub-headings and prominent UI labels. Slightly tighter than standard Inter. **Inter** and fallback sans-serif: Body copy at 14px weight 600 (tight labels) and generic sans at 12px for the smallest UI text. The scale is compact: 28 / 16 / 14 / 12. Notably absent: no serif, no display typeface, no monospace. The system is a single-family grid of weights and sizes. No letter spacing overrides. No text transforms. Typography communicates through weight and size alone, not stylistic embellishment. --- ## 4. Component Styling - **Cards / Surfaces**: Three distinct surfaces: deep charcoal (`#111`), light gray (`#f2f2f2`), and lime-acid (`#cefb50`). Cards are differentiated by surface color rather than shadow or border. - **Links**: Styled with browser-native blue on hover — intentionally raw, suggesting links are functional landmarks rather than styled CTAs. - **Hover States**: Navigation links shift background from `#111` to `#202020` — a subtle 6-point lightening that confirms interactivity without disruption. - **Border Radius**: Two values — `500px` (full pill for badge/tag shapes) and `100px` (large-rounded for cards). There are no sharp corners or tight radii. Shapes are soft and rounded throughout. - **No shadows**: The shadow array is empty. All elevation is handled by surface color contrast. --- ## 5. Layout Principles - Breakpoints at 1000, 1200, and 1600px suggest a wide-screen first layout with three major breakpoints. - Content appears in a grid where the lime surface card creates a focal point — one dominant piece, supporting secondary cards. - No complex sidebar or navigation drawer. The layout is likely a portfolio-style single page with scrollable sections. - Spacing is minimal at the root level; gap and layout work is handled within Framer's component containers. --- ## 6. Depth & Elevation No shadows exist in the system. Depth is entirely achieved through: - **Color contrast**: Lime (#cefb50) against near-black (#111) creates the highest possible visual pop - **Surface stacking**: Three defined luminance tiers (0.12 dark, 0.85 lime, 0.95 light gray) form a legible elevation ladder - **Framer Motion**: Implicit animation handling creates perceived depth through movement rather than shadow --- ## 7. Do's and Don'ts **Do:** - Reserve the lime accent for one dominant surface or CTA per section. It loses power if repeated. - Use Inter Tight Bold for all primary headings. Keep weight at 700. - Apply large pill radii (100–500px) for all card and tag shapes. Sharp corners are alien to this system. - Keep hover states subtle: a ~6-point background lightening is sufficient. - Trust the dark canvas — it does not need ornamentation. **Don't:** - Add a second accent color. The system is built on a single chromatic pop. - Use shadows or drop effects. This is a flat, surface-only elevation system. - Introduce serif or display typefaces. Inter is the entire typographic palette. - Use text transforms or letter-spacing overrides. - Place lime text on light backgrounds — it is a background color, not a text color. --- ## 8. Responsive Behavior Three breakpoints: 1000, 1200, 1600px. The wide-screen orientation (up to 1600px) suggests a design that opens up horizontally on large displays. Below 1000px, layout likely collapses to single-column. The compact type scale (max 28px) requires minimal responsive adjustment. Framer Motion components handle most fluid transitions. --- ## 9. Agent Prompt Guide > Design a dark-mode portfolio site matching dannpetty.com: background `#111111`, one dominant lime-acid card (`#cefb50`), secondary near-white surfaces (`#f2f2f2`). Inter Tight Bold at 28px for headings, Inter SemiBold 16px for labels. All shapes use large pill radii (100–500px). No shadows. No gradients. Hover states use a 6-point background lightening only. --- *Generated by Sparkbites — extracted from live CSS analysis*