# Design Language for rinji.dev ## Aesthetics and Tone rinji.dev channels a pixel-art aesthetic — the nostalgic, grid-constrained visual language of 8-bit and 16-bit era graphics applied to a temporary/ad-hoc (臨時) developer tools platform. The site renders pixel by pixel — crisp edges, limited color palettes, and the charming constraint of visual expression within rigid grid boundaries. Inspiration draws from the sprite work of classic NES-era games, the pixel art of eBoy's cityscapes, the chiptune-visual culture of demoscene, and the retro pixel interfaces of early Macintosh computing. The tone is approachable-casual — friendly, relaxed language that makes developer tools feel like retro-gaming companions. ## Layout Motifs and Structure The layout uses a **card-grid** architecture — content organized in a grid of cards that creates the inventory-screen quality of developer tools displayed as collectable pixel-art items. **Card Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(240px, 1fr)) - Cards: uniform size with pixel-perfect borders - Feature cards span 2 columns for boss-level tools - Gap: 8px (pixel-grid aligned) - Container: max-width: 1040px centered - The card grid creates the inventory-screen quality of tools collected in a pixel-art RPG **Section Sequence:** 1. **Boot:** Hero with condensed title on warm pixel gradient, line-illustration pixel-style tool graphics, candle-atmospheric warm pixel glow 2. **Inventory:** Tools in card grid — magnetic interactive item attraction with line-illustration detailed pixel icons 3. **Rare Item:** Featured tool in double-span card with candle-atmospheric warm spotlight and line-illustration premium pixel art 4. **Quick Tools:** Utility items in compact grid with line-illustration simplified pixel icons 5. **Save:** Footer as game save — approachable-casual farewell with candle-atmospheric settled glow and friendly closing ## Typography and Palette **Typography:** - **Headlines:** "Barlow Condensed" (Google Fonts) — condensed sans at 2.2rem-3rem, weight 700. Its narrow, efficient forms create the HUD-readout quality of pixel-game interfaces with limited screen space. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for code examples and tool commands. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Pixel Warm:** #f4ece0 — warm pixel cream for backgrounds - **Pixel Surface:** #e4d8c8 — warm surface for cards - **Pixel Teal:** #38a8a0 — bright pixel teal for primary accent - **Pixel Orange:** #d88040 — warm pixel orange for secondary accent - **Pixel Green:** #58a848 — pixel green for tertiary accent - **Text Dark:** #201810 — warm dark for body text - **Pixel Gray:** #887868 — warm gray for secondary text - **Border Pixel:** rgba(56,168,160,0.12) — teal pixel border ## Imagery and Motifs **Line-Illustration Pixel Tool Icons:** Developer tools illustrated through pixel-styled line art — simplified tool icons (wrenches, terminals, code brackets, 20-28px) rendered with crisp, pixel-aligned 2px strokes in Pixel Teal and Pixel Orange. No anti-aliasing effects — deliberately crisp edges. The pixel line art creates the retro-game quality of tools as collectible inventory items. **Magnetic Item Attraction:** Tool cards respond to cursor proximity — cards within 120px radius shift slightly toward cursor (2-4px), creating the item-pickup quality of hovering over collectibles in a pixel RPG. **Candle-Atmospheric Warm Glow:** Featured tools emit warm pixel glow — box-shadow: 0 0 16px rgba(216,128,64,0.08), 0 0 4px rgba(216,128,64,0.04). The warm glow creates the torch-lit quality of discovering rare items in a pixel-art dungeon. **Warm Pixel Gradient:** Background uses warm, screen-like tones — linear-gradient(180deg, #f4ece0, #e4d8c8). No smooth gradients within cards — flat color blocks only, maintaining pixel-art's sharp-edge discipline. **8-Bit Border Style:** Card borders use deliberately thick, uniform strokes — border: 2px solid rgba(56,168,160,0.15); border-radius: 0 (square corners only). The sharp borders create the pixel-perfect quality of retro-game UI elements. ## Prompts for Implementation Build the page as a pixel-art developer tool inventory. Card grid: .pixel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; max-width: 1040px; margin: 0 auto; padding: 60px 24px; } .rare-tool { grid-column: span 2; } Magnetic: .tool-card { transition: transform 200ms ease-out; } /* JS: calculate cursor distance, apply subtle position shift toward cursor */ Pixel card: .pixel-card { background: #e4d8c8; border: 2px solid rgba(56,168,160,0.15); border-radius: 0; padding: 20px; image-rendering: pixelated; } Candle glow: .rare-glow { box-shadow: 0 0 16px rgba(216,128,64,0.08), 0 0 4px rgba(216,128,64,0.04); } Pixel icon: .pixel-icon svg { stroke: var(--icon-color, #38a8a0); stroke-width: 2; fill: none; shape-rendering: crispEdges; stroke-linecap: square; stroke-linejoin: miter; } AVOID: Standard developer tool dashboards, corporate SaaS platforms, and minimal documentation sites. Let pixel-art nostalgia and approachable-casual friendliness create a developer tool inventory where temporary tools feel like valuable collectibles in a retro RPG. ## Uniqueness Notes 1. **Pixel-art for developer tools:** Retro 8-bit visual language makes development tools feel like collectible game inventory rather than corporate utilities. 2. **Card-grid as inventory screen:** Grid layout creates the RPG-inventory quality of tools organized for quick selection. 3. **Magnetic as item pickup:** Cursor-responsive cards create the game-hover quality of selecting items in a pixel RPG. 4. **Candle-atmospheric as dungeon torch:** Warm glow creates the discovery quality of finding rare tools in a pixel-art exploration. 5. **Square corners as pixel discipline:** Zero border-radius maintains the sharp-edge quality of authentic pixel-art UI. **Seed/Style:** aesthetic: pixel-art, layout: card-grid, typography: condensed, palette: warm, patterns: magnetic, imagery: line-illustration, motifs: candle-atmospheric, tone: approachable-casual **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 pixel-art aesthetic, card-grid layout, warm palette, line-illustration imagery, and approachable-casual tone.