# Design Language for saram.ai ## Aesthetics and Tone saram.ai channels an inflated-3d aesthetic — the puffy, volumetric visual language of soft-body rendered objects applied to a 사람 (human/person) AI platform. The site breathes — rounded, inflated surfaces suggesting the warmth and softness of human presence, cushioned interfaces that feel touchable and alive, and the comforting dimensionality of technology designed around human comfort. Inspiration draws from the inflatable sculptures of Jeff Koons, the soft-body renders of Madrid-based 3D artist Zigor, the cushioned interfaces of Teenage Engineering's products, and the rounded friendliness of Nintendo's character design philosophy. The tone is friendly — warm, accessible language that makes AI for humans feel genuinely approachable and caring. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content flowing in a single centered column that creates the conversational quality of a one-on-one dialogue between human and AI. **Single Column Architecture:** - Single centered column: max-width: 700px - Generous spacing between sections (80-120px) - Content centered with comfortable reading width - Feature moments: max-width: 560px for intimate focus - Container: max-width: 700px centered with 24px padding - The single column creates the personal quality of a private conversation between a human and their AI companion **Section Sequence:** 1. **Encounter:** Hero with commissioner-versatile title on duotone inflated gradient, paper-aged warm humanistic textures, retro-patterns nostalgic human-memory motifs 2. **Understanding:** AI capabilities in single-column flow — skeleton-loading interactive human-patience loading states with paper-aged gentle aging 3. **Connection:** Featured human-AI interaction in intimate 560px focus with retro-patterns warm memory patterns and paper-aged deep texture 4. **Memory:** Shared experiences in flowing column with retro-patterns faded human memories 5. **Together:** Footer as ongoing bond — friendly farewell with retro-patterns settled memories and warm closing ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile variable sans at 2.2rem-3rem, weight 700. Its adaptable forms create the human-responsive quality of typography that adjusts its expression to match the emotional context of each human interaction. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Commissioner" at 1rem, weight 500 for human-AI dialogue highlights and emotional annotations. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.08em. **Color Palette:** - **Human Warm:** #f4ece0 — warm human-skin tone for backgrounds - **Duotone Surface:** #e0d4c4 — warm duotone for panels - **Human Coral:** #d87868 — warm coral for primary accent (human warmth) - **AI Violet:** #7868b8 — soft violet for secondary accent (AI presence) - **Connection Gold:** #c8a858 — warm gold for tertiary accent (human-AI bond) - **Deep Warm:** #241c14 — deep warm for text - **Soft Shadow:** #988878 — warm shadow for secondary text - **Border Coral:** rgba(216,120,104,0.1) — coral tint border ## Imagery and Motifs **Paper-Aged Warm Humanistic Textures:** Interface surfaces feature paper-like aging — background with subtle warm noise (radial-gradient dots at 0.008 opacity creating fine texture), border treatment with slightly irregular edges (border-radius: 12px 14px 12px 10px for organic variation). The paper creates the human-artifact quality of technology that feels handmade and personal. **Skeleton-Loading Human Patience:** Content loading with gentle skeleton states — rectangular blocks (border-radius: 8px) in Duotone Surface with shimmer animation (background: linear-gradient(90deg, transparent, rgba(216,120,104,0.04), transparent) moving right at 1.5s infinite). The skeleton creates the patient-waiting quality of AI that respects human time and attention. **Retro-Patterns Nostalgic Memory:** Decorative background patterns evoking human nostalgia — subtle geometric patterns (small circles 4px at 20px intervals, thin crosses 6px at 40px intervals) in Human Coral at 0.03 opacity. The patterns create the wallpaper quality of human homes and familiar spaces. **Duotone Inflated Atmosphere:** Background uses two warm tones with inflated depth — radial-gradient(at 50% 30%, rgba(216,120,104,0.03), transparent 40%), radial-gradient(at 50% 70%, rgba(120,104,184,0.02), transparent 35%). The duotone creates the human-AI quality of two presences sharing the same warm space. **Inflated Interface Elements:** Interactive elements with pronounced depth suggesting inflated, touchable surfaces — box-shadow: 0 6px 24px rgba(36,28,20,0.06), 0 2px 8px rgba(36,28,20,0.04); border-radius: 16px. On hover: transform: scale(1.02) with shadow increase. The inflation creates the tactile quality of interfaces you want to reach out and touch. ## Prompts for Implementation Build the page as an inflated-3d human-AI dialogue. Single column: .human-section { max-width: 700px; margin: 0 auto; padding: 100px 24px; } .human-intimate { max-width: 560px; margin: 0 auto; } Skeleton loading: .skeleton-block { background: #e0d4c4; border-radius: 8px; position: relative; overflow: hidden; } .skeleton-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(216,120,104,0.04), transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } Inflated element: .inflated-card { background: #e0d4c4; box-shadow: 0 6px 24px rgba(36,28,20,0.06), 0 2px 8px rgba(36,28,20,0.04); border-radius: 16px; padding: 32px; border: 1px solid rgba(216,120,104,0.1); transition: all 300ms ease-out; } .inflated-card:hover { transform: scale(1.02); box-shadow: 0 8px 32px rgba(36,28,20,0.08), 0 3px 12px rgba(36,28,20,0.05); } Retro pattern: .memory-pattern::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(216,120,104,0.03) 2px, transparent 2px); background-size: 20px 20px; pointer-events: none; } AVOID: Corporate AI dashboards, sterile chatbot interfaces, and minimal technology platforms. Let inflated-3d warmth and friendly accessibility create a human-AI platform where 사람 is celebrated as the center of AI design, each interaction cushioned in inflated comfort that makes technology feel genuinely human. ## Uniqueness Notes 1. **Inflated-3d for human-AI:** Puffy, touchable surfaces make AI technology feel genuinely warm, soft, and designed around human comfort rather than efficiency. 2. **Single-column as personal dialogue:** Intimate centered flow creates the quality of a private conversation between a human and their caring AI companion. 3. **Skeleton-loading as patient respect:** Gentle loading states create the quality of AI that respects human time and waits patiently rather than demanding attention. 4. **Paper-aged as human artifact:** Warm aging textures create the quality of technology that feels handmade and personal rather than mass-produced. 5. **Duotone as shared presence:** Two-tone harmony creates the quality of human warmth and AI intelligence occupying the same comfortable space. **Seed/Style:** aesthetic: inflated-3d, layout: single-column, typography: commissioner-versatile, palette: duotone, patterns: skeleton-loading, imagery: paper-aged, motifs: retro-patterns, tone: friendly **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 inflated-3d aesthetic, single-column layout, duotone palette, paper-aged imagery, and friendly tone.