# Design Language for rollup.report ## Aesthetics and Tone The visual world of rollup.report is a maximalist fever-dream of a candlelit trading floor after hours -- imagine a Baroque counting house reimagined by a neon sign artist who grew up reading manga. Every surface drips with ornamental excess: layered data ribbons, flickering glow trails, stacked translucent panels that overlap and compete for attention like market orders in a volatile session. The aesthetic draws from Frutiger Aero's optimistic glossiness but corrupts it with deep, moody candlelight -- as if someone left a Bloomberg terminal running inside a cathedral lit only by votive candles and underglow LEDs. The tone is whimsical-creative: not silly, but delightfully unserious about its own grandiosity. Headlines speak in the voice of a charming narrator who finds genuine wonder in aggregated data, who treats each rollup summary like a chapter in an adventure novel. There is a theatrical quality to the information architecture -- data is not merely displayed, it is performed, staged, revealed with dramatic timing. The overall mood sits at the intersection of "neon-soaked night market" and "illuminated manuscript," combining the sensory overload of maximalism with the intimate warmth of candlelight. ## Layout Motifs and Structure The layout is aggressively asymmetric, rejecting the tyranny of centered content. The viewport is divided into irregular, overlapping zones that shift weight from left to right as the user scrolls, creating a visual rhythm like a pendulum swinging through data layers. **Primary Grid System:** The underlying grid is a 16-column system, but columns are never used symmetrically. Content blocks occupy 5-9 columns and are offset unpredictably: the first section might anchor at columns 1-7, the next at columns 6-14 (with deliberate overlap), the third at columns 9-16 with a floating annotation panel hovering at columns 1-4. This creates a tectonic, shifting spatial experience where content slides past itself. **Section Architecture:** - **Hero zone:** A full-viewport opening where the domain name is positioned at roughly 25% from the left and 40% from the top, surrounded by floating neon-glow data fragments (small translucent cards showing mock rollup stats) that drift in parallax layers at different z-depths. - **Data ribbon sections:** Horizontal bands of content that span the full width but contain asymmetrically placed content clusters -- a large typographic block on the left, a stack of glowing data cards on the right, connected by thin luminous lines. - **Candle alcove sections:** Narrower, more intimate sections (max-width: 680px) that float freely in the viewport, offset to one side, with generous negative space on the other side filled with dim, animated candle-flicker effects rendered in CSS. - **Overlap zones:** Where adjacent sections deliberately encroach on each other's territory, creating depth through layering. Content from one section peeks behind or above content from the next, managed via z-index choreography and subtle box-shadow halos. **No traditional navigation.** The experience is a single continuous scroll. Section transitions are marked not by hard dividers but by shifts in the asymmetric weight -- content swings from left-heavy to right-heavy, creating a winding, serpentine reading path. ## Typography and Palette **Typography:** - **Display / Headlines:** "Outfit" (Google Fonts) -- a geometric sans-serif with soft, rounded terminals and generous apertures that channels the optimistic clarity of Frutiger-style design. Used at bold weight (700) in sizes from 4rem to 10vw. Letter-spacing: -0.03em at display sizes for a tight, confident feel. Sentence case, never uppercase. Line-height: 0.95 for stacked display type. The roundness of Outfit contrasts beautifully with the maximalist density of the layout, providing a legible anchor amid visual chaos. - **Body / Narrative:** "Nunito Sans" (Google Fonts) -- a balanced, humanist sans-serif at weight 400, size 1.05rem-1.2rem, line-height 1.65. Its open counters and even stroke width make it extremely readable even against complex, layered backgrounds. Color: #E8E0F0 on dark backgrounds, #2A1B3D on light panels. - **Data / Labels:** "JetBrains Mono" (Google Fonts) -- monospaced, used sparingly for numerical data readouts, stat labels, and inline code-like references to rollup metrics. Weight 500, size 0.85rem, letter-spacing: 0.04em. Color: #00E5A0 (the triadic green) to distinguish data from narrative text. **Palette (Triadic):** The triadic palette is built on three equidistant hues on the color wheel, creating maximum chromatic tension: | Role | Color | Hex | |------|-------|-----| | Primary (Violet) | Deep electric violet | #7B2FBE | | Secondary (Teal) | Luminous teal-green | #00E5A0 | | Tertiary (Amber) | Warm candle amber | #E5A000 | | Background Dark | Near-black plum | #0E0A14 | | Background Mid | Dark aubergine | #1A1229 | | Surface | Frosted violet panel | #2A1B3D | | Text Primary | Lavender white | #E8E0F0 | | Text Muted | Dusty lilac | #8B7FA0 | | Glow Accent | Hot magenta (sparingly) | #FF2D95 | The triadic scheme creates a vibrating, high-energy chromatic field that never settles into comfort. Violet dominates backgrounds and large surfaces. Teal-green is the primary accent for interactive elements, data highlights, and neon-glow effects. Amber appears as the candlelight warmth -- used for atmospheric lighting effects, hover states, and decorative flame motifs. The hot magenta (#FF2D95) appears only in micro-moments: notification dots, active states, and the tips of animated flame elements. ## Imagery and Motifs **Neon-Glow System:** All visual elements are rendered with neon-glow effects -- not the flat neon of cyberpunk cliches, but a softer, more atmospheric glow that mimics light diffusing through fog or candle smoke. Specific techniques: 1. **Glow Cards:** Data summary panels are rendered as dark glass cards (#2A1B3D at 85% opacity) with borders that emit a soft colored glow. Each card's glow color corresponds to its data type: teal (#00E5A0) for positive metrics, amber (#E5A000) for neutral/historical, violet (#7B2FBE) for aggregated totals. The glow is achieved via layered `box-shadow` with increasing spread and decreasing opacity: `0 0 4px`, `0 0 12px`, `0 0 30px`, `0 0 60px`. 2. **Luminous Connectors:** Thin lines (1-2px) drawn in SVG connect related data elements across the asymmetric layout. These lines glow with the teal accent and pulse gently (opacity oscillating between 0.4 and 1.0 over 3-second cycles), creating a living circuit-board effect that ties the scattered asymmetric elements into a cohesive visual network. 3. **Neon Typography Accents:** Select words in headlines receive a text-shadow glow treatment -- three layers of text-shadow in the teal or amber color at increasing blur radii (2px, 8px, 20px), making individual words appear to emit light. Used on no more than one word per headline to avoid gaudiness. **Candle-Atmospheric Motifs:** The candlelight motif manifests as a persistent atmospheric layer throughout the site: - **Flicker Particles:** Small CSS-animated circles (4-8px diameter) in amber (#E5A000) and warm white (#FFF5E0) that float upward slowly at the edges of the viewport, mimicking rising candle embers. They flicker in opacity using a randomized keyframe animation (opacity varies between 0 and 0.8, size pulses by +/-15%). Approximately 15-25 particles visible at any time, concentrated near the bottom and edges. - **Warm Light Pools:** Radial gradients in amber (#E5A000 at 5-10% opacity) placed behind key content blocks, simulating the soft pool of light cast by a nearby candle. These are purely decorative background elements, never interfering with readability. - **Wax Drip Decorators:** Abstract SVG shapes resembling stylized wax drips hang from the bottom edges of glow cards and section boundaries. Rendered in semi-transparent amber (#E5A000 at 20% opacity), they add a whimsical, almost Gothic quality that distinguishes the design from generic neon-tech aesthetics. - **Smoke Wisps:** Subtle CSS animations using blur filters and transform: scale() on thin, elongated gradient elements (#E8E0F0 at 3-6% opacity) that drift upward and disperse, simulating candle smoke. Positioned behind content in the "candle alcove" sections. **Decorative Maximalist Elements:** - **Data Confetti:** Small, randomly rotated rectangles and circles in the triadic colors scattered across negative space areas, each with a faint glow shadow. These are static decorative elements, not animated, providing texture and density to the maximalist composition. - **Ornamental Borders:** Section transitions feature decorative borders composed of repeated small geometric elements (tiny diamonds, dots, and short dashes) in the triadic palette, reminiscent of illuminated manuscript borders but rendered in neon-glow style. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be implemented as a single continuous scroll, opening to a full-viewport hero that feels like entering a candlelit data cathedral. No navigation menu, no hamburger icon, no footer links. The scroll itself is the only interaction. Each section is a "chapter" in the rollup story, revealed through hover-lift interactions and gentle scroll-driven opacity changes. **Hover-Lift Interaction Pattern:** All interactive cards and content blocks implement a hover-lift effect: - On hover: `transform: translateY(-8px) scale(1.02)` with `transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)` (spring-like overshoot curve) - The card's glow intensifies on hover: box-shadow blur radius doubles, opacity increases by 30% - A subtle warm ambient sound could be implied through visual feedback: the nearest flicker particles accelerate briefly when a card is hovered, as if disturbed by movement - On hover, the glow color shifts slightly warmer (teal cards gain a hint of amber in their outermost shadow layer) - Cards return to rest with a slightly slower transition (0.5s) using `cubic-bezier(0.22, 1, 0.36, 1)` for a gentle settling effect **Scroll-Driven Section Reveals:** Although the primary interaction pattern is hover-lift, sections use simple opacity and transform reveals as they enter the viewport: - Content blocks begin at `opacity: 0; transform: translateX(40px)` (from the right for right-anchored sections) or `translateX(-40px)` (from the left for left-anchored sections), matching the asymmetric direction of each section - Reveal via IntersectionObserver at 15% visibility threshold - Stagger children within each section by 80ms intervals - Candle particles in the section begin their animation only once the section is revealed **Asymmetric Scroll Weight:** Implement the left-right weight shifting via CSS custom properties that change per section: ```css .section--left { --content-offset: 0; --content-width: 55vw; } .section--right { --content-offset: 45vw; --content-width: 55vw; } .section--narrow { --content-offset: 30vw; --content-width: 40vw; } ``` This creates a serpentine reading experience that rewards sustained engagement. **Neon-Glow Implementation:** All glow effects are achieved purely through CSS box-shadow and text-shadow. No images, no canvas. The glow layers should use the `will-change: box-shadow` hint for smooth hover transitions. Each glow element uses exactly 4 shadow layers for the neon effect. **AVOID:** - CTA-heavy layouts (no "Sign Up Now" buttons, no pricing tiers) - Pricing blocks, feature comparison tables, stat-grids in rigid rows - Generic hero illustrations or stock photography - Centered, symmetrical layouts - Flat, non-atmospheric color application - Cookie-cutter card grids with uniform sizing ## Uniqueness Notes **Differentiators from other designs:** 1. **Neon-glow imagery at 0% frequency:** No existing design uses neon-glow as its primary imagery mode. rollup.report will be the first to build an entire visual system around layered CSS glow effects -- not as accents on an otherwise flat design, but as the fundamental visual material from which all surfaces, borders, and atmospheric elements are constructed. 2. **Candle-atmospheric motifs at 1% frequency:** The combination of neon-glow technology aesthetics with candle warmth and intimacy creates a paradoxical visual language that no other design in the portfolio achieves. The "data cathedral" concept -- where cold, precise rollup information is presented in the warm, flickering atmosphere of candlelight -- is entirely unique and bridges the gap between the digital and the devotional. 3. **Triadic palette at 1% frequency:** While most designs default to warm, muted, or gradient palettes, the triadic scheme (violet/teal/amber) creates maximum chromatic tension without descending into neon-electric chaos. The three colors form a stable triangle of contrast that is visually arresting but structurally balanced. No other design in the portfolio uses this specific triadic approach. 4. **Frutiger-clean typography at 1% frequency:** "Outfit" and "Nunito Sans" channel the approachable, optimistic clarity of Frutiger-style design within a maximalist context -- creating an unusual tension between typographic readability and visual excess. Most maximalist designs pair with display-bold or expressive typefaces; using clean, rational type as an anchor point within the ornamental chaos is a deliberate inversion. 5. **Maximalist + whimsical-creative tone:** The site treats financial rollup data as source material for wonder and delight rather than authority and trust. Where most data-adjacent sites reach for "professional" or "authoritative" tones, rollup.report embraces theatrical staging, ornamental excess, and a narrator's voice that finds genuine beauty in aggregated numbers. **Seed:** aesthetic: maximalist, layout: asymmetric, typography: frutiger-clean, palette: triadic, patterns: hover-lift, imagery: neon-glow, motifs: candle-atmospheric, tone: whimsical-creative **Avoided overused patterns:** centered layout (99%), mono typography (99%), warm palette (100%), minimal imagery (95%), scroll-triggered as primary pattern (96%), vintage motifs (88%), friendly tone (98%), playful aesthetic (95%). Instead, every element of the seed draws from the underused end of the frequency spectrum.