91 lines
6.0 KiB
Markdown
91 lines
6.0 KiB
Markdown
# 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. |