Seven Layer Labs, dark cinematic

Design system for sevenlayerlabs.com. Any AI agent or developer building pages for this brand follows this file. Style family: dark cinematic studio site with oversized typography, one electric accent, and scroll-driven motion.

Inspired by the NOEMA / Orbital AI Research Studio aesthetic (aura.build), adapted for Seven Layer Labs. This is a direction, not a clone. Do not copy NOEMA copy, imagery, or layout wholesale.

1. Brand context

• Seven Layer Labs is the umbrella brand for Derek's product suite (MenuSparks, Sous, BobolaTV, Clipd, SoulClaw, Backline, and more).
• Tagline: "Built on Seven. Made for Many." Seven = his seven kids.
• The organizing idea is the seven-layer framework. Every product passes through seven layers, in order: 01 Problem, 02 People, 03 Purpose, 04 Product, 05 Process, 06 Performance, 07 Profit.
• The number 7 is the brand's core motif. Use it structurally (numbered sections, layer indexes, 7-item grids), never as decoration spam.
• Voice: plain English, builder-to-builder, confident, zero corporate filler.

2. Hard rules

• No emojis anywhere. Ever.
• No em dashes in any copy. Use periods or commas.
• Icons are inline SVG only. No icon fonts, no emoji-as-icon.
• This is a marketing site aesthetic. Personality belongs here. Product interiors (dashboards, apps) do NOT use this system; they stay premium professional and quiet.

3. Color

Rules:

• One accent. Never introduce a second hue. Emphasis inside the dark theme comes from size, weight, and the outline-stroke treatment, not new colors.
• Large imagery may carry its own color (photography, product shots) but UI chrome stays in this palette.
• Optional light section for contrast breaks: invert to bg #F1F0EA / ink #050506. Use at most once per page.

4. Typography

Three voices, strict roles:

1. Display and UI: Helvetica Now / Neue Haas Grotesk, fallback Arial, Helvetica, sans-serif. Tight tracking on display sizes (letter-spacing -0.02em to -0.04em).
2. Technical labels: "Courier New", monospace, uppercase, letter-spacing 0.08em, size 11-12px, color --ink-40. Used for HUD-style metadata: "LAYER 01 / PROBLEM", "STATUS / SHIPPING", coordinates, dates.
3. Editorial accent: Georgia, serif, italic, used sparingly for a single emphasized word inside a display headline ("Made for many.").

Scale (desktop):

• Hero display: clamp(72px, 10vw, 140px), weight 600, line-height 0.95
• Section title: clamp(48px, 6vw, 84px), weight 500
• Sub-head: 24-32px, weight 500
• Body: 16-18px, weight 400, color --ink-70, max-width 60ch
• Mono label: 11-12px uppercase

Signature treatment, the outline stroke:

• Multi-line hero headlines set line one solid --ink, line two transparent fill with a 1px stroke: -webkit-text-stroke: 1px rgba(241,240,234,0.72); color: transparent;
• Use on the hero and at most one other moment per page.

5. Layout and spacing

• Full-bleed sections, min-height 100vh for hero, generous 12-column grid, max content width 1440px, outer gutter 4vw.
• Hairline rules (--line) separate zones. Short 32px horizontal dashes prefix mono labels and small nav items.
• Corner-pinned metadata: small mono blocks pinned to viewport corners of the hero (top-left logo, top-center status, bottom-right coordinates block). This is the HUD feel.
• Vertical side rails: rotated mono text on the right edge ("HOVER TO SHIFT", "SEVEN LAYERS DEEP") on desktop only.
• Spacing rhythm: 8px base. Section padding 120-160px desktop, 64-80px mobile.
• Numbered index pattern: the seven layers render as an oversized list, each row: huge title (Section title scale) + two-digit number (mono, --ink-40, top-aligned). Rows divided by --line hairlines. Hover: title slides 8px right, number turns --accent.

6. Components

• Status pill: small dot (--accent, 6px, subtle pulse) + mono label "STUDIO ONLINE" -> ours reads "LAB ONLINE" or "SEVEN LIVE".
• Primary CTA: text button, mono uppercase, underlined dash prefix ("- ENTER THE LAB"). Hover: dash extends, text shifts to --accent. No filled rounded buttons on this site.
• Product cards: full-width rows, not boxed cards. Product name at Section title scale, one-line plain-English description in --ink-70, mono tag for status ("LIVE", "BUILDING"). Hover reveals a muted screenshot.
• Nav: hamburger only (two 24px lines, right-pinned). Opens a full-screen overlay: the seven layers as the menu, numbered 01-07, at 80px+ scale, plus Work and Contact. Background #050506 at 98% opacity.
• Footer: mono block, three columns (Products, Layers, Contact), hairline top rule, tagline set in the outline-stroke treatment.
• Grain: a fixed full-page noise overlay at 3-5% opacity (SVG feTurbulence or a tiling PNG). Gives the cinematic texture.

7. Motion

Library: GSAP + ScrollTrigger, Lenis for smooth scroll. Respect prefers-reduced-motion: disable parallax and pinning, keep opacity fades.

• Hero load: headline lines rise in with a 0.9s ease-out stagger (translateY 40px, opacity 0 to 1), mono labels fade in last.
• Scroll reveals: sections fade and rise 24px as they enter, 0.6s, once.
• Parallax: hero background imagery drifts at 0.85x scroll speed. Subtle.
• Layer index: pinned section, scrolling advances through the seven layers, each layer's number counts up in the margin.
• Magnetic hover on CTAs and the hamburger: element eases 4-6px toward the cursor inside a 60px radius.
• Marquee: a single slow marquee strip of mono text ("PROBLEM / PEOPLE / PURPOSE / PRODUCT / PROCESS / PERFORMANCE / PROFIT /") between major sections. One per page max.

8. Imagery

• Dark, cinematic, high-contrast. Subjects lit with a single cool light source that can read as the lavender accent.
• Restaurant-world imagery is welcome (kitchens at night, ticket rails, stainless steel) shot moody, not stocky. Screenshots of products display in muted dark-chrome browser frames.
• No pastel gradients, no 3D blob illustrations, no generic SaaS isometrics.

9. Copy patterns

• Headlines are declarative and short: "Built on seven." / "Made for many."
• Section intros: one mono label + one sentence. Example: "LAYER 01 / PROBLEM" then "Everything starts with what's broken."
• Numbers are honest and specific (real products, real dates). No vanity claims, no buzzwords (leverage, synergy, revolutionize are banned).

10. Anti-patterns (do not)

• Do not add a second accent color.
• Do not use rounded-corner filled buttons, drop shadows, or glassmorphism.
• Do not center-align body copy.
• Do not use the outline-stroke on more than two elements per page.
• Do not ship any emoji, em dash, or icon font.
• Do not let any animation block reading. Content is legible with JS off.