Seven Layer Labs, as shipped

Documentation of the design as it actually shipped at sevenlayerlabs.com. Source: github.com/7LayerLabs/sevenlabs-site (static HTML, single index.html). Base theme: "Dimension" by HTML5UP (html5up.net), customized. jQuery-driven single page where each section opens as a modal article over a fixed background.

Note: the domain sevenlayerlabs.com expired in Aug 2026 and currently shows a Namecheap parking page. This file documents the last live design. For the new direction, see REDESIGN.md in this folder.

1. Brand context

• Seven Layer Labs is the umbrella/personal lab brand for Derek's projects.
• Tagline: "Built on Seven. Made for Many." with "Seven" in purple.
• Positioning copy: "I build businesses, brands, and tools that solve real problems, where food, finance, family, and experiments collide."
• The seven-layer framework is the centerpiece: Problem, People, Purpose, Product, Process, Performance, Profit. Each layer has its own color.
• Sections: The Framework, Builds, My Story, Work Together, Daily Yapping, Prompt Playground.
• Builds featured: MenuSparks (live), The Pour Plan, The Feed, Pass the Eval, Zach -n- Zoey (all Coming Soon), Bobola's Restaurant (client work).

2. Hard rules

• Everything happens on one page. Nav links open modal articles; there are no separate pages.
• White text over a dark, blurred photo background at all times.
• Headings are always uppercase with wide letter-spacing. No exceptions in the theme.
• Each framework layer keeps its assigned color everywhere it appears (see section 3). Purple doubles as the brand color.
• Icons come from Font Awesome 5 (icon font), loaded via fontawesome-all.min.css.

3. Color

The palette is a seven-color rainbow keyed to the framework. This is the biggest difference from REDESIGN.md, which allows exactly one accent.

4. Typography

• Single family: "Source Sans Pro", sans-serif (Google font, loaded via CSS).
• Body: weight 300, 1rem, line-height 1.65, white.
• All headings h1-h6: weight 600, uppercase, letter-spacing 0.2rem, line-height 1.5.
• Hero h1: the tagline, uppercase, wide-tracked, with one purple word.
• Article titles use class "major": heading plus a 1px white underline rule.
• Code/pre: "Courier New", monospace.
• Colored keywords inline in body copy (span.red-text etc.) tie prose to the layer colors.

5. Layout and spacing

• Everything centers on a single column. Header is a vertical stack: round logo, horizontal rule, tagline block, horizontal rule, nav pill row.
• Logo: 5.5rem circle, 1px solid white border, logo image inside.
• Nav: single row of uppercase links in bordered boxes (shared 1px borders, reads as a segmented pill bar).
• Modal articles: max-width around 40rem, padding 2.5rem, translucent dark panel, close X top-right. Content scrolls inside the page.
• Cards inside articles:
• project-gallery: CSS grid, repeat(auto-fit, minmax(280px, 1fr)), 2rem gap.
• project-card: centered text, 1.5rem padding, radius 8px.
• layer-item: 1.5rem padding, radius 8px, 4px left border in rgba(255,255,255,0.3), one per framework layer.
• Footer: "Love an idea?" pitch with a Reach out button, then copyright line.

6. Components

• Buttons: transparent background, 1px solid white border, uppercase letter-spaced label, hover fills rgba(255,255,255,0.075). Variants: primary (white bg, dark text), small, disabled (used for Coming Soon).
• Project card: logo image (80px round-ish), h3 name, one-line description, button (Visit Site or disabled Coming Soon), and a project-type badge.
• Project-type badges: pill with tinted bg, colored text, 1px tinted border. creative = purple tint, client = orange tint.
• Layer item: colored h4 lead-in ("Problem - Start with the pain point.") followed by plain body copy.
• Guidance/prompt cards (Prompt Playground): same card recipe, one "warning" variant, with source footers crediting where prompts came from.
• Forms and tables exist in the theme (Elements article) with matching translucent styling.
• Social icon row: Font Awesome circle icons (Twitter, Facebook, Instagram, GitHub), all currently href="#".

7. Motion

• Page load: body starts class is-preload, everything fades in.
• Opening a section: article fades in and slides up 0.25rem over 0.325s ease-in-out; switching sections crossfades between articles.
• Background subtly shifts/blurs when a modal is open (Dimension default).
• jQuery + breakpoints.js drive it. No scroll-driven animation anywhere.

8. Imagery

• One fixed photo background (bg.jpg) behind everything, blurred by overlay.
• Hand-drawn style framework diagram (7Poutline.png): seven boxes with arrows, Problem in red marker, Profit circled in green.
• Product logos per card (sparkslogo, pourplanlogo, meetthefeedlogo, passeval, znz_logo, bobolalogo).
• Personal photos in My Story (derek.jpg headshot, gears.jpg, yapping.png).
• Stock template photos (pic01, pic03) still used in Collab and Prompts.

9. Copy patterns

• First person, casual, self-aware ("Daily Yapping", "no filter, no fancy formatting, just raw thoughts").
• Framework language is consistent: every layer gets a one-line colored lead-in plus a short plain-English paragraph.
• Personal math motif: 7 kids, 7 kitchens, 7 layers.
• CTAs are conversational: "Let's talk", "Reach out", "Got a badass prompt to share?"
• Contact email: menusparksproject@gmail.com.

10. Known gaps and inconsistencies (as of 2026-08-12)

• The domain is EXPIRED. Renew at Namecheap or the site stays dark.
• Copy uses em dashes throughout and a heart emoji in the footer. Both now violate Derek's standing hard rules (see REDESIGN.md section 2).
• The theme's demo "Elements" article (lorem ipsum tables, fake form) is still in the HTML, just unlinked from nav.
• Daily Yapping is an empty placeholder. Social icons all point to "#".
• 4 of 6 build cards are disabled Coming Soon buttons.
• Footer copyright still says 2024.
• Icon font (Font Awesome) conflicts with the newer SVG-only rule.
• The local repo at ~/seven-layer-labs is an untouched create-next-app starter, NOT this site. The real source lives in the sevenlabs-site repo on GitHub (7LayerLabs/sevenlabs-site).