# Design System Document: High-End Personal Brand Portfolio ## 1. Overview & Creative North Star **Creative North Star: "The Institutional Architect"** This design system is engineered to position Kristijan Popovski not just as a professional, but as an authority. Moving away from the "loud" and high-energy tropes of startup culture, this system embraces **Institutional Luxury**. It draws inspiration from Apple’s relentless pursuit of clarity and the structured, credible aesthetic of global financial and academic institutions. The "Architect" personality is expressed through: * **Intentional Asymmetry:** Breaking the standard 12-column rigidity to create editorial-style layouts that guide the eye. * **Calm Authority:** Using a palette of deep royal blues and soft light accents to evoke trust and forward-looking stability. * **Generous Negative Space:** Spacing is treated as a premium material, used to separate complex ideas without the need for visual clutter. --- ## 2. Colors The palette is a sophisticated blend of deep corporate blues and atmospheric surface tones. It is designed to be "felt" rather than just seen, creating a sense of professional depth. ### Core Tokens * **Primary (`#002da7`):** The Royal Blue. Used for primary CTAs and key brand moments. * **Primary Container (`#1a44d1`):** A vibrant bridge used for hover states and subtle gradients. * **Secondary (`#3657be`):** The soft light blue accent, inspired by the banner gradient, used for secondary actions and iconography. * **Surface (`#f8f9fa`):** The off-white bedrock of the brand. * **On-Surface (`#191c1d`):** A deep, near-black charcoal for maximum readability and a high-trust institutional feel. ### The "No-Line" Rule To maintain a high-end feel, **1px solid borders are strictly prohibited** for sectioning. Boundaries must be defined solely through: 1. **Background Shifts:** Transitioning from `surface` to `surface-container-low`. 2. **Tonal Transitions:** Utilizing subtle 15-degree linear gradients (Primary to Primary-Container) for hero areas or massive CTAs. ### Signature Textures & Glass Utilize **Glassmorphism** for navigation bars and floating cards. Use a semi-transparent `surface-container-lowest` (80% opacity) with a `24px` backdrop-blur. This ensures the background color bleeds through, making the interface feel integrated and organic. --- ## 3. Typography The typography system uses a dual-font strategy: **Manrope** for authoritative headlines and **Inter** for precision-focused body text. * **Display Large (`Manrope`, 3.5rem):** Set with a tight letter-spacing (-0.02em) to feel impactful and modern. * **Headline Medium (`Manrope`, 1.75rem):** Used for section headers. These should always sit above a substantial 40px–64px top margin to allow the title to breathe. * **Body Large (`Inter`, 1rem):** The workhorse. Set with a generous `1.6` line-height to ensure institutional-level readability. * **Label Medium (`Inter`, 0.75rem):** Used for metadata, dates, or small tags. Always set in uppercase with +0.05em tracking for a "premium logotype" feel. --- ## 4. Elevation & Depth Depth is achieved through **Tonal Layering** rather than traditional drop shadows. * **The Layering Principle:** Stack `surface-container` tiers. For example: * *Base:* `surface` * *Content Block:* `surface-container-low` * *Floating Card:* `surface-container-lowest` * **Ambient Shadows:** When a shadow is required for a floating component (like a portrait card inspired by Image 3), use an extra-diffused shadow: `box-shadow: 0 10px 40px rgba(0, 45, 167, 0.05);`. This subtle blue tint mimics natural light refracting through glass. * **The "Ghost Border":** If accessibility requires a stroke, use `outline-variant` (`#c4c5d7`) at **15% opacity**. It should be felt as a change in texture, not a hard line. --- ## 5. Components ### Primary Buttons * **Style:** `surface-tint` (`#2a4fdb`) background with a subtle gradient to `primary`. * **Corner Radius:** `xl` (0.75rem) for a modern, approachable feel. * **Typography:** `title-sm`, white text, centered. * **Interaction:** On hover, slightly increase the gradient intensity and apply the Ambient Shadow. ### Experience Cards * **Layout:** Drawing from the structured nature of Image 1, cards should avoid dividers. Use a vertical spacing of `32px` between items. * **Styling:** A `surface-container-lowest` background with a `Ghost Border`. * **Timeline Element:** Use a 2px vertical line in `outline-variant` (20% opacity) to connect dates, keeping it institutional and discrete. ### Hero Styling (Inspired by Image 3) * **The Portrait Frame:** The subject (Kristijan) should be placed on a soft, light-blue tinted background (`surface-container-low`). * **Asymmetric Overlay:** The name should overlap the portrait slightly using a glassmorphic tag, utilizing the `surface-container-lowest` token with backdrop-blur. ### Input Fields * **Style:** Minimalist. No solid box; use a `surface-container-high` background with a bottom-only `outline-variant` stroke (30% opacity). * **Focus State:** The stroke transitions to `primary` with a 2px thickness. --- ## 6. Do's and Don'ts ### Do * **Use Generous White Space:** If you think there is enough space between sections, add 20% more. Space = Premium. * **Layer Tones:** Use the difference between `#ffffff` and `#f8f9fa` to define functional areas. * **Maintain Hierarchy:** Headlines should be significantly larger and heavier than body text to convey leadership. ### Don't * **No "Startup Blue":** Avoid neon or overly bright blues. Stick to the deep, credible tones of the Royal Blue (`#002da7`). * **No Traditional Dividers:** Never use a solid 1px line to separate "Education" from "Experience." Use a background color shift instead. * **No Sharp Corners:** Avoid the `none` roundedness. Use `xl` or `lg` to maintain a modern, friendly corporate tone. * **No Harsh Shadows:** Never use black or dark grey shadows. Shadows must always be low-opacity and tinted with the primary blue.