SYSTEM
SPECIMEN
// The Single Source of Truth.
// Swiss Layout x Digital Brutalism.
// No eclecticism allowed.
01_TYPOGRAPHY_HIERARCHY
Leading: None (0.85-0.9)
Tracking: Tighter
Contrast: High (Gray-300)
Max-width: 60ch
The quick brown fox jumps over the lazy dog. Systems should be felt, not just used. We do not build websites; we construct digital environments that provoke, engage, and survive.
Size: xs (12px) or [10px]
// SYSTEM_CHECK: OPTIMAL
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
02_COLOR_PHYSICS
03_LAYOUT_MODULES
THE NARRATIVE
This layout is used for storytelling. The visual takes dominance (60%), while the text provides context. Note the whitespace balance.
TECHNICAL SPECIFICATION
Used for "Hard Skills" or data-heavy sections. The left column acts as a sticky anchor or metadata sidebar. The right column holds the dense information. Use <SkillBar> components here.
04_INTERACTION_STATES
06_LAYOUT_MODE_A: THE_GONZO
AUTHOR: H.S. THOMPSON
SOURCE: FEAR & LOATHING
MOOD: MANIC / HIGH_VELOCITY
DATE: 1971
Bat Country
Not that we needed all that for the trip, but once you get locked into a serious drug collection, the tendency is to push it as far as you can. The only thing that really worried me was the ether. There is nothing in the world more helpless and irresponsible and depraved than a man in the depths of an ether binge.
>> SYSTEM_WARNING: ETHER_LEVEL_CRITICAL
07_LAYOUT_MODE_B: THE_SIMULATION
HOMO ZAPIENS
"Сучасна людина — це не особистість, а просто точка перетину двох інформаційних потоків. Один потік — це те, що їй вливають у вуха і очі, а другий — це те, що вона виливає з себе у відповідь на перший."
"Нікого немає вдома," — подумав Татарський. — "І вдома теж немає. Є тільки телевізор, який дивиться сам себе."
08_LAYOUT_MODE_C: THE_CODE
TO BE,
OR NOT TO BE
That is the question:
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles...
09_IMAGE_COMPOSITION_RULES
THE MONOLITH
Images span full width for maximum impact. Text floats above in HUD containers.
Use offset layouts to create tension. The image sits on the grid, but the whitespace around it is active. The caption aligns to a different column set.
10_KINETIC_TYPOGRAPHY
ENCRYPTED_SIGNAL
>> ACCESS_GRANTED_LEVEL_5
Subject was last seen in Sector 7 carrying a payload of unstable isotopes.
11_DATA_VIZ_PRIMITIVES
12_HUD_ORNAMENTS
13_DIVIDERS_&_SPACERS
14_MOBILE_OPS_PROTOCOL
I. READABILITY ENFORCEMENT
On mobile devices, font size MUST NOT drop below 16px. The "Apple Standard" applies: clear, comfortable reading without zooming. We prioritize content legibility over decorative density.
// Lock minimal font size for body
p: {
'font-size': '16px', // No 'text-xs' for body text on mobile
'line-height': '1.6',
}II. INTELLIGENT STICKY HEADERS
Headers occupy too much vertical real estate on mobile. They must: 1. Blur the background (glassmorphism). 2. Shrink in height on scroll. 3. Or hide completely on scroll down, reveal on scroll up.
<header className="sticky top-0 h-14 md:h-20 backdrop-blur-md bg-dark-void/80 transition-all duration-300 z-50 ...">
{/* Content compacts on mobile */}
</header>III. HORIZONTAL_SCROLL_GALLERIES
Instead of stacking huge images vertically (the "infinite scroll of death"), use horizontal swipe containers for galleries, diagrams, and cards. Use CSS Snap for tactile feedback.
<div className="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-4">
<div className="flex-none w-[85vw] snap-center ...">
{/* Card Content */}
</div>
</div>15_CYRILLIC_ADAPTATION
ЩЕЛЕПИ
ДЕРЖАВИ
Текст злипається. Букви "Щ", "Ж", "Ш" створюють візуальний шум при занадто тісному трекінгу, який підходить для англійської.
ЩЕЛЕПИ
ДЕРЖАВИ
Для кирилиці ми "відпускаємо" трекінг (tracking-normal замість tighter) і збільшуємо leading на 5%. Це компенсує ширину знаків.
:lang(uk) .font-display {
letter-spacing: -0.01em; /* vs -0.04em for EN */
line-height: 1.0; /* vs 0.85 for EN */
}16_DATA_ENTRY_INTERFACES
17_FEEDBACK_&_GLITCH
CORE_DUMP_INITIATED...