popovskik
/
portfolio-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
portfolio-website/designs/executive_azure/DESIGN.md

6.0 KiB
Raw Permalink Blame History

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.