# Design Language for courts.studio ## Aesthetics and Tone A neubrutalist workshop where justice is prototyped in the open -- courts.studio presents as a raw design studio for legal systems, where thick black borders, exposed structure, and monospace typography create interfaces that refuse to hide their construction. The neubrutalism is uncompromising: no rounded corners, no soft shadows, no polished surfaces. Every border is visible. Every container shows its edges. The grid is not just a layout tool -- it is the visual content, exposed like the steel beams of an unfinished building. The ocean palette tempers the brutalism: instead of the typical neon-on-white neubrutalist approach, courts.studio uses deep ocean blues, seafoam greens, and marine whites that evoke an underwater architecture -- as if the brutalist studio was built at the bottom of the sea and the concrete absorbed the color of the water around it. The tone is workshop-direct: the site speaks as a studio would -- in progress notes, build logs, and design decisions. Nothing is finalized; everything is being worked on. The language is technical, transparent, and invites scrutiny. "Here is what we are building. Here is how. Judge it." Visual references: the exposed-duct aesthetic of Centre Pompidou, but underwater; a Notion-style workspace with brutalist CSS; deep-sea research station whiteboards covered in architectural plans; the wireframes of a UX designer who has never heard of drop shadows. ## Layout Motifs and Structure The layout uses a **timeline** architecture -- content flows along a vertical spine that tracks the progression of the studio's work, with branches extending left and right at each node. **Timeline System:** - A central vertical line (4px solid, ocean dark #0a3d5c) runs the full height of the page, positioned at 50% viewport width - Content nodes branch alternately left and right from this line, connected by horizontal 4px connector lines - Each node contains a timestamp label (monospace, small) and a content card - Content cards use the neubrutalist treatment: 4px solid black border, no border-radius, offset shadow (8px 8px 0 #0a3d5c), background in ocean palette colors **Section Flow:** 1. **The Blueprint:** Hero section. No timeline yet -- a full-viewport screen with the title "COURTS.STUDIO" in bold monospace, a 4px border around the entire viewport edge (16px inset), and a brief manifesto in the center. 2. **The Timeline:** The main content area. The vertical spine begins, and nodes branch left/right chronologically. Each node represents a concept, feature, or principle of the studio. 3. **The Build Log:** A section where the timeline accelerates: nodes become denser, smaller, more numerous -- like a project nearing completion where updates become more frequent. 4. **The Open File:** A wide node that breaks the alternating pattern, spanning both sides of the timeline. This is the "current work" section -- highlighted with a dashed border (indicating in-progress) instead of solid. **Neubrutalist Elements:** - Every interactive element has a 3px solid black border - Hover states shift the offset shadow from 8px to 4px (and translate the element 4px 4px), creating a press-down effect - No transitions -- state changes are instant, honoring brutalist immediacy ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) -- a monospace-influenced sans-serif with geometric construction and slightly condensed proportions. Used at 2rem-4.5rem, weight 700, letter-spacing: -0.02em, line-height 1.15. The monospace DNA in its character shapes connects it to the workshop/build aesthetic while providing headline impact. - **Body:** "JetBrains Mono" (Google Fonts) -- a true monospace that reinforces the studio/workshop context. Used at 0.95rem, weight 400, line-height 1.7. All body text in monospace creates a "build log" reading experience. - **Labels/System:** "JetBrains Mono" at 0.75rem, weight 700, letter-spacing: 0.04em, all-caps, used for timeline timestamps, node labels, and metadata. **Palette (Ocean):** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Abyss | Deepest dark | #071e2e | Page background | | Deep Ocean | Primary dark | #0a3d5c | Timeline spine, borders, shadows | | Ocean Blue | Medium tone | #1a6b8a | Card backgrounds, secondary surfaces | | Tidal Teal | Accent blue-green | #2ea8a8 | Links, active states, highlights | | Seafoam | Light accent | #6fd8c8 | Hover accents, badge backgrounds | | Marine White | Light surface | #e8f4f0 | Card interiors, text on dark | | Foam White | Brightest | #f4faf8 | Primary text on dark backgrounds | | Coral Accent | Warm contrast | #e86850 | Warning states, special emphasis (rare) | | Ink Black | True black | #0a0a0a | Borders, headline text on light | The ocean palette applied to neubrutalist containers creates a distinctive "underwater architecture" effect: the heavy borders and shadows feel like steel-and-concrete structures, but the colors suggest they have been submerged and absorbed marine tones. ## Imagery and Motifs **Neubrutalist Cards:** Every content container uses: border: 4px solid #0a0a0a; box-shadow: 8px 8px 0 #0a3d5c; background: #e8f4f0 or #1a6b8a. No border-radius. No gradients. The cards are deliberately heavy and structural, like concrete panels. **Timeline Connectors:** The vertical spine and horizontal branches are drawn with CSS pseudo-elements: ::before for vertical segments, ::after for horizontal connectors. Connector endpoints have a small circle (16px, 4px border, filled with Tidal Teal) at the node junction, creating a technical-diagram appearance. **Dashed In-Progress Borders:** Elements representing work-in-progress or current items use border-style: dashed (4px dashed #0a3d5c) instead of solid, visually indicating incomplete state. This dashed treatment is the only border variation, making it semantically meaningful. **Viewport Border Frame:** The hero section features a 4px solid border inset 16px from viewport edges, creating a "drawing frame" that establishes the studio metaphor immediately. This frame fades away on scroll. **Exposed Grid Lines:** In denser content areas, faint grid lines (1px solid #0a3d5c at 15% opacity) are visible in the background, creating an engineering-paper or graph-paper substrate. These lines remind the viewer that everything is built on a system. ## Prompts for Implementation Build this site as a studio with its walls removed. The Blueprint hero loads with the viewport border frame drawing itself: top, right, bottom, left edges animate sequentially (each side 300ms). The title appears with zero animation -- it is simply present, brutally there. The Timeline section begins with the spine drawing downward as the user scrolls (the vertical line extends via height animation tied to scroll position). Nodes appear when their scroll position is reached: instant visibility (no fade, no slide -- just there, brutalist honesty). The hover effect on cards is the signature interaction: on hover, the element translates 4px down and 4px right while the shadow shrinks from 8px to 4px, creating a satisfying "push into surface" effect with zero transition duration. The Build Log section increases node density: smaller cards, tighter spacing, creating visual acceleration. The Open File section breaks the pattern with its dashed border, drawing attention through structural variation. Throughout, all text is monospace, reinforcing the "everything is code/work-in-progress" aesthetic. Avoid rounded corners, gradients, blur effects, soft shadows, and any visual softness. No testimonials, pricing blocks, or marketing language. This is a workshop, not a showroom. ## Uniqueness Notes 1. **Neubrutalist ocean palette:** No other design applies deep ocean colors to neubrutalist structure, creating "underwater architecture" that softens brutalism's harshness without compromising its structural honesty. 2. **Timeline as primary layout:** Using a branching timeline as the page's entire organizational structure (not just a section within a page) creates a unique progression-focused experience. 3. **Dashed borders as semantic state:** Using border-style: dashed specifically and only for in-progress items creates a visual language where border style carries meaning beyond decoration. 4. **Zero-transition hover as philosophy:** The instant (0ms transition) hover state change is a deliberate design choice that reinforces brutalist immediacy and distinguishes from ubiquitous smooth animations. Document chosen seed/style: aesthetic: neubrutalism, layout: timeline, typography: mono, palette: ocean, patterns: offset-shadow, imagery: grid-lines, motifs: viewport-frame, tone: workshop-direct Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)