Majd

Overview

Majd is a portfolio system for a software engineer and Framer creator, embodying a design philosophy called 'Architectural Minimalism with Kinetic Accents.' The brand strips away unnecessary ornamentation, leaving only bold geometric forms, high-contrast typography, and strategic pops of electric blue (#0099ff) that signal interactivity and energy. The aesthetic evokes precision engineering meets contemporary web culture—clean, confident, and unapologetically direct. Users experience a sense of clarity and purpose: every element earns its place through function or visual hierarchy. The brand personality is direct, technically fluent, and conversational without being casual. Voice patterns favor active verbs, concrete outcomes, and a touch of understated wit. Example sentence in brand voice: 'I build scalable systems that don't compromise on user experience—let's talk about your next project.'

Colors

The color system anchors on a warm, off-white surface (#faf7f3) paired with near-black text (#111111), creating maximum legibility and a premium, editorial feel. Primary accent is electric blue (#0099ff), used exclusively for interactive elements—buttons, links, focus states, and call-to-action zones. This high-saturation blue appears infrequently but commands attention, making every interaction feel intentional. Secondary accent is a vibrant rose (#eb4d6d), reserved for highlights, badges, and supporting brand moments. The tertiary role is filled by the primary text color (#111111) itself, creating a monochromatic depth layer. Surface stack uses subtle warm grays (#f5f2ed, #ede9e4) to establish container hierarchy without introducing new hues. On-surface text is always #111111 for maximum

Typography

The type system pairs Archivo (a geometric sans-serif with high x-height and distinctive letterforms) for display and headline scales, with Inter (a neutral, highly legible humanist sans-serif) for body and label text. This pairing creates visual contrast: Archivo's bold, architectural presence commands attention in headlines (174px at weight 800 for the hero, 56px at weight 700 for section heads), while Inter's approachability makes long-form content inviting. Display text uses -0.02em letter-spacing to tighten the massive 174px size, creating a compressed, impactful presence. Headline scales drop to -0.015em and -0.01em respectively, maintaining tightness without sacrificing readability. Body text (16px–18px at weight 400) uses 24–28px line-height for generous vertical rhythm. All intera

Layout

The layout uses a 12-column grid with a 1280px max-width container, maintaining a 24px gutter between columns. Page rhythm is established through a 40px (lg spacing) section separator, creating breathing room between major content blocks. The hero section spans full-width with asymmetric padding: 64px (xl spacing) top/bottom, 24px (md spacing) left/right on mobile, scaling to 40px (lg spacing) on desktop. White-space is treated as a design material—negative space around the hero headline (174px Archivo) is as important as the text itself. Container-max-width of 1280px ensures content never feels cramped on ultra-wide displays. Micro-spacing uses the 8px unit scale: 4px (xs) for tight component spacing, 12px (sm) for input padding, 24px (md) for card padding and button spacing, 40px (lg) fo

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface-color shifts rather than dramatic drop shadows. Level 1 (Base): no shadow; surface is #faf7f3. Level 2 (Cards, inputs): 0 1px 2px rgba(0, 0, 0, 0.06) with 1px border in {colors.surface-container-high} (#ede9e4). Level 3 (Modals, popovers): 0 4px 12px rgba(0, 0, 0, 0.08) with background shifted to {colors.surface-container} (#f5f2ed). Level 4 (Floating elements, sticky headers): 0 16px 40px rgba(0, 0, 0, 0.12). Hover states elevate cards from Level 2 to Level 3 over 200ms, signaling interactivity without jarring motion. The

Shapes

The shape philosophy is called 'Functional Geometry'—radii are chosen to balance approachability with precision. Buttons and inputs use 8px (md: 0.75rem) border-radius, a sweet spot that feels modern without being overly rounded. Cards use 16px (lg: 1rem) for a slightly softer, more inviting container. The header navigation uses 20px (full: 9999px applied with max-width constraint) to create a pill-shaped container that feels friendly and contained. Decorative elements (the star and lightning bolt icons in the hero) use sharp corners (0px) to contrast with the rounded UI, emphasizing their gra

Components

Action Elements Buttons use a 48px height with 12px vertical and 24px horizontal padding, ensuring thumb-friendly tap targets on mobile. Primary buttons (#0099ff on white) use weight 600 label-md typography. Hover state shifts to #0077cc with a 200ms transition. Secondary buttons use #111111 background with a 1px outline in #666666, maintaining the monochromatic aesthetic. Ghost buttons are transparent with #0099ff text, useful for tertiary actions; hover adds a 8% opacity blue background (rgba(0, 153, 255, 0.08)). All buttons use cubic-bezier(0.4, 0, 0.2, 1) easing for snappy, responsive feedback.

Containers & Surfaces Cards use {colors.surface-container-lowest} (#ffffff) background with a 1px border in {colors.surface-container-high} (#ede9e4) and {elevation.sm} shadow. On hover

Do's and Don'ts

**Do**

• Do use Archivo for headlines and display text to command attention; reserve Inter for body copy and labels to maintain readability.
• Do apply the primary blue (#0099ff) exclusively to interactive elements—buttons, links, focus states—to train users' eyes toward clickable targets.
• Do maintain the 24px gutter and 40px section spacing to create visual rhythm; white-space is as important as content.
• Do use the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition on all interactive state changes for consistent, snappy feedback.
• Do pair high-contrast text (#111111 on #faf7f3) for maximum legibility; never drop below 4.5:1 WCAG AA contrast on body text.
• Do use the secondary rose (#eb4d6d) sparingly—badges, highlights, brand moments—to maintain its visual impact.

**Don't**

• Don't use rounded corners larger than 20px on interactive elements; it dilutes the precision aesthetic and confuses hierarchy.
• Don't introduce new accent colors beyond primary blue (#0099ff) and secondary rose (#eb4d6d); the system relies on restraint.
• Don't apply shadows larger than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)); excessive depth flattens the minimalist aesthetic.
• Don't mix Archivo and Inter weights arbitrarily; use weight 800 for display, 700 for headlines, 600 for labels, 400 for body.
• Don't use opacity or blur effects on text; the brand values clarity and directness—every word should be legible.
• Don't set button heights below 48px or padding below 12px vertical / 24px horizontal; accessibility and touch targets come first.