--- version: alpha name: Majd description: "Light monochrome interface measured from majd-portfolio.framer.website: Archivo type with sans-serif, tonal surfaces and 8px corners." colors: background: "#FFFFFF" surface: "#FFFFFF" on-surface: "#111111" on-background: "#111111" surface-container-low: "#FAF7F3" overlay: "#0000001A" primary: "#111111" on-primary: "#FAF7F3" typography: headline-display: fontFamily: Archivo fontSize: 174px fontWeight: 800 lineHeight: 0.9 letterSpacing: -0.02em headline-lg: fontFamily: Archivo fontSize: 76px fontWeight: 600 lineHeight: 1 letterSpacing: -0.02em headline-md: fontFamily: Archivo fontSize: 68px fontWeight: 600 lineHeight: 1 letterSpacing: -0.02em headline-sm: fontFamily: Archivo fontSize: 32px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.02em title-lg: fontFamily: Archivo fontSize: 26px fontWeight: 500 lineHeight: 1.2 body-md: fontFamily: Archivo fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.04em body-lg: fontFamily: Archivo fontSize: 18px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.04em label-md: fontFamily: sans-serif fontSize: 12px fontWeight: 400 headline-display-mobile: fontFamily: Archivo fontSize: 46px fontWeight: 800 lineHeight: 0.9 letterSpacing: -0.02em headline-lg-mobile: fontFamily: Archivo fontSize: 46px fontWeight: 600 lineHeight: 1 letterSpacing: -0.02em headline-sm-mobile: fontFamily: Archivo fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.02em rounded: sm: 8px md: 20px spacing: md: 10px lg: 20px gutter: 10px section: 120px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.sm}" padding: 0px height: 35px input-field: textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: 0px padding: 0px link: textColor: "{colors.on-primary}" --- # Majd Design System ## Overview Majd describes itself as: “Software engineer and Framer creator with a strong focus on building modern, scalable, and conversion-driven web experiences.” The interface is light, built on **White (#FFFFFF)** with **Charcoal (#111111)** text and almost no color: actions are carried by contrast, not hue. Type is set in **Archivo** and **sans-serif**. Headlines run large with tight negative tracking; body text is 16px. The surface language is flat. Corners are mostly 8px. Measured from [majd-portfolio.framer.website](https://majd-portfolio.framer.website/) on November 5, 2026 at 1440×900 and 390×844 from 184 rendered elements. Values are computed styles from the live page, not the original source files. ## Colors The palette has 6 roles. - **White (#FFFFFF):** Page background. Token `background`. - **Charcoal (#111111):** Primary text and headings, seen 26 times. Token `on-surface`. - **Warm Snow (#FAF7F3):** Raised areas one step from the page, seen 7 times. Token `surface-container-low`. - **Near Black 10% (#0000001A):** Translucent fill for cards and controls, seen 4 times. Token `overlay`. - **Charcoal (#111111):** Primary buttons and calls to action, seen 30 times. Token `primary`. - **Warm Snow (#FAF7F3):** Text and icons on primary. Token `on-primary`. ## Typography **Archivo** and **sans-serif** share the interface. Fallback stack: `Archivo, Archivo Placeholder, sans-serif`. - **headline-display:** Archivo 174px at weight 800, line height 0.9, tracking -0.02em (46px on mobile). Page title (h1). - **headline-lg:** Archivo 76px at weight 600, line height 1, tracking -0.02em (46px on mobile). Section headings (h2). - **headline-md:** Archivo 68px at weight 600, line height 1, tracking -0.02em. Sub-section headings. - **headline-sm:** Archivo 32px at weight 500, line height 1.2, tracking -0.02em (28px on mobile). Card and feature titles. - **title-lg:** Archivo 26px at weight 500, line height 1.2. Small titles. - **body-md:** Archivo 16px at weight 400, line height 1.4, tracking -0.04em. Body text. - **body-lg:** Archivo 18px at weight 400, line height 1.4, tracking -0.04em. Lead paragraphs. - **label-md:** sans-serif 12px at weight 400. Buttons, navigation and labels. ## Layout Spacing does not follow a strict grid: 22% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid. - **Scale:** md 10px, lg 20px. - **Sections:** 120px vertical padding between major sections. - **Gaps:** 10px is the most common gap in flex and grid layouts. - **Breakpoints:** 809px, 809.98px, 810px, 1279px, 1279.98px. ## Elevation & Depth The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#FAF7F3). ## Shapes Most elements use 8px corners. Measured radii, most used first: - **sm (8px):** 48 elements. - **md (20px):** 12 elements. ## Components Measured from the rendered page. Token values reference the tokens above. - **button-primary (“U s e f o r F r e e”):** #111111 fill, #FAF7F3 text, 12px/400, 8px radius, padding 0px. - **input-field (“Enter your name”):** transparent fill, #FAF7F3 text, 16px/400, padding 0px. - **link:** transparent fill, #FAF7F3 text, padding 0px. ## Do's and Don'ts - Do use #FFFFFF for the page and lift surfaces in small steps: #FAF7F3. - Do let contrast carry emphasis; primary actions use #111111 on #FFFFFF. - Do set headlines in Archivo with tight tracking (-0.02em). - Do reuse the measured spacing steps (10px, 20px). - Do use 8px corners on most elements; larger surfaces also use 20px. - Don't add drop shadows for depth; use tonal surfaces. - Don't introduce new font families beyond Archivo and sans-serif. - Don't add saturated accent colors; the measured palette is almost entirely neutral. - Don't make interface transitions slower than 0.3s. ## Motion Interface transitions are quick: 0.3s. - **Easing:** `linear`. Generated by [Sitepeel](https://sitepeel.dev/design-md/majd-portfolio.framer.website/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).