# Design Language for perso.news ## Aesthetics and Tone perso.news inhabits the visual world of a Bauhaus atelier relocated to a high Alpine meadow -- a place where Oskar Schlemmer's geometric figures have wandered out of the Dessau stage workshop and into a field of wildflowers beneath a granite ridge. The aesthetic is **Bauhaus-pastoral**: the rigorous geometry of primary forms (circle, triangle, square) deployed not in service of industrial production or urban modernism, but as a framework for contemplating landscape, weather, light through mountain cloud, and the slow unfolding of seasons across a valley. The tone is **pastoral-romantic** in the truest sense -- not saccharine or sentimental, but grounded in the Romantic tradition of awe before natural immensity. Think of Caspar David Friedrich's "Wanderer Above the Sea of Fog" recomposed through Herbert Bayer's typographic grid: the sublime made systematic, the infinite made legible. There is a reverence here, a hush, as though the user has opened the site and stepped into a high-altitude observatory where every element has been placed with monastic precision against the vast indifference of mountain sky. The domain name "perso" (personal) crossed with "news" suggests private dispatches from the field, intimate communiques from a solitary observer stationed at altitude. Every interaction should feel like unfolding a hand-addressed letter from someone who sees the world with geometrically precise eyes but feels it with a poet's heart. ## Layout Motifs and Structure The layout employs **diagonal sections** -- the defining structural conceit of the entire site. Content panels are not stacked horizontally or arranged in traditional rows; instead, they are cut along diagonal lines that echo the slope of mountain ridges and the angular geometry of Bauhaus composition. Each section boundary is a 7-12 degree diagonal slice through the viewport, creating a cascading chevron rhythm as the user scrolls. **Diagonal-Section Architecture:** - **Opening Panorama (100vh):** The viewport opens as a single full-screen field of soft bokeh light -- diffused points of warm and cool luminance floating against a deep steel-gray ground, evoking the out-of-focus view through a mountain cabin window at dawn. The domain name "perso.news" sits at the upper-left third, aligned to an invisible diagonal axis running from top-left to bottom-right. Below it, a single epigraph line in italic serif drifts along the same diagonal, set at `transform: rotate(-4deg)`. - **First Diagonal Break:** At the bottom of the opening panorama, a hard diagonal clip-path (`polygon(0 85%, 100% 70%, 100% 100%, 0 100%)`) introduces the next section. The transition color shifts from the deep steel ground to a lighter slate, creating the sensation of descending a slope. - **Content Ridgeline (3-5 panels):** Each content section is a diagonal band approximately 50-70vh tall, sliced at alternating angles. Text and imagery sit within these angled panels, aligned to the diagonal rather than the horizontal. This forces the eye to move in a zigzag descent down the page, mimicking the switchback path of a mountain trail. - **Valley Floor (Final Section):** The diagonals gradually flatten as the page approaches its end, the angles softening from 10 degrees to 5 degrees to 2 degrees until the final section is nearly horizontal -- a visual arrival at the valley floor after the descent from the summit. **Spacing and Rhythm:** Generous negative space between diagonal sections (minimum 80px vertical clearance). No content touches the viewport edges; everything breathes within a 6% inset from left and right, and the diagonal slices create natural gutters of empty space at their acute angles. Grid: 12-column underlying grid, but content is placed on a rotated axis within each diagonal panel, using CSS transforms to maintain the angled composition while preserving readable text flow. ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with high stroke contrast, sharp bracketed serifs, and an assertive vertical stress that channels the authority of 18th-century type design. Used at 3rem-6rem for section titles. Weight: 700 (Bold). Set with `letter-spacing: -0.02em` for tight, architectural packing. The choice of a classical serif for headlines against Bauhaus-geometric layouts creates a deliberate tension: the organic, calligraphic refinement of the letterforms meets the hard-edged diagonal slicing of the page structure. - **Body Text:** "Source Serif 4" (Google Fonts) -- a robust, highly legible serif designed for extended reading. Weight: 400 (Regular) for body, 600 (SemiBold) for emphasis. Set at 1.125rem with `line-height: 1.72` and `letter-spacing: 0.005em`. Its open counters and moderate x-height make it comfortable at small sizes, while its serif structure harmonizes with the Playfair Display headlines. Paragraph width constrained to 58ch for optimal readability even when text is placed along a diagonal axis. - **Accent / Navigation:** "DM Sans" (Google Fonts) -- a geometric sans-serif with optically balanced letterforms. Weight: 500 (Medium). Used for navigation labels, metadata, datelines, and captions at 0.8rem-0.95rem. Set with `letter-spacing: 0.06em` and `text-transform: uppercase`. This is the Bauhaus voice in the typographic system: clean, functional, geometrically precise, acting as the rational counterpoint to the romantic serifs. **Palette:** The palette is **cool-grays** with carefully calibrated warm punctuation -- mountain stone, alpine sky, and the occasional warm glow of sunset on granite. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Background | Alpine Slate | #2B3038 | Main canvas, deep sections | | Secondary Background | Ridge Stone | #3D4450 | Alternate diagonal panels | | Tertiary Background | Cloud Wash | #E8ECF0 | Light sections, contrast panels | | Primary Text | Summit White | #F2F4F7 | Headings and body on dark ground | | Secondary Text | Fog Gray | #9BA3AE | Captions, metadata, muted labels | | Accent Warm | Alpenglow | #C4785A | Hover states, links, focal points | | Accent Cool | Glacier | #6B8FA3 | Secondary accent, borders, dividers | | Deep Shadow | Ravine | #1A1E24 | Deepest shadows, overlays | The warm accent (#C4785A, Alpenglow) appears sparingly -- like the last ten minutes of sunset hitting a west-facing cliff face. It is never used for large fills, only for interactive states, key phrases, and the thin accent lines that trace along the diagonal section boundaries. ## Imagery and Motifs **Bokeh Background as Atmospheric Foundation:** The primary imagery mode is **bokeh-background** -- fields of softly defocused circular light points that float across dark backgrounds. These are not decorative; they represent the out-of-focus mountain landscape seen through a rain-spotted window pane at dawn, or city lights viewed from a distant ridge at dusk. The bokeh is rendered via CSS radial gradients and layered pseudo-elements, creating 15-30 luminous discs of varying sizes (4px to 40px radius) and opacities (0.08 to 0.35), colored in the cool-gray palette with occasional warm Alpenglow tones. **Bokeh Implementation:** Each bokeh disc is a `radial-gradient(circle, rgba(196,120,90,0.15) 0%, transparent 70%)` or `radial-gradient(circle, rgba(107,143,163,0.12) 0%, transparent 70%)` positioned absolutely within a section's background layer. They drift slowly via CSS keyframe animations (`translateX` and `translateY` oscillations over 20-40 second cycles), creating a breathing, living quality to the backgrounds. The bokeh layer sits behind all content at `z-index: 0`, with content at `z-index: 1`. **Mountain-Landscape Motifs:** The mountain-landscape motif appears through **geometric silhouette forms** -- Bauhaus-style reductions of mountain ridgelines to their essential angular shapes. These are rendered as SVG `` elements: jagged, angular ridgelines in Ridge Stone (#3D4450) layered at different opacities to create depth (foreground ridge at 0.8 opacity, mid-ground at 0.5, background at 0.25). The ridgelines serve as section dividers, replacing the standard diagonal clip-path at key transitions -- the mountain itself becomes the page structure. **Geometric Bauhaus Accents:** Small geometric forms -- circles, triangles, and squares in Glacier blue (#6B8FA3) and Alpenglow warm (#C4785A) -- appear at the margins of content blocks. These are the Bauhaus vocabulary: a triangle pointing upward beside a section headline (the mountain as pure form), a circle floating near a pull-quote (the sun/moon reduced to geometry), a thin square border framing a date or attribution. Each is rendered as a simple SVG or CSS shape, outlined rather than filled, at 1-2px stroke weight with 40% opacity. **Texture Layer:** A subtle grain texture (CSS noise filter via SVG `` at `baseFrequency="0.65"` with very low opacity, 0.03-0.05) overlays the entire page, giving the digital surface the tactile quality of matte photographic paper. This connects to the pastoral-romantic tone: it is handmade, it is physical, it is not perfectly clean. ## Prompts for Implementation **Full-Screen Diagonal Narrative Experience:** perso.news must be built as an immersive vertical-scroll narrative structured entirely around diagonal section breaks. There is no traditional navigation bar, no hamburger menu, no footer grid. The domain name appears once at the opening panorama and does not reappear. The experience is cinematic and contemplative. **Opening Sequence (Critical):** On load, the viewport is filled with the Alpine Slate (#2B3038) ground. Bokeh discs fade in staggered over 2 seconds (spring easing, `cubic-bezier(0.25, 0.46, 0.45, 0.94)`), drifting upward slightly as they appear, as though the camera is adjusting focus on distant lights. After 1.5 seconds, the domain name "perso.news" fades in at the upper-left diagonal position, set in Playfair Display at 4rem, Summit White, with a 0.8-second opacity transition. Below it, the epigraph line slides in along the diagonal axis over 1 second. The entire opening takes 3.5 seconds and establishes the mood: still, vast, geometric, warm. **Diagonal Section Transitions (Spring Animation):** As the user scrolls, each diagonal section boundary triggers a spring-physics animation. The incoming section slides upward along the diagonal axis with spring easing (`stiffness: 120, damping: 14`), its content elements staggering in with 80ms delays. The diagonal clip-path itself animates: the angle of the cut tilts by 2-3 degrees during the transition, then settles to its resting angle, creating a subtle wobble that gives the rigid geometry organic life. **Bokeh Parallax Depth:** The bokeh background layer scrolls at 0.3x the rate of the content (parallax ratio 0.3), while the geometric mountain ridgeline SVGs scroll at 0.6x. This creates three distinct depth planes: the slow-drifting bokeh field (deep background), the ridgeline silhouettes (mid-ground), and the text/content (foreground). The parallax is subtle -- never disorienting -- and enhances the sense of looking through layered atmospheric depth. **Content Panels:** Each diagonal content panel contains one primary element: a headline, a text block, or an image region. Content is never dense or crowded. One thought per panel. Headlines are set in Playfair Display Bold at 3.5rem on dark panels (Summit White) or at 3rem on light panels (Alpine Slate). Body text in Source Serif 4 at 1.125rem. DM Sans uppercase labels for dates, categories, and attributions. **Interactive States:** Links and interactive elements use the Alpenglow accent (#C4785A). On hover, a thin underline draws itself from left to right over 300ms (underline-draw animation). Hover on geometric accent shapes causes them to rotate 45 degrees over 400ms with spring easing. No other hover effects; restraint is the principle. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, social media icon rows, newsletter signup modals, chat widgets. This is a contemplative experience, not a conversion funnel. **Responsive Considerations:** On viewports below 768px, diagonal angles reduce from 7-12 degrees to 3-5 degrees to prevent excessive content clipping. Bokeh disc count reduces from 30 to 12. Mountain ridgeline SVGs simplify to 2 layers instead of 3. The layout remains diagonal but more gently angled, like a mountain slope softening into foothills. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Bauhaus-Pastoral Paradox:** No other design in the portfolio combines the Bauhaus aesthetic (2% frequency) with the pastoral-romantic tone (2% frequency). Bauhaus is typically deployed in urban, industrial, or academic contexts; here it is transplanted to an alpine landscape, creating a conceptual collision between geometric rationalism and Romantic nature-worship. The circle-triangle-square vocabulary of the Bauhaus becomes the sun, the mountain, and the cabin window. 2. **Diagonal-Section Layout as Terrain:** The diagonal-sections layout (1% frequency) is the rarest layout pattern in the portfolio, and no other design uses it as a landscape metaphor. Here, the diagonal cuts are not decorative -- they represent the slope of terrain, the angle of a mountainside, the tilt of a ridgeline against sky. The layout IS the mountain. As the diagonals soften toward the page bottom, the user literally descends from summit to valley. 3. **Serif-Classic Typography at 0% Frequency:** The serif-classic typography category has 0% usage in the portfolio. By centering the typographic system on Playfair Display and Source Serif 4 -- both richly historical serif faces -- perso.news occupies a completely uncontested typographic territory. The pairing of these serifs with the geometric austerity of Bauhaus layout and DM Sans accent type creates a three-voice typographic system found nowhere else. 4. **Bokeh as Atmospheric Narrative Device:** While bokeh-background appears at 2% frequency, no other design uses it as the primary atmospheric layer combined with mountain-landscape motifs (also 2%). The bokeh here is not decorative -- it represents defocused mountain light, the out-of-focus view from altitude. Combined with the parallax depth system (bokeh at 0.3x, ridgelines at 0.6x, content at 1x), it creates a genuine sense of atmospheric depth unique to this design. 5. **Spring Animation on Structural Geometry:** While spring animations appear at 33% frequency, they are typically applied to content elements (cards, text blocks). Here, spring physics are applied to the structural diagonal clip-paths themselves, making the very architecture of the page bounce and settle. The diagonal section boundaries are alive. **Chosen seed/style:** aesthetic: bauhaus, layout: diagonal-sections, typography: serif-classic, palette: cool-grays, patterns: spring, imagery: bokeh-background, motifs: mountain-landscape, tone: pastoral-romantic **Avoided patterns from frequency analysis:** - Avoided `playful` aesthetic (95% -- massively overused) - Avoided `centered` layout (99% -- used in nearly every design) - Avoided `warm` palette (100% -- universal, offers no differentiation) - Avoided `scroll-triggered` as primary pattern (97% -- ubiquitous) - Avoided `friendly` tone (98% -- default, non-distinctive) - Avoided `mono` typography (99% -- saturated) - Avoided `minimal` imagery (94% -- overrepresented) - Avoided `vintage` motifs (86% -- heavily used)