Mehedi Khan Portfolio Design System

Overview

This design system captures a minimalist academic portfolio built for clarity and readability above all else. The visual voice is that of a researcher or engineer: unadorned, information-dense yet breathable, trusting typography hierarchy over decorative flourish. The canvas is a cool light gray ({colors.canvas}) that softens the contrast of black-on-white reading without veering into warmth. Brand voltage lives almost entirely in the link color—a vibrant medium blue ({colors.primary}) that punctuates paragraphs as inline citations and anchors the navigational footer.

The single typographic move defining this system is its restraint: Lato at 400 weight carries body copy, while 700 weight marks every hierarchical boundary (name, section headers, news dates). There are no intermediate weights, no italic flourishes, no letter-spacing tweaks—the system trusts size and weight alone to create structure. Shape language is uniformly conservative: {rounded.DEFAULT} 4px corners appear only on the profile photograph, while everything else remains sharp or naturally rectangular.

The layout follows a single-column editorial pattern with a signature asymmetry: introductory text flows left while a photograph anchors the right rail at {spacing.photo-width} width. Below this hero fold, content stacks center-aligned (the link row) then left-aligned again (news, education sections). This is a document-first design—closer to a well-typeset PDF than to a marketing landing page.

Key Characteristics:

• Canvas is cool light gray ({colors.canvas} — #f7f7f7), never pure white, reducing eye strain during long reading sessions
• All interactive elements use the single brand blue ({colors.primary} — #1772d0) with no secondary accent color
• Typography relies exclusively on Lato with Noto Sans Bengali fallback for multilingual support
• Hierarchy is established through weight jumps (400 → 700) rather than size variation within body text
• Spacing uses a tight base unit of 2px ({`spacing.xxs}) scaling up to 60px containers
• The only rounded element in the entire interface is the profile photo at {rounded.DEFAULT}
• No box shadows detected; elevation is achieved through background color shifts only
• Link visited state uses a deep navy ({colors.link-visited} — #00008b) rather than purple, maintaining the blue family
• Section padding is generous at 30–36px vertical, giving each content block room to breathe

Colors

Brand & Accent

• Primary ({colors.primary} — #1772d0): The sole brand color, used for all hyperlinks (inline and navigational), active states, and semantic emphasis. A medium-saturation blue that reads clearly against both {colors.canvas} and {colors.white}.
• Primary Hover ({colors.primary-hover} — #125bb3): Darkened variant for hover states on links and buttons, providing tactile feedback without abandoning the blue family.
• Active ({colors.active} — #1772d0): Currently identical to primary; used for active navigation states or focused elements.

Surface

• Canvas ({colors.canvas} — #f7f7f7): The dominant background color covering the full viewport. A cool light gray that defines the page's academic, paper-like quality.
• Surface ({colors.surface} — #f7f7f7): Alias for canvas; used interchangeably for the main content background.
• Surface Soft ({colors.surface-soft} — #eeeeee): Slightly darker gray for potential card backgrounds or subtle separation zones not visible in current implementation but inferred from the palette.
• White ({colors.white} — #ffffff): Used exclusively behind the profile photograph, creating a subtle frame effect against the gray canvas.

Text

• Ink ({colors.ink} — #222222): Near-black primary text color for headings, body copy, and all non-linked content. Softer than pure #000 for reduced harshness.
• Body ({colors.body} — #222222): Identical to ink; the default paragraph color across all text components.
• Muted ({colors.muted} — #444444): Medium-gray secondary text, used for dates in news items ("April 2026", "November 2025") to de-emphasize temporal metadata.
• On Primary ({colors.on-primary} — #ffffff): White text reserved for any future button or label component using {colors.primary} as background.

Hairlines & Borders

• Hairline ({colors.hairline} — #dddddd): Light border color for potential input fields, dividers, or container edges.
• Border Strong ({colors.border-strong} — #cccccc): Slightly darker border for emphasized separation lines.

Semantic

• Link ({colors.link} — #1772d0): Standard hyperlink color, identical to primary. Applied to all <a> elements by default.
• Link Visited ({colors.link-visited} — #00008b): Deep navy blue for visited links, maintaining color-family consistency while indicating history.
• Success ({colors.success} — #006400): Dark green detected in the stylesheet, likely reserved for confirmation states or status indicators not currently visible.
• Info ({colors.info} — #1772d0): Alias for primary blue, used for informational callouts or tooltip-like elements.

Typography

Font Family

The system uses Lato as its exclusive Latin typeface, paired with Noto Sans Bengali as the first fallback for Bengali-script support (reflecting the subject's institutional context at BUET). The full fallback stack is "Lato, \"Noto Sans Bengali\", Verdana, Helvetica, sans-serif". Lato was chosen for its humanist warmth combined with excellent screen legibility at small sizes—its open apertures and tall x-height serve both headline impact (at 700 weight) and comfortable extended reading (at 400 weight). The inclusion of Verdana and Helvetica ensures graceful degradation on systems without web font loading.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-lg} | 32px | 700 | 1.55 | normal | Page title / "Mehedi Khan" | | {typography.title-md} | 24px | 700 | 1.55 | normal | Section headings ("News", "Education") | | {typography.title-sm} | 16px | 700 | 1.55 | normal | News item dates, strong inline labels | | {typography.body-md} | 16px | 400 | 1.55 | normal | Paragraph text, body copy | | {typography.body-sm} | 14px | 400 | 1.5 | normal | Smaller metadata, captions (inferred) | | {typography.caption} | 13px | 400 | 1.5 | normal | Fine print, timestamps (inferred) | | {typography.link-text} | 16px | 400 | 1.55 | normal | Navigation links, inline hyperlinks |

Principles

The typographic system operates on a binary weight philosophy: text is either regular (400) or bold (700). This stark contrast eliminates ambiguity about what deserves emphasis—if it's a heading, date marker, or proper noun requiring attention, it gets 700. Body prose never exceeds 400, ensuring that long-form biographical content remains comfortable to scan. Size variation is equally restrained: the jump from body (16px) to section heading (24px) is modest, while the name display (32px) provides the only dramatic scale shift on the page. Line height is consistently generous at 1.55× (approximately 24.8px for 16px type), reflecting an editorial sensibility that prioritizes reading comfort over density. Letter-spacing remains at normal (browser-default, typically 0em) throughout—no tracking adjustments are applied even at display sizes, preserving Lato's designed spatial rhythm.

A signature moment occurs in the news section where dates are rendered in bold 16px (matching body size but at 700 weight) immediately followed by regular-weight description text. This creates a "label + value" micro-hierarchy within single lines without resorting to color or size changes.

Note on Font Substitutions

Lato is available via Google Fonts and already loaded by the page through the provided CDN link. For teams unable to load web fonts, Open Sans serves as the closest Google Fonts substitute—it shares Lato's humanist geometry, similar x-height, and weight distribution. If further fallbacks are needed, Nunito Sans offers comparable openness at small sizes. Define these as CSS custom properties:

:root {
  --font-body: 'Lato', 'Noto Sans Bengali', 'Open Sans',Verdana, Helvetica, sans-serif;
}

The Bengali script support via Noto Sans Bengali should be preserved in all substitutions to maintain multilingual fidelity.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}). This atomic unit compounds into all larger tokens.
• Tokens: {spacing.xxs} (2px — micro-adjustments, letter-spacing offsets), {spacing.xs} (4px — icon padding, tight gaps), {spacing.sm} (6px — most frequent internal spacing, list item gaps), {spacing.md} (8px — standard element gaps), {spacing.lg} (12px — component internal padding), {spacing.xl} (20px — section-internal breathing room), {spacing.xxl} (22px — minor section breaks), {spacing.section} (30px — major vertical section spacing), {spacing.section-lg} (36px — hero-to-content transition), {spacing.container} (60px — page-level horizontal padding).
• Section padding (vertical): {spacing.section} (30px) separates News and Education blocks; {spacing.section-lg} (36px) clears space below the name heading into the intro.
• Card internal padding: Not applicable—this design uses no card surfaces; the photograph stands alone with no padding container.
• Gutters: The main gutter is implicit in the centered max-width container with {spacing.container} (60px) side padding. Between intro text and photograph, the gap appears to be fluid based on remaining space after the 320px photo allocation.

Grid & Container

The layout employs a single-column centered container with a max-width around 960–1020px (inferred from proportions). Content is center-aligned globally but text within sections defaults to left-align (except the name heading and link row). Density choice is firmly editorial: line lengths for body copy likely fall in the 65–75 character range, optimized for reading comprehension rather than information density.

At desktop widths, the intro section splits into a two-column asymmetric grid: fluid-width text column on the left, fixed {spacing.photo-width} (320px) photograph column on the right. Below the intro, content reverts to single-column stacking. There is no sidebar, no sticky rail, and no multi-column grid for list items—all news entries stack vertically.

Whitespace Philosophy

Whitespace is treated as structural, not decorative. The system uses vertical rhythm (30–36px between sections) to signal thematic breaks rather than rules or backgrounds. Horizontal whitespace comes from the generous 60px container padding, preventing text from touching viewport edges even on wide screens. Within paragraphs, the 1.55 line height provides inter-line breathing room without feeling "airy." This is a dense-but-comfortable academic layout—more paper than poster.

Header Architecture

+------------------------------------------------------------------+
|                                                                  |
|                        Mehedi Khan                               |
|                    [display-lg, centered]                        |
|                                                                  |
+------------------------------------------------------------------+
|  [max-width container, 60px side padding]                        |
+------------------------------------------------------------------+

There is no traditional navigation bar, logo mark, or utility menu. The "header" consists solely of the centered name heading, functioning as both identity anchor and document title.

Hero Section

+------------------------------------------------------------------+
|                                                                  |
|  +-------------------------------+  +------------------------+   |
|  |                               |  |                        |   |
|  |  Intro text block             |  |  Profile Photograph    |   |
|  |  (fluid width)                |  |  (320px fixed)         |   |
|  |  - Bio paragraph 1            |  |  [rounded: 4px]        |   |
|  |  - Bio paragraph 2            |  |  [bg: white]           |   |
|  |  - Bio paragraph 3            |  |                        |   |
|  |  - Bio paragraph 4            |  |                        |   |
|  |                               |  |                        |   |
|  +-------------------------------+  +------------------------+   |
|                                                                  |
|              Resume / GitHub / LinkedIn / Email / Blogs          |
|                     [link-row, centered]                          |
|                                                                  |
+------------------------------------------------------------------+

The hero comprises two bands: the name heading (centered, 32px bold) and the intro split (text left, photo right), followed by the centered link row acting as primary navigation.

News Section

+------------------------------------------------------------------+
|                                                                  |
|  News                                          [title-md]        |
|                                                                  |
|  • April 2026 - Joined CreateBud...            [news-item]       |
|  • November 2025 - Joined Sysmodeler...        [news-item]       |
|  • September 2025 - Team NeuronX won...        [news-item]       |
|  • May 2025 - Became Technical Committee...    [news-item]       |
|                                                                  |
+------------------------------------------------------------------+

Standard unordered list with bullet points, each item containing a bold date followed by regular description text with embedded links.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | {colors.canvas} background, no shadow | Page container, all text sections | | 1 (Frame) | {colors.white} background, 4px radius | Profile photograph container | | 2 (Subtle) | Potential {colors.surface-soft} background | Future card surfaces (unused currently) |

This is a flat design system with virtually no elevation. The only depth cue is the white background behind the photograph, which creates a subtle "floating" effect against the gray canvas. No drop shadows were detected in the extracted CSS—even the photograph lacks shadow, relying solely on the background-color contrast for separation. Borders and dividers are absent; sections are separated purely by vertical spacing. This flatness reinforces the document-like, academic character of the site.

Decorative Depth

None present. There are no gradient washes, pattern overlays, photographic treatments, or illustrative depth layers. The design embraces its flatness as a deliberate constraint.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.none} | 0px | All text containers, lists, sections (default) | | {rounded.sm} | 4px | Profile photograph corner rounding | | {rounded.DEFAULT} | 4px | Primary radius token, applied to image | | {rounded.md} | 4px | Reserved for future inputs/cards | | {rounded.lg} | 8px | Reserved for larger containers |

The shape vocabulary is intentionally impoverished: one active radius value (4px) used in exactly one place. Every other element is sharp-cornered. This reflects the utilitarian ethos—corners are not a design lever in this system.

Photography Geometry

The profile photograph is displayed at 320px × auto height (maintaining aspect ratio), with 4px border-radius applied to all four corners. The image has a solid {colors.white} background (likely the img element's background property or a wrapper div), creating a framed presentation. No object-fit cropping is apparent—the photo displays at natural aspect ratio. No avatar circles, no full-bleed treatments, no overlay text on imagery.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.nav-link-active}, {component.inline-link-visited}); add hover styling at implementation time per your stack's conventions.

Page Structure

{component.page-container} — The root wrapping element occupying the full viewport width with {colors.canvas} background and {spacing.container} (60px) horizontal padding. Contains all child sections. Uses {typography.body-md} as the default type context. Max-width constrains content to readable measure.

{component.hero-name} — The "Mehedi Khan" heading rendered in {typography.display-lg} (32px, weight 700) with {colors.ink} text. Center-aligned both horizontally and vertically within its band. No background fill (transparent). Acts as the sole identity marker and document title.

{component.intro-section} — The flex/grid container holding the two-column intro layout. Transparent background, {typography.body-md} context. Padding of {spacing.section-lg} (36px) top and bottom creates clearance from the name heading above and link row below.

{component.intro-text-column} — The left-flowing text area containing four biographical paragraphs. Auto-width (takes remaining space after photo allocation). Text is left-aligned, {typography.body-md}, {colors.ink}. Paragraphs have vertical margins creating internal rhythm (approximately {spacing.md} between them).

{component.intro-photo} — The right-rail profile photograph, fixed at {spacing.photo-width} (320px) width. Has {colors.white} background creating a subtle frame, and {rounded.DEFAULT} (4px) corner rounding. No shadow, no border. Displays the subject standing outdoors with rainbow backdrop.

Navigation & Links

{component.link-row} — The centered horizontal list of five text links (Resume / GitHub / LinkedIn / Email / Blogs). Uses {typography.link-text} (16px, weight 400) with {colors.link} blue. Padding of {spacing.xl} (20px) top and bottom gives it section-like prominence. Links are separated by forward slash characters (rendered as text, not borders).

{component.nav-link} — Individual navigation link within the link row. Transparent background, {colors.link} text, {typography.link-text}. Padding of {spacing.sm} (6px) horizontal and {spacing.md} (8px) vertical around each item. Transitions detected: all properties animate (likely color-only in practice) plus fill 0.15s for any SVG icon futures.

{component.nav-link-active} — Active/focused state for navigation links. Currently shares styling with default {colors.active} (identical to primary blue). Implement distinct treatment (underline or darker blue) at build time.

{component.nav-link-visited} — Visited state using {colors.link-visited} (deep navy #00008b). Maintains typographic consistency while signaling browser history.

{component.inline-link} — Hyperlinks embedded within body paragraphs (e.g., "Bangladesh University of Engineering and Technology", "CreateBud, Inc."). Uses {colors.link}, {typography.body-md}, no background. These are the most frequent interactive elements on the page.

{component.inline-link-visited} — Visited variant of inline links, shifting to {colors.link-visited} navy. Ensures users can distinguish previously-clicked citations from new ones.

Content Sections

{component.section-heading} — Section title elements like "News" and "Education". Rendered in {typography.title-md} (24px, weight 700), {colors.ink}. Padding of {spacing.lg} (12px) top and {spacing.md} (8px) bottom separates from preceding content and subsequent list.

{component.news-section} — The containing block for the News area. Transparent background, {typography.body-md} context. Vertical padding of {spacing.section} (30px) provides section-level spacing.

{component.news-item} — Individual <li> elements within the news list. Each contains a date span and description text. Transparent background, {typography.body-md}, {colors.ink}. Vertical padding of {spacing.sm} (6px) spaces items apart. Bullet point preserved (default browser disc).

{component.news-date} — The bold date prefix within each news item (e.g., "April 2026"). Uses {typography.title-sm} (16px, weight 700) in {colors.muted} gray. Creates the label-value hierarchy within the line.

{component.news-link} — Links appearing within news descriptions (e.g., organization names like "CreateBud, Inc.", "Sysmodeler.ai"). Styled identically to {component.inline-link} with {colors.link} blue.

{component.bullet-list} — The <ul> container for news items. Left padding of {spacing.xl} (20px) accommodates default browser bullet indentation. No custom list-style markers.

Do's and Don'ts

Do

• Do use {colors.primary} (#1772d0) for every interactive element—links, buttons, focus rings—to maintain the single-accent discipline.
• Do apply {typography.display-lg} (32px/700) exclusively to the page name heading; never reuse it for sub-sections.
• Do preserve the 4px radius ({rounded.DEFAULT}) only for image containers; keep all other corners sharp at {rounded.none}.
• Do maintain 1.55 line height ({typography.body-md}) for all paragraph text—this is calibrated for Lato's metrics.
• Do use {colors.muted} (#444444) for metadata like dates, keeping them visually subordinate to body text.
• Do center-align only the name heading and link row; keep all other text left-aligned for scannability.
• Do include Noto Sans Bengali in your font-stack before Verdana to support the target audience's script needs.
• Do separate major sections with {spacing.section} (30px) vertical whitespace rather than rules or background changes.
• Do set visited links to {colors.link-visited} (#00008b) to keep them in the blue family rather than defaulting to browser purple.
• Do constrain the photograph to 320px ({spacing.photo-width}) width maximum to preserve the text-photo balance.

Don't

• Don't introduce secondary accent colors—the entire brand expression lives in {colors.primary} blue; adding orange, green, or red would violate the system's austerity.
• Don't apply font weights between 400 and 700; the binary weight system is intentional and sufficient for this content density.
• Don't add box shadows to cards, images, or dropdowns—the flat aesthetic is deliberate and removing it would shift the voice toward "app" rather than "document."
• Don't expand border radius beyond 4px for any new component; if you need a pill-shaped button, reconsider whether it belongs in this design language.
• Don't reduce line height below 1.55 for body copy; Lato requires this much leading for comfortable reading at 16px.
• Don't right-align or justify body text; the left rag is part of the editorial feel.
• Don't place background colors on text sections beyond {colors.canvas}—the gray page background should remain uniform.
• Don't use {colors.success} green (#006400) for general UI feedback unless implementing specific validation states; it's currently unused and should stay reserved.
• Don't convert the link row into a navbar with hover underlines or background hovers; the current plain-text style is the intended interaction model.

Motion & Animation

Transition Tokens

--transition-all: all ease 150ms;
--transition-fill: fill 0.15s ease;

The extracted CSS reveals minimal motion: links transition all properties (interpreted as color transitions primarily) over 150ms with ease timing. SVG fill transitions are also specified at 150ms, suggesting potential icon color animations. No complex transform, opacity, or keyframe animations were detected in the stylesheet.

Keyframe Animations

None detected. The page appears fully static with no scroll-triggered fades, counters, or decorative animation loops.

Interaction Patterns

• Link color shift: Inline and nav links transition from {colors.link} to a darker shade (implement as {colors.primary-hover}) on hover, with 150ms easing.
• Visited state persistence: Clicked links shift to {colors.link-visited} navy and retain this state per browser history.
• Fill transition: Any SVG icons (currently none visible) would animate their fill property over 150ms, suggesting preparedness for icon integration.

Recommendation for added motion: If implementing scroll-reveal effects (e.g., fading in news items as they enter viewport), use a 300ms duration with cubic-bezier(0.4, 0, 0.2, 1) (Material standard ease-out) to match the system's understated voice. Avoid springy or bouncy curves—they would conflict with the academic tone.

Imagery Style

• Photographic, environmental portrait: The sole image is a candid outdoor photograph showing the subject full-body in natural lighting with a rainbow in the background.
• Natural color grading: Colors appear true-to-life with no heavy filters, desaturation, or vintage treatment.
• Subject matter: Environmental portraiture placing the subject in a natural setting (grass field, trees, sky) rather than studio headshot.
• Aspect ratio: Vertical/portrait orientation (roughly 3:4 or 4:5) displayed at constrained width.
• Role: Supportive, not dominant—the image occupies the right rail but text remains the primary information carrier.
• Treatment: Minimal—white background frame, 4px corner rounding, no overlay text, no gradient mask, no shadow.
• Future guidance: Additional imagery should follow this documentary/photojournalistic approach; avoid stock photography, illustrations, or abstract graphics.

Icon System

• Library: None detected (custom/text-only). The site uses text labels exclusively for navigation (Resume, GitHub, etc.) rather than iconography.
• Specific icons observed: No icons present in the current implementation. The fill 0.15s transition in the CSS suggests potential preparation for SVG icon integration, but none are rendered.
• Treatment: If adding icons in future iterations, recommend stroke-based Lucide icons at 16px or 20px, colored currentColor to inherit link or text color, aligned baseline with adjacent text.
• Alignment: Text-based nav suggests icons (if added) should be optional prefixes, not replacements for text labels.

Recommended Frontend Stack

- Framework:      Astro / Next.js (static portfolio, SEO-critical)
- Styling:        Vanilla CSS or CSS Modules (no framework overhead needed)
- Fonts:          Google Fonts: Lato (400, 700) + Noto Sans Bengali (400, 700)
- Animation:      Vanilla CSS transitions (150ms ease); no library required
- Icons:          Lucide React (if adding iconography later) or custom SVG
- Component lib:  None (hand-rolled components suffice for this complexity)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column stack: photo moves above or below text; link row wraps to 2-3 lines; container padding reduces to ~20px | | Tablet | 640–960px | Intro maintains two-column but photo width may reduce to ~240px; text size unchanged | | Desktop | > 960px | Current layout: 320px photo, 60px container padding, full type scale | | Wide | > 1280px | Container max-width caps (~1020px); content does not stretch further |

Touch Targets

• {component.nav-link} (in link row): Current padding ~6px × 8px—below WCAG AAA 44×44px minimum. Recommend expanding touch area to minimum 44px height for mobile, either via increased padding or invisible hit-area expansion.
• {component.inline-link}: Text-only links rely on text height (~16px)—also below 44px. Consider increasing line-height or padding around linked text for mobile usability.
• {component.news-item}: Full-width list items provide adequate tap targets horizontally; ensure vertical padding meets 44px minimum on mobile.

Collapsing Strategy

• Navigation (link row): On mobile (< 640px), the five links will wrap to multiple lines. Consider centering each line or switching to a compact horizontal-scrollable row if vertical space is constrained.
• Hero columns: The intro text + photo two-column layout must collapse to single column. Recommend stacking order: photo first, then text (visual hierarchy puts face before bio on small screens) or text first, then photo (content-first approach).
• Photograph width: Reduce from 320px to ~240px on tablet, potentially 100% width (with max-width constraint) on mobile.
• Container padding: Scale down from 60px to 20–24px on mobile to maximize content width.
• Type scale: Maintain 32px/24px/16px sizes on tablet; consider reducing display-lg to 28px on mobile if viewport width forces narrow line measures.

Image Behavior

• Profile photo: Should use max-width: 100% with height: auto to prevent overflow on narrow viewports. Maintain 4px border-radius at all breakpoints.
• No hero illustration or demo cards present in current design, so no complex responsive image strategy needed beyond the single photograph.

Iteration Guide

1. Build a static portfolio page matching this design system using vanilla HTML/CSS or Astro for optimal performance. Pull every color, font-size, radius, and spacing value from the YAML frontmatter via the {section.token} paths—never hard-code values that have defined tokens.
2. Set up the font loading chain: preload Lato 400/700 weights and Noto Sans Bengali 400/700 from Google Fonts using the provided URL. Define --font-body CSS variable holding the full fallback stack.
3. Implement the single-column centered container with {spacing.container} (60px) padding and max-width ~1020px. Inside, structure the three bands: name heading (centered), intro split (flexbox with justify-content: space-between), and stacked content sections.
4. Add state variants for links (-hover, -visited, -active) using the color tokens provided. The spec documents Default, Visited, and Active/Pressed states; implement hover as a darker blue using {colors.primary-hover}.
5. When adding new sections (Publications, Projects, Contact), clone the {component.news-section} pattern: {typography.title-md} heading + {component.bullet-list} content. Maintain the 30px section spacing rhythm.
6. Variants of existing components live as separate frontmatter entries (e.g., nav-link-visited, inline-link-visited)—never nest variants inside a single component definition.
7. Run accessibility audit: verify all links have discernible visited states, touch targets meet 44px minimum on mobile, and color contrast ratios pass WCAG AA for {colors.ink} on {colors.canvas} and {colors.primary} on {colors.canvas} (both should exceed 4.5:1).
8. For the profile photograph, apply background-color: {colors.white}; border-radius: {rounded.DEFAULT}; and constrain width to {spacing.photo-width} (320px) with object-fit: cover if cropping is acceptable, or contain if full-image display is preferred.
9. When in doubt about emphasis: use weight 700 before size increase, and use {colors.link} blue before any other color for interactive hints. The system's restraint is its defining characteristic.
10. Font setup: Ensure your CSS includes @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Bengali:wght@400;700&display=swap'); and applies font-family: var(--font-body) to the body element.

Known Gaps

• Hover state specifics: Only all ease 150ms transition is documented; exact hover color values for links (beyond {colors.primary-hover} inference) require browser testing.
• Loading/skeleton states: No loading indicators, skeleton screens, or pending states were extractable from the static page.
• Form validation states: No forms exist in the current design; error ({colors.error}) and success ({colors.success}) token applications are theoretical.
• Mobile-specific patterns: No hamburger menu, collapsible sections, or touch gesture interactions were visible—mobile behavior is extrapolated from desktop layout.
• Dark mode: The system is explicitly light-mode only (extensions.mode: "light"). No dark surface or inverted text tokens are defined.
• Print stylesheet: No @media print styles were detected; the academic nature of the content suggests print optimization would be valuable.
• Footer: The page ends after Education section with no explicit footer element (copyright, last updated, etc.). Whether this is intentional omission or out-of-scope content is unclear.
• Additional pages: Only the homepage/index was captured. Resume, individual blog posts, or project detail pages may introduce new components not represented here.
• CSS variable naming: No CSS custom properties (variables) were found in the extracted source; the design may be implemented with hardcoded values rather than a token system, making this spec prescriptive rather than descriptive for some values.