Institutional Modernist Tech Review

# Institutional Modernist Tech Review

## Philosophy

An institutional editorial interface that translates Swiss modernist and Bauhaus principles into a contemporary technology review product: disciplined asymmetrical grids, rigorous typographic hierarchy, restrained red-black-white signaling, and analytical whitespace that makes dense research content feel authoritative rather than decorative.

### Values

- Clarity through strict grid discipline and measurable spacing
- Authority expressed with typographic restraint instead of visual embellishment
- Editorial rhythm that alternates dense data zones with deliberate negative space
- High-contrast signaling for critical review status and research metadata

### Anti-Values

- Rounded consumer-app softness
- Decorative skeuomorphism or playful illustration-first surfaces
- Unstructured masonry layouts that obscure hierarchy
- Neon futurism and glossy startup gradients

### Visual Character

- A 12-column asymmetric editorial grid with oversized outer margins and clearly exposed gutters, using hard left and top alignment rather than centered card stacks.
- Large uppercase sans-serif deck headings paired with compact monospace metadata rails, creating an institutional publication contrast between headline voice and archival annotation.
- Predominantly off-white paper surfaces interrupted by severe black rules and a restrained signal red used only for status bars, selection markers, and key numeric highlights.
- Panels and cards use square corners, 1px to 3px solid borders, and horizontal divider rules that mimic printed review spreads more than app dashboard widgets.
- Dense tables, abstracts, and evidence blocks are separated by disciplined whitespace bands and modular baseline spacing, giving the interface the feel of a research journal issue board.

## Tokens

### Colors

| Name | Value |
|------|-------|
| primary | `#111111` |
| secondary | `#F3F0E8` |
| accent | `#C62828` |
| background | `#E9E5DC` |
| surface | `#F7F4EE` |
| text | `#111111` |
| muted | `#6F6A61` |
| border | `#111111` |
| error | `#B3261E` |
| success | `#2E7D32` |
| warning | `#A66500` |
| info | `#0B57D0` |

### Typography

- **Heading Font**: League Spartan
- **Body Font**: Source Serif 4
- **Mono Font**: IBM Plex Mono
- **Base Size**: 16px
- **Scale Ratio**: 1.25
- **Line Height**: 1.5
- **Letter Spacing**: 0.01em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=League+Spartan:wght@500;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Lg**: 0
- **Full**: 9999px

### Shadows

- **Sm**: none
- **Md**: 0 6px 0 rgba(17,17,17,0.06)
- **Lg**: 0 12px 0 rgba(17,17,17,0.08)

### Surfaces

- **Treatment**: paper
- **Card Style**: matte paper panels with exposed rules and subtle tonal layering
- **Bg Pattern**: grid

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: severe editorial rules with occasional thicker black separators and red side markers

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(0.2,0.8,0.2,1)
- **Philosophy**: deliberate

## Rules

### Composition

Compose screens like editorial spreads: a dominant narrative column, a narrower evidence rail, and modular review panels that lock to the same underlying grid.

### Hierarchy

Use scale, weight, uppercase labeling, and rule thickness to establish rank; avoid depth-heavy shadows and rely on alignment plus contrast for authority.

### Density

Medium-dense to dense. Information blocks may be compact, but every dense area must be buffered by deliberate whitespace bands and visible section dividers.

### Signature Patterns

- Every major section begins with an uppercase monospace label row capped by a full-width horizontal rule, making section headers behave like publication folios rather than app cards.
- Primary content panels use square-corner frames with a 3px black top rule or left rule, while active or critical states add a narrow red inset bar to one edge instead of filled backgrounds.
- Numerical findings and review verdicts are typeset in oversized condensed sans headlines aligned against smaller serif explanatory copy, producing a Swiss editorial headline-body tension.
- Data tables and metadata lists use strict column alignment with monospace values, hairline separators, and alternating neutral bands rather than rounded pills or floating chips.
- Calls to action are rendered as boxed editorial controls with uppercase labels, hard borders, and inverse hover states that flip from paper background to black fill.

## Layout

### Grid

Desktop uses a 12-column editorial grid with a 96px outer frame and mixed 8px/16px internal rhythm; key compositions span 7/5 or 8/4 column splits to maintain asymmetrical tension.

### Breakpoints

Desktop: 1440px and above preserves 12 columns. Tablet: 768px collapses to 8 columns with stacked evidence rail. Mobile: 375px collapses to a single reading column with horizontal overflow allowed only inside data tables.

### Whitespace

Use large top margins and inter-section bands to create institutional breathing room around dense content; whitespace should feel measured, not soft or airy.

### Responsive

Shift from multi-column spread to stacked reading order while preserving section rules, folio labels, and typographic contrast at every breakpoint.

## Guidance

### Do

- Use asymmetrical grid splits and visible gutters to keep the page feeling editorial rather than app-generic.
- Pair bold uppercase sans headings with readable serif body text and monospace metadata for tri-level hierarchy.
- Reserve red for review state, critical counts, and active navigation markers so it retains institutional urgency.
- Keep corners square and border logic consistent across buttons, cards, filters, and tables.

### Don't

- Do not introduce soft glass effects, blurred translucency, or rounded consumer SaaS cards.
- Do not center everything symmetrically; the language depends on directional alignment and editorial imbalance.
- Do not use more than one accent hue beyond the restrained signal red and neutral paper palette.
- Do not replace rule-based structure with oversized shadows or decorative gradients.