# Portfolio Design System: Editorial Precision & Technical Depth ## 1. Overview & Creative North Star **The Creative North Star: "The Architectural Luminary"** This design system moves away from the "generic developer template" by embracing the aesthetic of high-end architectural journals. For a WordPress Developer like Trần Thị Lam, the interface must reflect both structural integrity (the code) and aesthetic sophistication (the front-end). The system rejects the standard boxy grid in favor of **Intentional Asymmetry**. By utilizing overlapping elements, large-scale editorial type, and "floating" content blocks, we create a sense of depth and motion. We are not just building a site; we are curating a digital gallery where the white space (or in this case, "dark space") is as important as the content itself. --- ## 2. Colors & Surface Philosophy The color palette is anchored in deep, atmospheric blues to provide a sense of stability, punctuated by "Coral Heat" to guide the user's eye to high-value actions. ### The "No-Line" Rule **Borders are prohibited.** To define sections, designers must use background color shifts or tonal transitions. A section transition should feel like a change in lighting, not a physical barrier. - **Surface Transitions:** Use `surface` (#0b1326) for the main body and `surface-container-low` (#131b2e) for secondary sections like the "About" or "Skills" area. ### Surface Hierarchy & Nesting Treat the UI as a series of nested layers. - **Base Layer:** `surface` (#0b1326) - **Primary Content Containers:** `surface-container` (#171f33) - **Elevated Interactive Elements:** `surface-container-high` (#222a3d) ### The "Glass & Gradient" Rule To add "soul" to the technical dark theme: - **Glassmorphism:** For navigation bars and floating cards, use `surface-variant` (#2d3449) at 60% opacity with a `24px` backdrop blur. - **Signature Gradients:** For CTAs and Hero accents, use a linear gradient from `primary` (#ffb3b0) to `on-primary-container` (#dc5153) at a 135-degree angle. --- ## 3. Typography: The Editorial Voice We pair **Plus Jakarta Sans** for high-impact headlines with **Inter** for technical precision in body copy. * **Display (Plus Jakarta Sans):** Used for Hero statements and section titles. The large scale (up to `3.5rem`) creates an "Editorial" feel that commands attention. * **Body (Inter):** Set at `1rem` for high legibility. The slightly increased line height (1.6) ensures that technical descriptions of WordPress projects remain breathable. * **Hierarchy as Identity:** Use `display-lg` for the developer's name and `title-sm` (uppercase with `0.1em` letter spacing) for section labels to create a "Technical Blueprint" aesthetic. --- ## 4. Elevation & Depth: Tonal Layering We avoid traditional "Drop Shadows" which feel muddy on dark backgrounds. Instead, we use light and tone to simulate height. * **The Layering Principle:** A project card should not have a shadow. Instead, place a `surface-container-highest` (#2d3449) card onto a `surface-container-low` (#131b2e) section. The contrast in luminescence creates the lift. * **Ambient Shadows:** If a floating effect is required (e.g., a modal), use a shadow color of `#000000` at 15% opacity with a `40px` blur and `0px` offset. * **The "Ghost Border":** If a separation is required for accessibility, use the `outline-variant` (#45464d) at **15% opacity**. This creates a "whisper" of a line that defines shape without breaking the flow. --- ## 5. Components ### Buttons (The "Call to Action") * **Primary:** Solid `primary` (#ffb3b0) with `on-primary` (#68000f) text. **Radius:** `xl` (1.5rem) for a modern, pill-shaped look. * **Secondary:** Ghost style. No background, `outline-variant` (#45464d) at 20% opacity. Text color is `primary`. * **Interaction:** On hover, the Primary button should scale 1.05x and increase its "Glass" reflection. ### Project Cards * **Structure:** No dividers. Use `surface-container-low` for the card body. * **Imagery:** Images should have a `md` (0.75rem) border radius and a subtle grayscale-to-color transition on hover to signify "active" states. * **Metadata:** Use `label-md` for technology tags (e.g., "PHP", "React"), styled as subtle chips using `surface-variant` backgrounds. ### Input Fields * **Styling:** Filled style using `surface-container-highest`. * **Indicator:** Instead of a full border, use a 2px bottom-border of `primary` only when the field is `:focus`. ### Signature Component: The "Skill Orbit" Instead of a standard list, use a cluster of `Chips` with varying `surface-container` weights to represent skill proficiency, creating a geometric, "organized chaos" look in the Skills section. --- ## 6. Do’s and Don’ts ### Do: * **Use Asymmetric Padding:** Allow text blocks to sit off-center to create a modern, editorial rhythm. * **Embrace Large Negative Space:** Let the `background` (#0b1326) breathe. It creates the "Sophisticated" feel the user requested. * **Use Subtle Micro-interactions:** All hover states should be soft (300ms ease-out transitions). ### Don’t: * **Don't use 100% white (#ffffff) for text:** Use `on-surface` (#dae2fd) to reduce eye strain and maintain the atmospheric mood. * **Don't use sharp 90-degree corners:** Stick to the `Roundedness Scale` (Default: `0.5rem`) to maintain the "Contemporary" feel. * **Don't use standard dividers:** If you feel the need to add a line, use a 40px wide vertical margin instead. Let the space do the work.