# 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.