# Design Language for ipjosim.com ## Aesthetics and Tone ipjosim.com is a time capsule unearthed from a forgotten filing cabinet in a 1970s municipal planning office -- the kind of place where blueprints were traced on vellum under fluorescent tubes, where carbon-copy memos accumulated in color-coded folders, and where the future of cities was imagined through the optimistic haze of postwar modernism. The aesthetic is **bureaucratic retro**: the peculiar beauty of institutional design artifacts from the 1960s-1970s, when governmental agencies, public utilities, and interplanetary research organizations produced pamphlets, reports, and public information booklets with a distinctive visual language -- warm sepia photography paired with bold modular typography, technical diagrams rendered with meticulous hand-lettering, and layouts that trusted the grid with almost religious devotion. The tone is **nostalgic-retro** -- not in the saccharine, Instagram-filter sense, but in the way that handling a fifty-year-old document triggers a specific emotional register: the texture of the paper stock, the slight misregistration of the print, the earnest belief in progress encoded in every diagram and chart. There is no irony here. ipjosim.com treats its subject matter the way a 1972 public information bureau would: with institutional seriousness, civic pride, and the quiet conviction that good design serves the public good. The visual world draws specifically from: Soviet-era scientific publications with their bold red-and-sepia color blocking; Japanese public works brochures from the Showa era with their meticulous modular grids; and the institutional identity systems of organizations like NASA's 1975 Graphics Standards Manual -- where every element had a specified position, a designated color, and a reason for existing. ## Layout Motifs and Structure The layout is built on a **modular block system** -- a rigid, unapologetic grid of rectangular modules that snap together like the panels of a filing cabinet or the pages of a bound government report. This is not a fluid, responsive-first layout that flexes and breathes; it is an engineered structure where every content block occupies a precisely defined cell within a visible grid framework. **Grid Specification:** The master grid divides the viewport into a 12-column system, but content modules deliberately occupy only specific column spans: 3-column (quarter), 4-column (third), 6-column (half), and 12-column (full) blocks. The grid has visible gutters of 2px rendered as thin sepia lines (#8B7355 at 30% opacity), making the underlying structure a permanent visual element rather than an invisible scaffold. Modules are separated by 16px gaps that read as the physical space between filed documents. **Block Taxonomy:** 1. **Header Block (12-col):** A full-width band at the top, 80px tall, containing the domain name flush-left in capitals and a thin horizontal rule beneath. This block has a slightly darker sepia background (#F0E4CC) than the page body, simulating the darker edge of an aged document. 2. **Feature Modules (6-col or 4-col):** Content blocks that pair a headline with body text and an optional diagram. Each module has a 1px solid border in #8B7355 and a subtle inner shadow (inset 0 0 12px rgba(139, 115, 85, 0.08)) that creates the illusion of a recessed panel on paper stock. 3. **Diagram Panels (4-col or 3-col):** Square or near-square modules containing technical illustrations, charts, or schematics rendered in the sepia-and-red palette. These panels have a slightly yellowed background (#F5ECD5) to simulate aged vellum. 4. **Text Columns (6-col):** Dual-column text blocks that mimic the layout of a typeset government report, with justified text, paragraph indentation of 1.5em, and running headers in small caps. 5. **Index Strips (12-col, 48px height):** Narrow full-width bands that function as section dividers, containing section numbers and titles in a style that mimics the tab strips on hanging file folders -- text is flush-left, with a colored tab indicator (a 4px-tall rectangle) at the far right. **Spatial Logic:** The page unfolds as a vertical sequence of modular rows, each row containing 2-4 blocks arranged to create a rhythm of visual density and breathing space. Every third row is a single full-width "panoramic" block that breaks the modular pattern with a large-scale diagram or photographic element, preventing the grid from becoming monotonous. Scroll position is never indicated by a progress bar or floating navigation -- instead, the section index strips function as implicit wayfinding, each one numbered sequentially (Section 01, Section 02...) in the style of a table of contents. ## Typography and Palette **Typography:** - **Display / Section Headers:** "Playfair Display" (Google Fonts), weight 700 (Bold), used at 2.8rem-4.5rem. Set in uppercase with `letter-spacing: 0.12em` and `line-height: 1.05`. This typeface's high-contrast transitional strokes evoke the engraved headings of formal institutional publications. All display text is rendered in the dark umber (#3B2F20) with no additional effects -- the letterforms themselves carry sufficient gravity. Where a heading spans a full-width block, the text is tracked out further to 0.18em to fill the horizontal space with deliberate ceremony. - **Body / Running Text:** "Source Serif 4" (Google Fonts), weight 400 (Regular) and 600 (Semibold) for emphasis. Set at 1.05rem with `line-height: 1.72` and `letter-spacing: 0.005em`. This typeface's sturdy serifs and generous x-height make it supremely readable at small sizes while maintaining the tone of a properly typeset government document. Body text is always justified (`text-align: justify`) with `hyphens: auto` enabled. Semibold is used exclusively for inline emphasis -- never italic, which would undermine the institutional register. - **Captions / Labels / Index Text:** "Space Mono" (Google Fonts), weight 400, set at 0.75rem with `letter-spacing: 0.06em` and `text-transform: uppercase`. This monospaced face provides the technical, cataloguing quality needed for diagram labels, section indices, figure numbers, and marginal annotations. Its geometric regularity contrasts with the organic warmth of the serif faces, creating the visual friction characteristic of mid-century technical publications where hand-set body text coexisted with typewritten annotations. - **Numerals / Data:** "Space Mono" at 1.2rem for any numerical data, chart values, or statistical callouts. Numbers are always tabular-aligned and rendered in the accent red (#9B3A28) to distinguish quantitative content from prose. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper Base | Aged Linen | #F5EDDC | Page background, primary surface | | Vellum | Yellowed Stock | #F0E4CC | Header blocks, diagram panel backgrounds | | Document Cream | Warm Ivory | #EDE3CE | Alternate block backgrounds | | Primary Text | Dark Umber | #3B2F20 | Headlines, body text, primary content | | Secondary Text | Warm Sepia | #8B7355 | Borders, captions, grid lines, rules | | Accent Red | Institutional Red | #9B3A28 | Numerals, highlights, tab indicators, key diagrams | | Deep Brown | Archive Brown | #5C4231 | Section headers on feature modules, subheadings | | Muted Gold | Filing Tab | #C4A45A | Decorative accents, index strip tab markers | | Off-Black | Carbon Copy | #2A2118 | Small text where maximum contrast is needed | The palette is strictly sepia-nostalgic: every color is warm, every surface simulates aged paper stock, and the single accent red provides the only chromatic punctuation -- used the way a government printer would use a second ink color on a two-color press, sparingly and with deliberate purpose. ## Imagery and Motifs **Paper-Aged Textures as Foundational Layer:** The entire site sits atop a subtle paper grain texture applied to the `` element. This is not a photographic paper texture (which would be too heavy) but a CSS-generated noise pattern: a 200x200px SVG tile using `` with `baseFrequency="0.65"` and `numOctaves="4"`, composited at 4% opacity over the #F5EDDC base. The result is a barely-perceptible fibrous grain that reads subconsciously as physical paper without demanding visual attention. **Technical Diagrams as Primary Imagery:** All visual content takes the form of technical diagrams -- schematic drawings, flowcharts, cross-sections, and axonometric projections rendered in a style that mimics 1970s engineering illustration. These are constructed using pure SVG with the following visual rules: 1. **Stroke-only rendering:** All lines are 1.5px strokes in #5C4231 (archive brown) with `stroke-linecap: round` and `stroke-linejoin: round`, giving the slightly soft quality of technical pen on vellum. 2. **Annotation callouts:** Each diagram includes numbered annotation points -- small circles (8px diameter) with numbers inside in Space Mono -- connected to descriptive text by thin leader lines with right-angle bends, exactly as they would appear in a patent drawing or engineering specification. 3. **Registration marks:** Every diagram panel includes faint crop marks in its corners (thin 12px lines in #8B7355 at 20% opacity), simulating the registration marks of a professionally printed document. 4. **Red-line highlights:** Key elements within diagrams use the accent red (#9B3A28) for emphasis -- a technique borrowed from architectural redline markup, where the second color draws the reviewer's eye to critical details. **Document Artifacts as Decorative Elements:** - **Fold marks:** Subtle horizontal lines at 1/3 and 2/3 page height (1px dashed lines in #8B7355 at 15% opacity) simulate the fold creases of a tri-fold document. - **Punch holes:** Three small circles (6px, border-only, #8B7355 at 12% opacity) positioned at the left margin at 25%, 50%, and 75% page height, mimicking a three-hole punched filing system. - **Stamp marks:** Section transitions feature a circular "stamp" element -- a 48px circle with a double-line border and uppercase text inside (e.g., "APPROVED", "FILED", "REF-001") in the accent red at 40% opacity, rotated 12 degrees, simulating a bureaucratic rubber stamp. - **Page numbers:** The bottom of each major section displays a page number in Space Mono, centered, with an em-dash on each side (e.g., "-- 04 --"), exactly as they would appear in a paginated government report. **Vintage Motif Treatment:** The vintage motifs are specifically industrial-institutional rather than generically "old-timey." There are no distressed textures, no fake coffee stains, no faux-vintage Instagram filters. Instead, the vintage quality emerges from the precision of the design system itself: the rigid grid, the two-color printing limitation, the typographic conventions of institutional publishing. The motifs are: - Thin horizontal rules (0.5px solid #8B7355) used as paragraph separators - Ornamental section marks: a small diamond (6px, rotated 45deg, filled #C4A45A) centered between horizontal rules to mark major thematic breaks - Corner brackets: L-shaped decorative marks (16px) at the corners of feature modules, rendered as 1px lines in #8B7355, framing content the way archival photographs are mounted on card stock ## Prompts for Implementation **Full-Screen Narrative Document Experience:** The site must feel like scrolling through a declassified institutional document -- a bound report that has been digitized with reverence. There is no hero section, no call-to-action, no pricing grid. Instead, the experience opens on a full-viewport title page: the domain name in Playfair Display Bold at 4.5rem, centered vertically and horizontally, with a thin horizontal rule above and below, a "publication date" in Space Mono beneath (e.g., "Technical Memorandum // Ref. IPJ-2026-001"), and nothing else. The background is the paper base (#F5EDDC) with the SVG grain texture. This title page occupies 100vh and creates a moment of stillness before the document begins. **Scroll-Driven Module Reveal:** As the user scrolls past the title page, content modules animate into view using the `pulse-attention` pattern: each block begins at `opacity: 0` and `transform: scale(0.97)`, then pulses to full visibility with a two-stage animation -- first scaling to `1.02` over 200ms with `ease-out`, then settling to `1.0` over 150ms with `ease-in-out`. This creates a subtle "stamping" effect, as if each module is being impressed onto the page by a printing press. The timing is staggered: when a row of 2-3 modules enters the viewport, each module pulses 120ms after the previous one, creating a left-to-right printing sequence. **Diagram Drawing Animations:** Technical diagrams within diagram panels are drawn progressively using SVG `stroke-dasharray` and `stroke-dashoffset` animation. When a diagram panel enters the viewport (via IntersectionObserver with `threshold: 0.3`), the SVG paths begin drawing from zero offset to full length over 1.8 seconds with a custom cubic-bezier easing (0.25, 0.1, 0.25, 1.0). Annotation callouts fade in 400ms after the path drawing completes, with the leader lines drawing first (300ms) and the label text fading in last (200ms). This sequence mimics the process of a drafter completing a technical drawing -- structure first, then annotation. **Stamp Interaction:** The bureaucratic stamp elements are interactive: hovering over a stamp causes it to rotate from 12deg to 0deg over 300ms and increase from 40% to 90% opacity, as if the stamp is being pressed more firmly onto the page. On click/tap, the stamp "lands" with a brief scale pulse (1.0 to 1.08 to 1.0 over 250ms) and leaves a faint circular impression (a box-shadow ring in #9B3A28 at 8% opacity, 0 0 0 6px) that persists after the interaction. **Module Border Pulse:** Featured content modules (those containing key information) have a border that subtly pulses: the 1px border in #8B7355 gently oscillates between 30% and 60% opacity over a 3-second cycle using CSS `@keyframes`. This draws the eye without being aggressive -- it reads as the shimmer of light on an aged document surface rather than a UI attention-grab. **Print-Inspired Page Transitions:** When scrolling between major sections (marked by Index Strips), a brief visual effect simulates a page turn: the outgoing section's opacity decreases to 0.85 while simultaneously shifting `filter: sepia(20%)`, and the incoming section fades in from `filter: sepia(40%)` to `sepia(0%)` over 400ms. This creates the impression of turning pages in a bound document without resorting to literal page-flip animations. **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, hero images with overlay text, hamburger menus, floating action buttons, cookie banners, modal popups, or any element that breaks the institutional document fiction. **Typography Animation:** Section headers (Playfair Display) appear via a subtle bottom-to-top translate (20px to 0) combined with the pulse-attention opacity pattern. The translate distance is small enough to feel like text being revealed by a sliding panel rather than flying in from off-screen. Data numerals in Space Mono use a brief counter-animation (rolling through 3-4 intermediate values over 600ms before landing on the final number) when they first enter the viewport, evoking the mechanical counters of vintage tabulating machines. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bureaucratic-Institutional Aesthetic Framework:** No other design in the portfolio frames its visual identity through the specific lens of mid-century government publications and institutional printing. While "vintage" motifs appear at 79% frequency, they are overwhelmingly applied as generic distressing or nostalgic decoration. ipjosim.com derives its vintage quality from a hyper-specific source: the visual systems of public sector document design, complete with filing tabs, registration marks, punch holes, rubber stamps, and paginated section indices. This is vintage-as-system-design rather than vintage-as-surface-treatment. 2. **Visible Grid as Design Element:** The modular block layout (9% frequency -- underused) is implemented with visible grid lines that become a permanent part of the visual identity. Where other designs hide their grid infrastructure, ipjosim.com makes its 12-column grid visible as fine sepia rules, transforming the structural scaffold into a decorative motif. The grid lines read as the ruled lines of an accountant's ledger or the column guides on a paste-up board -- functional architecture elevated to visual ornament. 3. **Two-Color Printing Constraint as Creative Force:** The entire color system operates within the limitation of a two-color offset press: sepia (the base ink) and institutional red (the accent ink). While sepia-nostalgic palettes appear at only 5% frequency, no other design uses the two-color constraint as a generative principle -- every color decision is made as if the designer has only two ink wells and must create richness through density, tinting, and strategic placement rather than chromatic variety. The muted gold (#C4A45A) reads as an intentional "ghost" of the red ink printed at reduced opacity, maintaining the fiction of a physical printing process. 4. **Document Artifacts as Interaction Design:** The fold marks, punch holes, rubber stamps, and page numbers are not merely decorative -- they constitute the site's interaction vocabulary. Stamps respond to hover and click; page numbers serve as wayfinding; fold marks indicate structural breaks. No other design transforms the physical artifacts of document handling into a complete UI system. 5. **Diagram-First Visual Language:** Where other designs rely on photography (73%), illustration, or abstract shapes, ipjosim.com uses technical diagrams as its primary visual medium. Every image is a schematic rendered in SVG with annotation callouts, registration marks, and redline highlights -- treating visual content as engineering documentation rather than decoration. **Documented Seed/Style:** aesthetic: retro, layout: modular-blocks, typography: playfair-elegant, palette: sepia-nostalgic, patterns: pulse-attention, imagery: paper-aged, motifs: vintage, tone: nostalgic-retro **Avoided Overused Patterns:** - Playful aesthetic (95%) -- replaced with institutional seriousness - Centered layout (99%) -- replaced with modular-blocks with left-aligned text blocks - Scroll-triggered as sole animation (96%) -- supplemented with pulse-attention as primary pattern - Minimal imagery (95%) -- replaced with dense technical diagrams and document artifacts - Friendly tone (97%) -- replaced with nostalgic-retro institutional register - Mono typography as primary (99%) -- Space Mono is relegated to captions/labels; display and body use serif faces