# Design Language for tnhec.com ## Aesthetics and Tone tnhec.com channels the visual memory of mid-2000s McBling -- the era of rhinestone-studded Sidekicks, Juicy Couture velour, and Paris Hilton's bedazzled everything -- but filtered through a late-night contemplative stillness, as if someone sat alone in a dimly lit luxury mall after closing hours, surrounded by the glittering remnants of an era that worshipped excess with complete sincerity. The aesthetic is **McBling meets midnight meditation**: opulent surfaces rendered in deep navy and indigo rather than bubblegum pink, crystal embellishments that catch moonlight instead of camera flashes, and marble surfaces that ground the sparkle in something ancient and geological. The tone is **calm-serene** -- not the hyperactive energy typically associated with McBling, but the quiet confidence of someone who already owns everything and has nothing left to prove. Every element shimmers with restrained glamour: borders that animate with a slow diamond-crawl, typography that rounds its corners like polished gemstones, and marble textures that remind visitors they are standing in a palace, not a party. The mood is a penthouse suite at 2 AM -- city lights visible through floor-to-ceiling windows, a marble countertop reflecting the glow of a single candle, velvet silence. ## Layout Motifs and Structure The layout follows a **magazine-spread** composition inspired by early-2000s luxury editorial spreads from magazines like W and Vogue Italia -- where images and text coexist in deliberate, overlapping arrangements that reward slow scanning rather than quick consumption. The page is divided into a conceptual two-page spread system: each viewport-height section represents a "spread" where content is arranged across an implied gutter line at roughly 48% from the left edge. **Grid Architecture:** - A 12-column grid with unequal distribution: columns 1-5 form the left "page" and columns 7-12 form the right "page," with column 6 acting as the gutter -- a thin vertical strip (roughly 2vw wide) that sometimes contains delicate border-animated divider lines. - Content blocks deliberately cross the gutter at key moments, creating the visual tension of a magazine spread where a headline or image bleeds across the fold. - Vertical rhythm is governed by a 1.618 (golden ratio) spacing system: major section gaps are 8rem, subsection gaps are 4.944rem, inline gaps are 3.056rem. **Spread Compositions (rotating every 2 sections):** 1. **The Marble Spread:** Left page holds a full-bleed marble-textured panel with a single line of text in knockout (white on marble). Right page holds a dense text block with retro-pattern border accents. 2. **The Crystal Spread:** Both pages hold content, but a large decorative crystal/diamond SVG motif spans the gutter, with content wrapping around it. 3. **The Editorial Spread:** Left page is a tall, narrow column of body text (40ch max-width). Right page holds a large square image area with a thick animated border that cycles through McBling-inspired gradient patterns. 4. **The Reflection Spread:** Content on the right page only, with the left page showing a subtle marble-textured mirror of the right content at 8% opacity, creating a ghostly reflection effect. Navigation is minimal -- a single line of horizontally spaced links at the top of the first spread, set in small caps with generous letter-spacing (0.25em), anchored to the right "page." No hamburger menu, no sticky header. The navigation disappears on scroll and reappears only when the user scrolls upward. ## Typography and Palette **Typography:** - **Display / Headlines:** "Varela Round" (Google Fonts) at weights 400. This typeface's perfectly rounded terminals and even stroke width embody the McBling love of soft, polished forms -- like typography that has been tumbled smooth in a gem polisher. Used at 3rem-5.5rem for spread headlines. Always lowercase. Letter-spacing: -0.02em for headlines to create intimacy. - **Body / Running Text:** "Nunito" (Google Fonts) at weight 300 for body text and 600 for emphasis. Nunito's rounded geometry complements Varela Round while offering better readability at small sizes. Set at 1.05rem/1.75 line-height. Paragraph max-width: 42ch. Color: #C8D0E0 (a cool, silvery lavender that reads clearly against midnight backgrounds without the harshness of pure white). - **Accent / Captions:** "Quicksand" (Google Fonts) at weight 500. Used for photo captions, navigation links, metadata, and any text that needs to feel lighter and more casual. Set at 0.8rem with letter-spacing: 0.15em and text-transform: uppercase. Color: #7B8DB8 (muted steel-blue). - **Decorative / Pull Quotes:** "Sacramento" (Google Fonts) -- a flowing script used sparingly for pull quotes and single decorative words that evoke the hand-lettered quality of McBling-era branding. Used at 2.5rem-4rem, always in the accent gold color. **Palette:** | Role | Color | Hex | Description | |------|-------|-----|-------------| | Primary Background | Midnight Abyss | #0B0E1A | Near-black with a blue undertone -- the deep night sky | | Secondary Background | Twilight Navy | #141832 | Slightly lighter for cards, panels, and spread backgrounds | | Tertiary Background | Marble Vein | #1C2240 | Used as the base for marble-texture overlays | | Primary Accent | Champagne Gold | #D4A853 | The McBling signature -- warm gold for borders, highlights | | Secondary Accent | Rose Quartz | #C4789A | A muted pink that nods to McBling femininity without screaming | | Text Primary | Silver Mist | #C8D0E0 | Cool, readable body text color | | Text Secondary | Steel Blue | #7B8DB8 | Captions, metadata, secondary information | | Border Glow | Diamond White | #E8EAF0 | Used only for animated borders at 60% opacity | | Marble Light | Carrara Hint | #2A3060 | The lighter veins in the marble texture pattern | | Highlight | Sapphire Pulse | #3B5998 | Interactive elements, link hover states | **Gradient Definitions:** - **McBling Shimmer:** linear-gradient(135deg, #D4A853 0%, #C4789A 40%, #3B5998 70%, #D4A853 100%) -- used exclusively for animated borders, cycling slowly via CSS animation. - **Marble Vein:** radial-gradient(ellipse at 30% 70%, #2A3060 0%, transparent 50%) layered 3-4 times with varying positions to create a procedural marble pattern. ## Imagery and Motifs **Marble Texture System:** The primary visual surface throughout the site is a CSS-generated marble texture -- not a static image, but a procedural pattern built from layered radial gradients and SVG fractal noise filters. The marble appears in three variants: 1. **Dark Carrara:** Deep midnight base (#0B0E1A) with subtle lighter veins (#2A3060) -- used for full-bleed background panels. 2. **Warm Emperador:** Slightly warmer variant with gold-tinted veins (#D4A853 at 8% opacity) -- used for featured content areas and pull-quote backgrounds. 3. **Polished Nero:** Near-black marble with barely perceptible veins visible only on hover or scroll -- used for navigation backgrounds and footer areas. Each marble variant uses an SVG `` filter with `baseFrequency="0.015 0.025"` and 4 octaves, fed into `` to warp a gradient layer. The result is organic, non-repeating, and unique to each page load due to subtle randomization of gradient positions via JavaScript. **Retro Pattern Motifs:** Decorative elements draw from McBling-era pattern vocabulary: - **Diamond Lattice:** A repeating diamond/rhombus grid rendered as thin SVG lines (#D4A853 at 20% opacity) that appears as section dividers and card background textures. - **Scrollwork Borders:** Ornamental S-curve and C-curve patterns inspired by 2000s-era luxury branding, drawn as SVG paths that animate on scroll -- the curves "draw in" from nothing as sections enter the viewport. - **Crystal Scatter:** Small diamond and gem-shaped SVG elements (pentagons, hexagons cut like gemstones) scattered at the edges of spreads, rotating slowly (one full rotation every 30 seconds) with a subtle box-shadow glow in champagne gold. - **Star Burst Accents:** Four-pointed and eight-pointed star shapes placed at intersection points of the grid, pulsing gently in opacity between 30% and 70%. **Icon Style:** Any icons use a thin-line style (1.5px stroke, no fill) in Steel Blue (#7B8DB8), with rounded line caps and joins to match the playful-rounded typography. On hover, icons fill with the McBling Shimmer gradient via a CSS transition. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to a full-viewport "cover" spread -- the left page is entirely marble-textured (Dark Carrara variant) with a single crystal scatter element slowly rotating near the center. The right page holds the domain name "tnhec.com" set in Varela Round at 5rem, lowercase, in Champagne Gold (#D4A853), positioned at 40% from the top. Below the name, a single line in Quicksand uppercase reads a tagline, and below that, a thin horizontal line (1px, Diamond White at 40% opacity) slowly extends from left to right over 3 seconds via CSS animation. No other elements. No buttons, no calls to action, no pricing blocks. Just the name, the marble, and the silence. **Border Animation System (Primary Interaction Pattern):** The defining animation of the site is **border-animate** -- every major content container has a border that is not static but alive. Implementation: - Each container has a `border-image` using the McBling Shimmer gradient, animated via `@property` registered custom properties that rotate the gradient angle from 0deg to 360deg over 8 seconds, creating a slow, hypnotic shimmer around every panel. - Border width is 2px by default, expanding to 3px on hover with a 0.4s ease transition. - For the "spread gutter" divider line, the border animation runs vertically -- a thin line whose gradient shifts continuously, drawing the eye along the magazine fold. - On section entry (Intersection Observer), borders "draw in" from the corners: the border starts with `clip-path: inset(50%)` and transitions to `clip-path: inset(0%)` over 1.2 seconds with a cubic-bezier(0.25, 0.46, 0.45, 0.94) timing. **Marble Texture Interaction:** When the user moves their cursor over marble-textured areas, the SVG displacement map's scale value shifts slightly (from 20 to 25) based on cursor position, creating a subtle "living marble" effect where the veins appear to breathe and shift. This is achieved via a JavaScript mousemove listener that updates the `scale` attribute of the `` element. The effect is throttled to 30fps for performance. **Scroll-Driven Spread Transitions:** As the user scrolls between spreads, the transition is not a simple content shift but a **page-turn metaphor**: the outgoing spread's right page slides slightly leftward (translateX(-3vw)) and fades to 0.7 opacity, while the incoming spread's left page slides in from slightly right (translateX(3vw)), creating the sensation of turning a magazine page. Each transition takes 0.8 seconds and is driven by CSS scroll-snap with `scroll-snap-type: y mandatory` on the main container. **Retro Pattern Reveals:** The scrollwork border patterns and diamond lattice elements are invisible on initial load. As sections scroll into view (Intersection Observer with threshold 0.3), the SVG paths animate their `stroke-dashoffset` from full length to 0, drawing the ornamental patterns into existence over 1.5-2 seconds. The diamond lattice fades in simultaneously at a slower rate (opacity 0 to 0.2 over 2.5 seconds). **Pull Quote Moments:** Every third spread contains a full-page pull quote: a single sentence set in Sacramento at 3.5rem in Champagne Gold, centered on the left page, with the right page showing a large marble panel. The pull quote fades in word-by-word (each word delayed by 150ms) using staggered CSS animations. A scrollwork border slowly draws itself around the quote over 3 seconds. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero banners with background video, cookie consent popups, chatbot widgets, newsletter signup forms, footer link columns. This is an editorial experience, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **McBling Aesthetic at 0% Frequency:** No other design in the entire portfolio uses the McBling aesthetic. This site is the first and only McBling-inspired design, making it immediately distinct. The McBling vocabulary -- rhinestone textures, champagne gold accents, rounded playful typography, luxe-casual attitude -- exists nowhere else in the collection. Furthermore, the typical McBling palette (hot pink, bubblegum, silver) is subverted here with a midnight-blue foundation, creating a nighttime McBling that has no precedent. 2. **Magazine-Spread Layout at 7% Frequency:** While magazine-spread appears occasionally, no other design combines it with McBling aesthetics or a marble texture system. The specific implementation here -- a conceptual two-page spread with a living gutter line, four rotating spread compositions, and scroll-snap page-turn transitions -- is architecturally unique. Most magazine layouts in the portfolio are static editorial grids; this one treats the screen as a literal open magazine with a tactile page-turn feel. 3. **Procedural Marble Texture (Not Static Image):** At 3% frequency, marble-texture imagery is rare, but every other instance uses static background images. This design generates its marble procedurally through SVG feTurbulence filters and layered CSS gradients, making each page load produce a subtly unique marble surface. The interactive cursor-responsive marble displacement is entirely unique to this design. 4. **Border-Animate as Primary Narrative Device:** At 3% frequency, border-animate is underused. Here it is elevated from a secondary decoration to the site's primary interaction language -- every container breathes with gradient-cycling borders, the magazine gutter is a living animated line, and section entries are defined by borders drawing themselves from corners. No other design makes border animation the central visual throughline. 5. **McBling-Midnight Tonal Inversion:** The combination of calm-serene tone (4% frequency) with McBling aesthetic (0% frequency) creates an intentional contradiction: McBling is historically loud, energetic, and performative, but this design reimagines it as contemplative and still. The midnight-blue palette (1% frequency) reinforces this inversion. It is McBling after dark, McBling in repose, McBling aged into quiet confidence. **Seed Documentation:** - aesthetic: mcbling - layout: magazine-spread - typography: playful-rounded - palette: midnight-blue - patterns: border-animate - imagery: marble-texture - motifs: retro-patterns - tone: calm-serene **Avoided Overused Patterns:** - playful aesthetic (95%) -- avoided in favor of mcbling (0%) - centered layout (99%) -- avoided in favor of magazine-spread (7%) - mono typography (99%) -- avoided in favor of playful-rounded (3%) - warm palette (100%) -- avoided in favor of midnight-blue (1%) - scroll-triggered patterns (97%) -- replaced with border-animate (3%) as primary; scroll-triggered used only as secondary mechanism for Intersection Observer reveals - minimal imagery (95%) -- avoided in favor of marble-texture (3%) - vintage motifs (89%) -- avoided in favor of retro-patterns (2%) - friendly tone (99%) -- avoided in favor of calm-serene (4%)