Architectural Type System Style
A high-contrast, architectural design system rooted in Swiss Modernism and Brutalist minimalism. Characterized by a monochrome palette, massive 'Inter Tight' display typography, and a rigid grid defined by 0.5px hairlines. Features a technical 'JetBrains Mono' font for metadata and system status indicators, creating an engineering-first aesthetic. Suitable for high-end SaaS, developer tools, fintech, architecture portfolios, and design agencies. Includes a persistent noise overlay for texture and grid-based layouts that utilize viewport-relative sizing for maximalist impact.
Summary
Architectural Type System is a minimalist, monochrome aesthetic focusing on rigid grid structures, hairline borders, and extreme typographic hierarchy. It blends the precision of an IDE with the boldness of editorial design.
Style
The style is built on a foundation of pure black (#000000) and white (#FFFFFF) with a single functional accent (Indigo #6366f1). Typography is the primary visual element, using 'Inter Tight' for massive, tightly-spaced headlines and 'JetBrains Mono' for technical data. Layouts are strictly divided by 0.5px hairlines. A subtle noise grain (5% opacity) is layered over the entire interface to provide an organic, tactile feel to the digital canvas.
Layout & Structure
The layout follows a 'Grid Matrix' philosophy where the screen is divided into quadrants and zones using hairline borders. Sections are often 100vh on desktop to create a focused 'fold' experience. Content is pinned to corners or centered within grid cells.
Navigation
Hero Section (The Grid)
Command Bar
Bento Feature Grid
Components
Status Countdown
A technical timer indicating urgency or system status.
The Hairline Border
A specific border style used to define all containers.
Interactive Geometric Card
A card containing a rotating geometric element.
Special Notes
MUST: Maintain strict monochrome balance; only use the accent color for one primary action or specific data points. MUST: Use underscores instead of spaces in mono-spaced metadata labels (e.g., NO_CREDIT_CARD). MUST: Align text to the very edges of grid cells for the 'architectural' feel. DO NOT: Use rounded corners on grid cells or input fields. DO NOT: Use shadows or gradients; depth is achieved solely through line-work and contrast.