Return to Core SystemIdentity
Identity
System.
Version2.0.0 — Stable
ArchitectureStrict / Minimal
Structure8 Core Modules
01
The Mark
System CoreThree.js Spatial Render
Interactive — Drag to Rotate
Interface PrimitiveSolid / Scalable Vector
Fig A. Clearspace
Minimum clearspace equals 1/4 the height of the mark.
Fig B. Validation
No variants
No distortion
No recoloring
No effects
02
Typography
Geist
System DefaultSystem.Macro / 700 / -4% Tracking
Design. Code. Intelligence.Heading / 600 / -2% Tracking
The primary typeface for the interface. Engineered strictly for precision, legibility, and architectural geometry.Body / 400 / 160% Line Height
Labels, timestamps, and metadata.Data / Mono / Uppercase
الرقعة
System Scriptأ ب ج ١ ٢Display / RTL
ليفه محمد الصديقIdentity / RTL
"المُرَاسَلَةُ نِصْفُ المُشَاهَدَةِ"Philosophy / RTL
Arabic never sits on the page as texture. Every line is sourced, attributed, and mathematically translated.Attribution Rule
03
Color Architecture
Built entirely on the OKLCH color space for absolute perceptual uniformity across light and dark modes. Values map directly to CSS custom properties.
Monochrome First
95% of the UI operates purely on Background and Foreground. Color is reserved strictly for state changes.
Borders as Structure
Borders are not decorative. They define the architectural grid of the application.
No Pure Black/White
OKLCH lightness is capped at 0.99 for white and 0.14 for black to reduce eye strain.
04
Voice & Tone
Data over AdjectivesRemove fluff. "Three years shipping full-stack products" is objectively superior to "Extensive industry experience".
Typography Dictates ToneMono caps for machine data (timestamps, labels, statuses). Sentence case for human communication. Arabic for classical philosophy.
Actionable VerbsButtons describe the exact execution. A button says "Download résumé", not "Click Here".
Download résumé
Download CV!
See the work
Explore my amazing projects
Status: Awaiting Input
Get in touch with me today
Copied to clipboard
Success! Copied.
05
Motion Dynamics
Structural Easecubic-bezier(0.19, 1, 0.22, 1)
Applied to all hovers, reveals, and opacity shifts (300–500ms).Navigational Springtype: spring, bounce: 0.2, duration: 0.6
Calculated specifically for the active pill indicator in the HUD.Hero Displacecontinuous · 8ms tick
Sine wave mathematical displacement applied to Three.js vertices.Accessibilityprefers-reduced-motion: reduce
Honored natively. Disables vertex animation and zero-times transitions.06
Grid Architecture
The Golden Ratio (φ 1.618)
Used strictly to define asymmetric column splits (e.g., About Section).
07
System Materials
Classified Glassmorphism
backdrop-blur-xl
backdrop-saturate-150
box-shadow: inset 0 1px 0 rgba(255,255,255,.12)
08
Output
System Assets
Canonical assets shipped directly from the public directory. These are the finalized files utilized by the OS and browser.
Render Previews
Favicon
iOS
Android
Open Graph