# Design Language for march.day ## Aesthetics and Tone march.day is a kinetic, rhythm-driven experience about forward motion -- marching, protesting, advancing, the relentless beat of footsteps carrying people toward something. The site treats "march" in all its dimensions: the month of transition between winter and spring, the act of organized walking, the military cadence, and the civil rights march as an instrument of change. The aesthetic is bold-confident and energetic, drawing from protest poster design (bold sans-serif slogans, high-contrast duotone photography), military typographic precision (stencil letters, grid discipline), and the raw optimism of spring's first warm days. The tone is edgy-rebellious but never cynical -- the voice of someone who marches because they believe things can change. The site pulses with a visual cadence, using repeating rhythmic patterns in layout and animation that mirror the beat of drums and feet. Think "a Bauhaus poster for a spring revolution, printed on newsprint." ## Layout Motifs and Structure **Primary layout: stacked-sections with diagonal-sections and z-pattern reading** The site is organized as a vertical march -- each section is a "step" that the user descends through, with a strict rhythmic cadence. Every section has exactly the same height (100vh) and uses a z-pattern reading path: content alternates between left-anchored and right-anchored positions, creating a zigzag that mimics the swaying motion of a crowd in march. **Section architecture:** 1. **The Drumbeat (viewport 1):** A stark white screen with a single bold black horizontal line that pulses (CSS animation: scaleX 0.9 to 1.1, 1.2s, infinite, ease-in-out) like a heartbeat or metronome. The word "MARCH" appears above it in massive stencil-cut typography. Below the line: "keep moving." The pulsing line is the site's signature motif -- rhythm made visible. 2. **The Calendar (viewport 2):** March the month -- 31 boxes in a grid (7 columns, 5 rows) where each day cell contains a single word or phrase about something that happened on that March date in history. Cells fade-reveal in sequence (stagger animation, 50ms per cell), creating a visual typewriter effect across the calendar grid. 3. **The Procession (viewport 3-5):** Three full-viewport panels showing different kinds of marches: a protest march (red/black duotone), a military march (olive/black), and a spring equinox celebration (green/gold). Each panel uses a diagonal section divider (CSS clip-path: polygon) creating sharp angular transitions. Content is set in bold condensed type on the left or right, alternating. 4. **The Cadence (viewport 6):** An interactive section where the user can click to set a tempo. Each click triggers a visual "step" -- a horizontal line draws across the screen, and a counter increments. After 10 clicks, the accumulated lines form a visual rhythm pattern, a barcode-like graphic unique to the user's timing. 5. **The Horizon (viewport 7/footer):** The diagonal sections resolve into a single horizontal line at the top third of the viewport -- the horizon. Below it, spring colors (pale green, warm yellow) bleed upward like dawn. The footer text reads: "March ends. April begins. The march continues." ## Typography and Palette **Typography:** - **Display / Slogans:** "Bebas Neue" (Google Fonts) -- an ultra-condensed, all-caps sans-serif with a stencil quality that evokes protest signage and military lettering. Used at clamp(4rem, 10vw, 10rem), weight 400 (its only weight). Letter-spacing 0.06em. The extreme vertical proportion creates visual urgency. - **Body / Narrative:** "Inter" (Google Fonts) -- a versatile neo-grotesque sans-serif designed for screen readability. Weight 400, line-height 1.7, 16px base. Its neutral character lets the display type carry the emotional weight while body text stays clear and functional. - **Dates / Data:** "Space Mono" (Google Fonts) -- a monospace with character, used for the calendar dates, historical references, and the cadence counter. Weight 400, 14px. Its fixed width makes the calendar grid perfectly aligned. **Palette:** | Role | Color | Hex | |------|-------|-----| | Paper white (primary bg) | Stark white | #fafafa | | Ink black (primary text) | True black | #111111 | | Protest red (accent 1) | Signal red | #d42b2b | | Military olive (accent 2) | Army green | #4a5a3a | | Spring gold (accent 3) | March sun | #d4a530 | | Newsprint gray (surface) | Warm gray | #e8e4de | | Night march | Deep navy | #1a1e2e | | Spring green | Equinox | #5a8a4a | This is a high-contrast duotone system at its core (black and white with red), extended by the thematic accent colors for each march type. The palette deliberately avoids gradients -- every color is flat and solid, like ink on paper or paint on a protest sign. ## Imagery and Motifs **Core Visual Motifs:** 1. **The Pulse Line:** A horizontal line that pulses rhythmically (CSS scaleX animation), appearing in the hero and recurring as a section divider throughout. This is the visual heartbeat of the site -- constant, rhythmic, and alive. Line weight: 3px, color: #111111. 2. **Stencil Cut Typography:** Display text uses Bebas Neue but with additional CSS clip-path treatments that create stencil gaps in certain letterforms, giving the appearance of spray-painted text through a physical stencil template. This is achieved with pseudo-elements that mask thin horizontal strips. 3. **Diagonal Section Cuts:** All section transitions use CSS clip-path: polygon() to create sharp diagonal cuts (15-20 degree angles), making each section appear to slice into the next like overlapping cards fanned at an angle. The direction alternates (left-to-right, right-to-left) maintaining the z-pattern reading rhythm. 4. **Calendar Grid as Data Art:** The 31-cell March calendar is both functional and decorative -- a bento-box grid where each cell is a micro-narrative. Cells use different background opacities (0.02 to 0.08) based on the historical significance of their date, creating a subtle heat map effect. 5. **Barcode Rhythm Graphic:** The cadence interaction produces a barcode-like pattern of varying-width vertical lines, rendered in real-time based on the timing of user clicks. This graphic is unique to each visitor and serves as a visual souvenir of their interaction. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a white viewport. After 200ms, the pulse line appears at center -- a 3px black horizontal line that immediately begins its rhythmic scaleX animation (0.9 to 1.1, 1.2s cycle, ease-in-out). After 800ms, "MARCH" slams in from above (translateY: -100vh to 0, 400ms, cubic-bezier(0.16, 1, 0.3, 1) -- a fast, impactful entrance with slight bounce). Below the pulse line, "keep moving." fades in at 1.2s. **Scroll behavior:** The stacked sections use CSS scroll-snap: mandatory for precise viewport-height stops. Each section transition uses the diagonal clip-path animation -- the new section slides up while its clip-path expands from 0% to 100% coverage over 600ms. The z-pattern alternation is achieved through alternating justify-content (flex-start/flex-end) on each section container. **Calendar grid:** Uses CSS grid with grid-template-columns: repeat(7, 1fr). The stagger animation uses a custom property --delay set via nth-child: nth-child(1) { --delay: 0ms }, nth-child(2) { --delay: 50ms }, etc. Each cell transitions from opacity 0 + translateY(10px) to full visibility when the section enters the viewport (IntersectionObserver trigger). **Cadence interaction:** Each click creates a new div element with width proportional to the time since last click (short interval = thin line, long interval = thick line). Lines are appended horizontally into a flex container. The click also triggers a brief CSS flash animation (background-color: #d42b2b for 100ms) on the viewport background, creating a visual "beat." AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No product marketing. The site is a rhythmic visual essay, not a calendar app. Bias toward full-screen sections where each viewport is one beat in the march, creating a physical sense of forward momentum through scroll. ## Uniqueness Notes **Differentiators from other designs:** 1. **Rhythmic pulse as primary design element:** The pulsing horizontal line is unlike any motif in the portfolio. It creates a visual cadence that ties the entire site together and makes the "march" concept viscerally felt rather than just described. 2. **Stencil-cut CSS typography:** The clip-path masking technique on Bebas Neue letterforms creates a spray-painted stencil effect that no other design attempts. This bridges graphic design and street art in a way that is technical to implement but visually impactful. 3. **Triple-meaning thematic structure:** The site explores "march" as month, movement, and military action simultaneously, using palette shifts (red/black/olive/green-gold) to differentiate contexts while maintaining structural unity. No other design in the portfolio carries three distinct interpretations of its domain name. 4. **User-generated barcode graphic:** The cadence interaction produces a unique visual artifact from each visitor's click timing, introducing generative art through the simplest possible input (timing between clicks). This is participatory design at its most minimal. 5. **Flat, gradient-free duotone palette:** In a portfolio where 94% of designs use gradients, march.day uses exclusively flat, solid colors -- every hue is a single hex value, like ink on paper. This creates a graphic, poster-like quality that stands apart. **Chosen seed/style:** memphis bold shapes portfolio **Avoided overused patterns:** corporate aesthetic, gradient palette, mysterious-moody tone, counter-animate as primary, centered layout **Preferred underused elements:** bebas-bold typography (3%), high-contrast duotone, edgy-rebellious tone, diagonal-sections layout, stencil visual treatment