# Design Language for rinji.net ## Aesthetics and Tone rinji.net channels a corporate aesthetic — the structured, professional visual language of enterprise platforms applied with intentional self-awareness to a temporary/ad-hoc (臨時) network platform. The site suits up — clean information hierarchy, systematic color coding, and the polished efficiency of an organization that takes its temporary nature with deadpan seriousness. Inspiration draws from the structured interfaces of Bloomberg Terminal, the systematic identity of IBM's design language, the information architecture of Salesforce, and the enterprise clarity of Microsoft Fluent Design. The tone is friendly — warm, accessible language that humanizes the corporate visual structure with genuine approachability. ## Layout Motifs and Structure The layout uses a **diagonal-sections** architecture — content arranged with angled section transitions that create the dynamic quality of data flowing between organizational levels. **Diagonal Sections Architecture:** - Sections separated by diagonal cuts (CSS clip-path at 3-5 degree angles) - Content: max-width: 880px within diagonal-cut sections - Feature sections: full-width with internal diagonal divisions - Alternating section backgrounds for clear data separation - Container: full-width diagonal sections with 880px inner content - The diagonals create the energy-flow quality of data moving through organizational structures **Section Sequence:** 1. **Briefing:** Hero with expressive-variable title on dark-neon corporate gradient, neon-glow data accent illumination, mountain-landscape structural horizon markers 2. **Network:** Platform features in diagonal sections — progressive-disclosure interactive feature layering with neon-glow focused accents 3. **Core System:** Featured capability in full-width diagonal with mountain-landscape atmospheric depth and neon-glow immersive lighting 4. **Status:** System metrics in focused diagonal section with neon-glow data indicators 5. **Standby:** Footer as system pause — friendly farewell with mountain-landscape settled horizon and warm closing ## Typography and Palette **Typography:** - **Headlines:** "Recursive" (Google Fonts) — expressive variable at 2.2rem-3rem, weight 700, using casual axis for personality. Its variable nature creates the adaptive quality of a system that adjusts to context. - **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 network data and system metrics. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Dark Slate:** #0c1018 — deep dark slate for backgrounds - **Slate Surface:** #141c28 — rich slate for panels - **Neon Cyan:** #38d8e8 — bright neon cyan for primary accent - **Neon Violet:** #8858d8 — vivid violet for secondary accent - **Neon Amber:** #d8a838 — warm amber for tertiary accent - **Slate Light:** #c8d0e0 — cool light for text - **Shadow Slate:** #283040 — slate shadow for secondary text - **Border Neon:** rgba(56,216,232,0.08) — cyan tint border ## Imagery and Motifs **Neon-Glow Data Illumination:** Network features highlighted with neon accent glow — box-shadow: 0 0 16px rgba(56,216,232,0.06), 0 0 4px rgba(56,216,232,0.03). Key data points with text-shadow: 0 0 8px rgba(56,216,232,0.2). The neon creates the data-dashboard quality of important metrics illuminated for attention. **Progressive-Disclosure Feature Layering:** Platform capabilities reveal in layers — first overview (400ms), then details (delay 200ms), then technical specs (delay 400ms), then API examples (delay 600ms). Each layer with opacity 0 to 1 and translateY(10px) to translateY(0). The disclosure creates the onboarding quality of enterprise features revealed at the right pace. **Mountain-Landscape Structural Horizons:** Section backgrounds feature distant mountain-like silhouettes — SVG mountain profiles (full-width, 40-80px) in Slate Light at 0.015 opacity at section bottoms. The mountains create the structural quality of a network platform with solid foundations and distant visibility. **Dark-Neon Corporate Atmosphere:** Background uses deep slates with neon data accents — radial-gradient(at 40% 30%, rgba(56,216,232,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(136,88,216,0.015), transparent 30%). The dark-neon creates the control-room quality of enterprise monitoring in a modern operations center. **Diagonal Cut Transitions:** Section transitions use CSS clip-path — polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%) creating 3-5 degree angle cuts between sections. The diagonals create the data-flow quality of information moving between organizational levels. ## Prompts for Implementation Build the page as a corporate ad-hoc network platform. Diagonal: .diagonal-section { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); padding: 80px 0 120px; } .diagonal-content { max-width: 880px; margin: 0 auto; padding: 0 24px; } Progressive-disclosure: .feature-layer > * { opacity: 0; transform: translateY(10px); transition: all 400ms ease-out; } .feature-layer.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); } .feature-layer.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 200ms; } .feature-layer.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 400ms; } Neon glow: .data-highlight { box-shadow: 0 0 16px rgba(56,216,232,0.06), 0 0 4px rgba(56,216,232,0.03); } .data-value { text-shadow: 0 0 8px rgba(56,216,232,0.2); } Mountain horizon: .horizon svg { position: absolute; bottom: 0; width: 100%; opacity: 0.015; fill: #c8d0e0; } Network panel: .net-card { background: #141c28; border: 1px solid rgba(56,216,232,0.08); border-radius: 8px; padding: 24px; } AVOID: Generic corporate platforms that lack self-awareness, sterile enterprise dashboards, and minimal network tools. Let corporate structure with friendly warmth create a temporary network platform where enterprise professionalism serves the playful purpose of an ad-hoc system that takes itself seriously just the right amount. ## Uniqueness Notes 1. **Self-aware corporate for ad-hoc network:** Enterprise visual language applied to a temporary platform creates intentional, humorous contrast. 2. **Diagonal-sections as data flow:** Angled transitions create the dynamic quality of data flowing between organizational levels. 3. **Progressive-disclosure as onboarding:** Layered reveals create the enterprise quality of features presented at the right pace. 4. **Expressive-variable typography:** Adaptive type creates the system quality of technology that adjusts to its context. 5. **Dark-neon as operations center:** Deep backgrounds with neon data accents create the monitoring-room quality of enterprise operations. **Seed/Style:** aesthetic: corporate, layout: diagonal-sections, typography: expressive-variable, palette: dark-neon, patterns: progressive-disclosure, imagery: neon-glow, motifs: mountain-landscape, tone: friendly **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses corporate aesthetic, diagonal-sections layout, dark-neon palette, neon-glow imagery, and friendly tone.