# Design Language for reasoner.dev
## Aesthetics and Tone
reasoner.dev inhabits the visual world of an urban planner's drafting table -- the kind covered in hand-annotated city maps, zoning sketches done in felt-tip pen, and napkin diagrams that somehow contain breakthrough ideas. The aesthetic is **hand-drawn** but never childish; it channels the deliberate, confident imprecision of an architect's conceptual sketch or a detective's evidence board. Every line has the authority of someone who has spent twenty years thinking before drawing a single stroke.
The tone is **authoritative** without being stiff -- imagine a university professor who draws diagrams on a chalkboard with the flair of a street artist. There is conviction in every visual element. The site communicates: "I have reasoned through this thoroughly, and here is what I found." No hedging, no performative uncertainty. The hand-drawn quality does not soften the authority; it amplifies it, because hand-drawn lines communicate that a human mind -- not a template -- produced this thinking.
The mood draws from the energy of city planning offices at 2 AM, from the walls of a war room covered in interconnected diagrams, from the pages of Richard Feynman's notebooks where brilliant physics sat alongside quirky doodles. There is intellectual intensity here, but it breathes. The urbanity of the motifs grounds the abstract reasoning in something tangible: cities are the ultimate expression of collective reasoning, where thousands of decisions layer upon each other to produce emergent order.
## Layout Motifs and Structure
The layout follows a **card-grid** architecture that reimagines the card metaphor as a city block system. Rather than uniform Bootstrap cards, the grid operates on an irregular urban-planning model where cards have varying heights and widths -- some are narrow alley-cards (single column, tall), some are plaza-cards (spanning two or three columns, short and wide), and some are tower-cards (full-height, narrow). The grid uses CSS Grid with `grid-template-rows: masonry`-style behavior achieved through explicit row spanning.
**The Grid System:**
- Base grid: 12-column micro-grid with 16px gutters that evoke the spacing of city blocks
- Cards snap to 2-column, 3-column, 4-column, or 6-column spans
- Vertical rhythm follows a 24px baseline that keeps text aligned across cards of different sizes
- Cards have visible borders drawn in a hand-sketched style: slightly uneven 2px strokes using SVG filter turbulence to simulate pen wobble
- Between card clusters, full-width "avenue" sections break the grid -- these are horizontal dividers styled as hand-drawn ruled lines with small annotations ("section 03", "continued") in a margin note style
**Spatial Relationships:**
- The page opens with a full-viewport "aerial view" -- a zoomed-out representation of the entire card grid rendered as a miniature city map, which transitions (on scroll) into the actual content grid
- Cards cast no traditional box-shadows; instead, they have hand-drawn diagonal hatching beneath their bottom-right edges to simulate shadow, done entirely in CSS using repeating-linear-gradient at 45 degrees
- Negative space is treated as "parkland" in the urban metaphor -- green-tinted (#E8DCC8 with a subtle warm overlay) open areas that give the dense card grid room to breathe
- Navigation is a fixed left-margin "street index" -- a vertical list of section names styled as a hand-lettered street sign directory
## Typography and Palette
**Typography:**
- **Headlines:** "Commissioner" (Google Fonts) at weight 700-800, tracking -0.02em. Commissioner is a variable font with a versatile range from humanist to geometric, and at heavy weights it carries the authoritative punch of engraved municipal signage. Used at 2.5rem-4.5rem for card titles and section headers. Always sentence case. The variable axis is used subtly: headings at optical size shift toward slightly wider proportions for larger display sizes.
- **Body Text:** "Commissioner" at weight 400, 1.05rem/1.7. The same family at regular weight provides a warm, readable body face that maintains visual unity with headlines while being distinct enough in weight to establish hierarchy. Its open counters and moderate x-height make it comfortable for sustained reading.
- **Annotations and Marginalia:** "Caveat" (Google Fonts) at weight 400-700, 0.85rem-1rem. This is the hand-drawn voice of the design -- a handwriting font that appears in card labels, margin notes, diagram annotations, and the "street index" navigation. Caveat's slightly rushed, confident letterforms suggest notes jotted by someone mid-thought, reinforcing the drafting-table metaphor.
- **Code/Data:** "IBM Plex Mono" (Google Fonts) at weight 400, 0.9rem. Used sparingly for any data points, version numbers, or technical annotations within cards. Its geometric clarity contrasts with the organic Caveat annotations.
**Palette:**
The palette is **warm-earthy**, drawn from the materials of urban sketching: kraft paper, sepia ink, terracotta brick, verdigris copper, and charcoal graphite.
| Role | Color | Hex | Reference |
|------|-------|-----|-----------|
| Background (Paper) | Warm parchment | #F2E6D4 | Kraft paper / manila folder |
| Background Alt (Plaza) | Dusty cream | #E8DCC8 | Aged drawing paper |
| Primary Ink | Deep charcoal brown | #2C1E12 | Walnut ink |
| Secondary Ink | Warm sienna | #8B5E3C | Burnt sienna conte crayon |
| Accent 1 | Terracotta | #C0623A | Brick dust / urban clay |
| Accent 2 | Verdigris | #5B8C7A | Oxidized copper rooftop |
| Accent 3 | Dusk slate | #6B7B8D | Evening sky over skyline |
| Highlight | Pale ochre | #F0D68A | Highlighter on aged paper |
| Card Border | Sketch brown | #A08060 | Felt-tip pen on kraft |
The palette deliberately avoids pure black (#000) and pure white (#FFF). The darkest value is #2C1E12 (walnut ink) and the lightest is #F2E6D4 (kraft paper). This creates a lived-in warmth where nothing feels digital or sterile.
## Imagery and Motifs
**Isometric Icons as City Elements:**
The primary imagery vocabulary is **isometric-icons** -- but not the generic SaaS isometric illustrations that populate every startup landing page. These are isometric representations of **city infrastructure** rendered in a hand-drawn sketch style:
1. **Isometric City Blocks:** Each major concept card features a small isometric illustration of an urban element -- a building cross-section showing reasoning layers, a street intersection showing decision points, a park showing open exploration space, a bridge showing connections between ideas. These are drawn in the sketch-line style using SVG with `stroke-dasharray` variations and slight path irregularities.
2. **Blueprint Annotations:** Isometric icons include dimension lines, angle markers, and callout labels in Caveat font, as if an architect is annotating the illustration. These labels serve double duty as actual content descriptors.
3. **Urban Motifs Throughout:**
- Section dividers are stylized as road markings (dashed center lines, crosswalk patterns) rendered in the sketch style
- Loading states show a small isometric crane assembling blocks
- Empty states show an isometric vacant lot with a "coming soon" construction sign
- The favicon is a tiny isometric building block in terracotta
4. **Hatching and Cross-Hatching:** Where other designs use gradients or solid fills, reasoner.dev uses hand-drawn hatching patterns. Dense cross-hatching in #2C1E12 for dark areas, loose parallel lines in #A08060 for mid-tones, stipple dots for light shadows. These are implemented as SVG patterns referenced in CSS backgrounds.
5. **City-Urban Motifs Specific Elements:**
- A recurring "skyline silhouette" drawn in a single continuous wobbly line, used as a decorative footer element
- Manhole-cover-inspired circular ornaments used as bullet points and list markers
- Street lamp illustrations flanking key section headers
- Subway-map-style connection lines linking related cards, drawn with rounded corners and color-coded by category using the accent palette
## Prompts for Implementation
**Full-Screen Narrative Entry:**
The site opens to a full-viewport "drafting table" scene: the warm parchment background (#F2E6D4) fills the screen, with a subtle paper grain texture (CSS noise via SVG filter). The domain "reasoner.dev" appears in Commissioner 800 at 5rem, positioned upper-left with a generous 15% margin, as if hand-placed on a drawing board. Below it, in Caveat at 1.2rem, a subtitle reads like a hand-written annotation with a small arrow pointing down. No navigation is visible yet. The entire opening feels like discovering someone's working desk.
**Scroll-Triggered Orchestration:**
As the user scrolls, the "aerial city map" miniature (a simplified SVG of the card grid drawn as city blocks) zooms in progressively. The scroll-triggered animations are sequenced as follows:
- 0-15vh scroll: The miniature city map scales from 0.3 to 1.0, transitioning from overview to actual grid
- Each card enters with a "sketch-in" animation: border lines draw themselves using stroke-dashoffset animation over 400ms, content fades in 200ms after borders complete
- Cards stagger their entrance by 80ms intervals within each visible row, creating a left-to-right "building" effect like a city being constructed block by block
- The street-index navigation fades in from the left margin after the first card row completes
**Card Interaction:**
- Hover on a card triggers a subtle "lift from table" effect: the hatching shadow shifts 2px down and right, the card translates -1px up and -1px left
- Active/clicked cards get a terracotta (#C0623A) border drawn as a thicker sketch line, replacing the default #A08060
- Cards that link to related content show a subway-line connector that animates along its path (stroke-dashoffset) on hover, tracing the route to the related card
**Avoid Explicitly:**
- CTA buttons with gradient backgrounds or pill shapes -- use hand-drawn underlined text links instead
- Pricing tables or comparison grids -- this is not a SaaS product page
- Stat counters or number animations -- the authority comes from prose, not metrics
- Stock photography or photographic imagery of any kind
- Generic card shadows (box-shadow) -- use only the hatching technique
- Centered hero layouts -- the composition should always feel off-center, as if arranged by hand on a physical surface
**Technical Notes:**
- SVG filters for paper texture: `` with `` to warm-shift
- Hand-drawn borders: SVG `` with `` and `` applied to card border elements
- All animations use `prefers-reduced-motion` media query to disable for accessibility
- Isometric icons are inline SVGs for crisp rendering at all sizes; stroke-width scales proportionally with viewport
## Uniqueness Notes
**Differentiators from other designs:**
1. **Isometric City-Block Card Grid:** No other design in the portfolio combines the card-grid layout with isometric urban imagery. Card-grid appears at only 10% frequency, and isometric-icons at 2%. The fusion of these two into a "city planning" metaphor where cards literally represent city blocks is entirely novel -- the grid is not decorative but narratively meaningful.
2. **Hand-Drawn Hatching Shadow System:** While hand-drawn aesthetics appear at 21%, none use hatching and cross-hatching as a systematic replacement for conventional CSS shadows and gradients. The hatching technique (repeating-linear-gradient at 45 degrees, SVG pattern fills) creates a coherent visual language that eliminates every trace of digital-default styling.
3. **Commissioner Variable Font as Sole Heading/Body Family:** Commissioner-versatile typography appears at only 3% frequency. Using it as both headline and body face (varying only weight and optical size) creates a typographic unity that most designs avoid in favor of contrast-pairing. The Caveat handwriting font provides the contrast, but as annotation layer rather than primary text -- a deliberate inversion of the typical handwritten-heading / clean-body pattern.
4. **Subway-Map Card Connections:** The concept of drawing visible SVG connection lines between related cards, styled as a transit map with color-coded routes, is unprecedented. This transforms the card grid from isolated tiles into a networked system -- appropriate for a domain about reasoning, where ideas connect.
5. **Urban-Planning Narrative Structure:** City-urban motifs appear at just 1% frequency. The entire site is structured as a metaphorical city -- cards are blocks, sections are districts, navigation is a street index, dividers are roads. This sustained metaphor gives the site a narrative coherence that generic card layouts lack.
**Documented Seed/Style:**
aesthetic: hand-drawn, layout: card-grid, typography: commissioner-versatile, palette: warm-earthy, patterns: scroll-triggered, imagery: isometric-icons, motifs: city-urban, tone: authoritative
**Avoided Overused Patterns:**
- Avoided "playful" aesthetic (95%) in favor of hand-drawn (21%)
- Avoided "centered" layout (99%) in favor of card-grid (10%) with deliberate off-center placement
- Avoided "mono" typography (99%) in favor of commissioner-versatile (3%)
- Avoided generic "warm" palette (100%) in favor of specific warm-earthy (2%) with named material references
- Paired the unavoidable scroll-triggered (96%) with unique sketch-in animations rather than generic fade/slide
- Avoided "minimal" imagery (95%) in favor of isometric-icons (2%)
- Avoided "friendly" tone (98%) in favor of authoritative (19%)
- Avoided "vintage" motifs (88%) in favor of city-urban (1%)