25 Previews · 6 Groups
Guidelines
The foundations: colour, type, spacing, geometry, the micrographic motifs, and the brand marks. Each preview carries the rule it illustrates and the tokens behind it.
01 Brand 7 previews
400×400 - [da] Mark on Ink; Light Variant Keeps Amber Brackets
Bracket Mark on Ink; [d] Under 20px
[da] - Amber Brackets, Paper Letters. The Chosen Mark
darsan.dev (Site), darsan.design (Kit); Deniz Arsan in Caps
1200×630 Link-Share Card
How Deniz Writes - Terse, Technical, Precise
Type-Set Wordmark - Pairs with the Logo Mark
02 Colors 5 previews
One Accent. Marks the Interactive and the Important
Warm-Black Surface Steps - Depth Without Shadows
Warm Off-Whites for Text Hierarchy
Used as Bracketed Readouts, Sparingly
Functional Colors: Focus, Grid, Selection
03 Geometry & Motion 2 previews
Hairline, Dashed, Emphasis. Square Corners, No Shadows
Mechanical: 100–320ms, No Bounce. Cursor Blink + Sweep
04 Motifs 6 previews
Crosshair Corners Frame Important Panels
Every Block Can Be a Numbered Figure
Unicode Technical Glyphs Instead of Icons. No Emoji
Optional 24px Grid Wash on Hero Surfaces
Label ····· Value - The Spec-Sheet Data Row
Edge Rulers: 8px Minor, 40px Major Ticks
05 Spacing 1 preview
Strict 4px Grid; Tight Furniture, Generous Sections
06 Typography 4 previews
JetBrains Mono - 16px / 1.65
Space Mono - Headlines, Bold, Tight Leading
10–12px Uppercase, 0.12em Tracking - The Page Furniture
10 → 64px