# Design Language for sarampass.com ## Aesthetics and Tone sarampass.com channels a bauhaus aesthetic — the systematic, geometric clarity of the Bauhaus school applied to a 사람 (human) identification platform. The site verifies — every element serves the function of establishing human identity through geometric precision, systematic color coding, and the ordered beauty of classification systems designed to recognize and authenticate individual humans. Inspiration draws from the systematic identity work of Otl Aicher for the Munich Olympics, the geometric passport design systems of international travel documents, the information architecture of identification card standards, and the grid precision of Swiss international style. The tone is elegant-sophisticated — refined, articulate language that treats human identification with the dignity of a system designed to honor individual identity. ## Layout Motifs and Structure The layout uses a **minimal-navigation** architecture — content organized with minimal navigational chrome that creates the focused quality of an identification system where the human subject is the sole focus of attention. **Minimal Navigation Architecture:** - Minimal header: logo and single navigation element only - Content: max-width: 800px centered with generous margins - Feature sections: 640px for focused identity presentation - No sidebar, no footer navigation clutter - Container: max-width: 800px with clean, uncluttered vertical flow - The minimal navigation creates the focused quality of identification systems where nothing distracts from the human subject **Section Sequence:** 1. **Verify:** Hero with grotesque-neo title on dark-neon bauhaus gradient, duotone-photo high-contrast identity imagery, tech geometric verification markers 2. **Identity:** Human attributes in minimal-navigation flow — shake-error interactive authentication-failure responses with duotone-photo processed documentation 3. **Passport:** Featured identification in focused 640px presentation with tech precision markers and duotone-photo formal identity imagery 4. **Registry:** Identity records in clean flow with tech reduced markers 5. **Cleared:** Footer as verification complete — elegant-sophisticated farewell with tech resolved verification and refined closing ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — grotesque-neo sans at 2.2rem-3rem, weight 700. Its contemporary geometric forms create the systematic quality of identification typography designed for absolute clarity and unambiguous reading. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for identification numbers, verification codes, and authentication data. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.12em. **Color Palette:** - **Dark System:** #0c0e14 — deep system dark for backgrounds - **Panel Dark:** #141820 — dark panel for cards - **Neon Green:** #38d868 — vivid neon green for primary accent (verified/pass) - **Neon Red:** #d83848 — bright neon red for secondary accent (failed/deny) - **Neon Blue:** #3868d8 — bright neon blue for tertiary accent (processing) - **System Light:** #d0d8e0 — cool system light for text - **Shadow System:** #283038 — system shadow for secondary text - **Border Neon:** rgba(56,216,104,0.08) — green tint border ## Imagery and Motifs **Duotone-Photo Identity Imagery:** Human identity imagery processed in high-contrast duotone — CSS filter: grayscale(1) contrast(1.4) with color overlay via mix-blend-mode. Verification photos in Neon Green overlay for approved, Neon Red for denied. The duotone creates the passport-photo quality of identity images processed for systematic recognition. **Shake-Error Authentication Failures:** Failed verification triggers physical-error feedback — element shakes horizontally (translateX: 0 to -6px to 6px to -4px to 4px to 0 over 400ms) with border-color flash to Neon Red. The shake creates the visceral quality of a security gate rejecting unauthorized access. **Tech Geometric Verification:** Precision geometric markers for authentication stages — small squares (6px) in Neon Green for verified steps, circles (6px) in Neon Blue for processing, triangles (6px) in Neon Red for failed. Connected by thin lines (1px at 0.06 opacity) showing verification flow. The markers create the systematic quality of identification processed through geometric classification. **Dark-Neon Bauhaus Atmosphere:** Background uses deep system darkness with neon status indicators — radial-gradient(at 40% 30%, rgba(56,216,104,0.015), transparent 35%), radial-gradient(at 60% 70%, rgba(56,104,216,0.01), transparent 30%). The dark-neon creates the security-system quality of identification verified under controlled lighting conditions. **ID Grid Pattern:** Subtle background grid evoking identification document security patterns — repeating-linear-gradient at 45deg creating fine diagonal hatching (1px lines at 12px intervals in System Light at 0.015 opacity). The pattern creates the security-document quality of anti-counterfeit background textures. ## Prompts for Implementation Build the page as a bauhaus human identification system. Minimal nav: .id-section { max-width: 800px; margin: 0 auto; padding: 80px 24px; } .id-focus { max-width: 640px; margin: 0 auto; } header { max-width: 800px; margin: 0 auto; padding: 24px; display: flex; justify-content: space-between; align-items: center; } Shake error: .auth-fail { animation: shake-deny 400ms ease-out; border-color: #d83848 !important; } @keyframes shake-deny { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(4px); } } Verification marker: .verify-pass { width: 6px; height: 6px; background: rgba(56,216,104,0.2); } .verify-process { width: 6px; height: 6px; border-radius: 50%; background: rgba(56,104,216,0.2); } .verify-fail { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 6px solid rgba(216,56,72,0.2); } ID panel: .id-card { background: #141820; border: 1px solid rgba(56,216,104,0.08); border-radius: 4px; padding: 28px; } Security pattern: .security-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(208,216,224,0.015) 11px, rgba(208,216,224,0.015) 12px); pointer-events: none; } AVOID: Generic authentication interfaces, corporate identity management dashboards, and minimal login pages. Let Bauhaus systematic precision and elegant-sophisticated dignity create a human identification platform where 사람 identity verification is treated as a serious, beautiful process that honors the uniqueness of each individual human. ## Uniqueness Notes 1. **Bauhaus for human identification:** Systematic geometric clarity makes identity verification feel like a dignified, precisely engineered process honoring individual humans. 2. **Minimal-navigation as focused verification:** Stripped interface creates the quality of identification systems where nothing distracts from the human subject. 3. **Shake-error as physical rejection:** Visceral shake feedback creates the security-gate quality of systems that physically respond to authentication failure. 4. **Duotone identity photos as systematic processing:** High-contrast processing creates the passport-documentation quality of identity images classified for recognition. 5. **Neon status coding as verification language:** Green/blue/red neon system creates the clear quality of identification results communicated through unambiguous color. **Seed/Style:** aesthetic: bauhaus, layout: minimal-navigation, typography: grotesque-neo, palette: dark-neon, patterns: shake-error, imagery: duotone-photo, motifs: tech, tone: elegant-sophisticated **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses bauhaus aesthetic, minimal-navigation layout, dark-neon palette, duotone-photo imagery, and elegant-sophisticated tone.