/* ===================================================================== DESIGN TOKENS — every design decision of the site lives here. Change a value in this file and it updates on every page. Names match the Figma variables (e.g. color/accent = --color-accent). Try changes live in design-system.html before saving them here. ===================================================================== */ /* ---------- Custom fonts (files in /fonts) ---------- */ @font-face { font-family: "Nohemi"; src: url("../fonts/Nohemi-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nohemi"; src: url("../fonts/Nohemi-Medium.ttf") format("truetype"); font-weight: 500 700; /* Medium is the heaviest weight available */ font-style: normal; font-display: swap; } :root { /* ---------- 1. Primitives: the raw palette ---------- */ --green-500: #7cc400; /* readable green on white: active states, progress */ --green-300: #d6ff4f; /* neon */ --green-50: #f4f9e4; --peach-200: #ffd7b0; --sand-100: #f4f2ee; --gray-50: #f2f1f6; --gray-200: #e4e2ea; --gray-300: #c9c6d2; --gray-600: #55525e; --gray-950: #121212; --white: #ffffff; /* ---------- 2. Semantic colors ---------- */ --color-bg: var(--white); /* page background */ --color-bg-hero: #f3f3f1; /* hero & contact background (gray-white) */ --color-surface: var(--sand-100); /* boxes, image frames */ --color-text: var(--gray-950); /* main text */ --color-text-muted: var(--gray-600); /* secondary text */ --color-text-faint: var(--gray-300); /* not-yet-revealed words, outlines */ --color-accent: var(--green-500); /* active states, progress, numbers (green, no purple) */ --color-line: var(--gray-200); /* dividers and borders */ --color-tag-bg: var(--gray-50); /* tag background */ --hero-surface: linear-gradient(180deg, #f7f7f5 0%, #ececea 100%); /* home header: gray-white */ --hero-glow-gray: #d9d9d6; /* soft gray glows in the home header */ --hero-neon: #d6ff4f; /* neon green glow that follows the mouse */ --hero-neon-size: 760px; /* size of the neon glow (Design System → Home header) */ --hero-neon-opacity: 0.75; --hero-select: #8fdc00; /* Figma-style selection frame in the home header */ --code-bg: #111111; /* the code panel in the home header */ --code-ink: #ededed; --dots-color: rgba(17, 17, 17, 0.13); /* dot grid */ --dots-lit: #7cc400; /* dots near the glow */ --dots-gap: 16px; /* 60% of the first version */ --dots-size: 0.6; /* dot size: 1 = first version */ --dots-reach: 260px; /* how far around the glow the dots light up */ --color-blob-1: var(--hero-neon); /* background glow 1 (neon) */ --color-blob-2: #d9d9d6; /* background glow 2 (soft gray) */ /* ---------- 3. Fonts: three roles ---------- */ --font-heading: "Archivo", -apple-system, sans-serif; /* titles */ --font-body: "Archivo", -apple-system, sans-serif; /* running text */ --font-accent: "Inter", -apple-system, sans-serif; --font-serif: "Instrument Serif", Georgia, serif; /* used only for the big statements: home title, footer title */ /* small italic labels */ /* ---------- 4. Text styles ---------- Each style has: font, size, weight, tracking (letter spacing), leading (line height), case, style (italic) and color. Sizes are fluid: clamp(phone size, growth, desktop size). */ /* Display — the big title on the home page ("Product Designer.") */ --display-font: var(--font-serif); /* "Product Builder." — the serif accent */ --display-size: clamp(48px, 7.4vw, 104px); --display-weight: 400; --display-tracking: -0.01em; --display-leading: 0.95; --display-case: none; --display-style: italic; --display-color: var(--color-text); /* Hero name — your name above the big home title ("Ofir Tamir.") */ --name-font: "Archivo", -apple-system, sans-serif; --name-size: clamp(44px, 6.8vw, 96px); --name-weight: 400; --name-tracking: -0.045em; --name-leading: 0.95; --name-case: none; --name-style: normal; --name-color: #000000; /* Highlight — words wrapped in *stars* in the home name / title (a second font inside the same headline). Size is relative: 1em = same size. */ --mix-font: "Nohemi", -apple-system, sans-serif; --mix-size: 0.94em; --mix-weight: 600; --mix-tracking: -0.02em; --mix-leading: inherit; --mix-case: none; --mix-style: normal; --mix-color: inherit; /* Subtitle — the line under a hero title */ --subtitle-font: var(--font-heading); --subtitle-size: clamp(16px, 2.26vw, 24px); --subtitle-weight: 300; --subtitle-tracking: -0.03em; --subtitle-leading: 1.15; --subtitle-case: none; --subtitle-style: normal; --subtitle-color: #000000; /* H1 — project page title */ --h1-font: var(--font-heading); --h1-size: clamp(51px, 8.44vw, 90px); --h1-weight: 500; --h1-tracking: -0.05em; --h1-leading: 1; --h1-case: none; --h1-style: normal; --h1-color: var(--color-text); /* H2 — section titles ("Selected work", "How I solved it") */ --h2-font: var(--font-body); --h2-size: clamp(30px, 3.4vw, 44px); /* section titles: calmer next to the content */ --h2-weight: 400; --h2-tracking: -0.045em; --h2-leading: 1.05; --h2-case: none; --h2-style: normal; --h2-color: var(--color-text); /* H3 — sub-section titles ("Wireframes", "Pain points") */ --h3-font: var(--font-heading); --h3-size: clamp(27px, 3.8vw, 40px); --h3-weight: 400; --h3-tracking: -0.04em; --h3-leading: 1.12; --h3-case: none; --h3-style: normal; --h3-color: var(--color-text); /* H4 — titles inside cards and boxes */ --h4-font: var(--font-heading); --h4-size: clamp(21px, 2.28vw, 27px); --h4-weight: 400; --h4-tracking: -0.03em; --h4-leading: 1.18; --h4-case: none; --h4-style: normal; --h4-color: var(--color-text); /* Statement — the big sentence that lights up while scrolling */ --statement-font: var(--font-heading); --statement-size: clamp(35px, 6.41vw, 73px); --statement-weight: 500; --statement-tracking: -0.055em; --statement-leading: 1.02; --statement-case: none; --statement-style: normal; --statement-color: var(--color-text); /* Stat — big numbers (92%, 64…) */ --stat-font: var(--font-heading); --stat-size: clamp(38px, 5vw, 54px); --stat-weight: 500; --stat-tracking: -0.05em; --stat-leading: 1; --stat-case: none; --stat-style: normal; --stat-color: var(--color-text); /* Eyebrow — small label above titles ("The Challenge") */ --eyebrow-font: var(--font-accent); --eyebrow-size: 12px; --eyebrow-weight: 400; --eyebrow-tracking: 0em; --eyebrow-leading: 1.4; --eyebrow-case: uppercase; --eyebrow-style: normal; --eyebrow-color: #949494; /* Meta — small info line on cards ("Wix · Mobile App") */ --meta-font: var(--font-accent); --meta-size: 12px; --meta-weight: 400; --meta-tracking: 0em; --meta-leading: 1.4; --meta-case: uppercase; --meta-style: normal; --meta-color: #696969; /* Lead — intro paragraphs */ --lead-font: var(--font-body); --lead-size: clamp(18px, 2.2vw, 22px); --lead-weight: 400; --lead-tracking: 0em; --lead-leading: 1.55; --lead-case: none; --lead-style: normal; --lead-color: var(--color-text); /* Body — regular text */ --body-font: var(--font-body); --body-size: 17px; --body-weight: 300; --body-tracking: -0.01em; --body-leading: 1.3; --body-case: none; --body-style: normal; --body-color: #878787; /* Caption — labels under images */ --caption-font: var(--font-body); --caption-size: 12px; --caption-weight: 400; --caption-tracking: 0.1em; --caption-leading: 1.4; --caption-case: uppercase; --caption-style: normal; --caption-color: var(--color-text-muted); /* Tag — text inside tags */ --tag-font: var(--font-body); --tag-size: 14px; --tag-weight: 400; --tag-tracking: 0em; --tag-leading: 1.3; --tag-case: none; --tag-style: normal; --tag-color: var(--color-text-muted); /* ---------- Home hero spacing ---------- */ --hero-gap: 2px; /* space between your name and the big title */ --mix-space: -0.03em; /* extra space around highlighted (*starred*) words */ /* ---------- 5. Buttons ---------- */ --btn-radius: 13px; --btn-padding-y: 14px; --btn-padding-x: 26px; --btn-font-size: 16px; --btn-font-weight: 500; --btn-primary-bg: var(--gray-950); --btn-primary-text: var(--white); --btn-primary-hover-bg: rgba(17, 17, 17, 0.85); /* black buttons: 85% black on hover */ --btn-spring: cubic-bezier(.34, 1.56, .64, 1); /* the little bounce when the arrow appears */ --btn-secondary-bg: transparent; --btn-secondary-text: var(--gray-950); --btn-secondary-border: var(--gray-300); --btn-secondary-hover-bg: var(--gray-950); --btn-secondary-hover-text: var(--white); /* ---------- Menu (top bar on every page) ---------- */ --nav-top: 17px; /* distance from the top of the screen */ --nav-side: var(--gutter); /* distance from the sides = the page margins, so the menu lines up with the content */ --nav-max-width: calc(var(--max-width) - 2 * var(--gutter)); /* same width as the content */ --nav-height: 65px; --nav-padding-x: 17px; /* also the left padding of the project title card, so logo and title line up */ --nav-radius: 12px; --nav-bg: rgba(255, 255, 255, 0.4); /* see-through white */ --nav-blur: 22px; /* frosted-glass blur behind the bar */ --nav-panel-bg: var(--nav-bg); /* mobile dropdown card: same glass as the bar */ --nav-border: rgba(255, 255, 255, 0.7); --nav-shadow: 0 8px 30px rgba(20, 20, 40, 0.08); --nav-links-align: center; /* where the links sit: start / center / end */ --nav-logo-font: var(--font-heading); --nav-logo-size: 29px; --nav-logo-weight: 700; --nav-logo-tracking: -0.03em; --nav-logo-color: var(--color-text); --nav-link-font: var(--font-heading); --nav-link-size: 16px; --nav-link-weight: 400; --nav-link-color: #4f4f4f; --nav-link-gap: 64px; --nav-link-hover-weight: 700; /* links turn bold on hover, like the reference */ --nav-link-hover-color: var(--color-text); --nav-link-hover-line: none; /* none / underline */ --nav-cta-bg: var(--gray-950); --nav-cta-text: var(--white); --nav-cta-radius: 10px; --nav-cta-padding-y: 9px; --nav-cta-padding-x: 18px; --nav-cta-size: 15px; --nav-hide-on-scroll: 0; /* 1 = hide when scrolling down, show when scrolling up */ --recs-display: block; /* About page recommendations: block = shown, none = hidden */ --nav-clear-home: 1; /* home page: 1 = no glass at the top, it appears once you scroll · 0 = always glass */ --nav-clear-projects: 1; /* project pages: same choice, separately */ /* ---------- 6. Tags ---------- */ --tag-bg: var(--color-tag-bg); --tag-border: transparent; --tag-radius: 8px; --tag-padding-y: 5px; --tag-padding-x: 12px; /* ---------- 7. Project card images (home page & "Discover more") ---------- */ --card-ratio: 16 / 10; /* shape of the image area */ --card-bg: #f5f4fa; /* color around the image */ --card-padding: 0px; /* space between frame and image */ --card-radius: 20px; /* corners of the frame */ --card-img-radius: 0px; /* corners of the image itself */ --card-fit: cover; /* cover = fill & crop, contain = show whole image */ /* ---------- 8. Image frames inside project pages ---------- */ --frame-bg: var(--color-surface); /* the box around each image */ --frame-padding: 10px; /* the margin around the image */ --frame-radius: 24px; --frame-img-radius: 14px; --frame-border: transparent; /* The main project image (first image on each project page) */ --cover-bg: transparent; /* no gray frame around the main image */ --cover-padding: 0px; --cover-img-radius: var(--frame-radius); /* ---------- 9. Boxes (challenge, stats, numbered points, users) ---------- */ --box-bg: var(--color-surface); /* filled boxes */ --box-radius: 18px; --box-padding: 27px; --box-border: transparent; --box-outline-border: var(--color-line); /* outlined boxes (user cards) */ --box-text-push: auto; /* auto = text sits at the bottom of the box, 0px = right under the title */ --box-title-gap: 12px; /* minimum space between a box title and its text */ /* Research insight numbers: outlined, no fill */ --stat-bg: transparent; --stat-border: var(--color-line); /* Primary users: no box, a small rounded square before each title */ --bullet-color: var(--color-text); --bullet-size: 0.62em; --bullet-radius: 0.18em; /* Numbered points ("How I solved it"): cards per row on large screens */ --points-columns: 2; /* ---------- 10. Layout ---------- */ --gutter: clamp(20px, 4vw, 64px); --max-width: none; /* widest content (images, grids); none = full width */ --content-width: 960px; /* text column on project pages */ --content-align: start; /* start = left, center = centered */ --content-offset: 0px; /* auto = text column centered, 0px = sits on the left */ --intro-align: start; /* home intro paragraph: center / start */ --intro-width: 900px; --hero-align: start; /* project page title block */ --section-gap: clamp(88px, 11.12vw, 160px); /* space between sections: 160 on desktop, 88 on phones */ /* ---------- Project pages: title area ---------- Default = "No box": title on white, the cover image leads. ("Card" and "Full width" are one click away in design-system.html) */ --cs-hero-gap: 40px; /* menu → title area */ --cs-hero-inset: var(--gutter); --cs-hero-max: calc(var(--max-width) - 2 * var(--gutter)); --cs-hero-radius: 0px; --cs-hero-bg: transparent; /* var(--color-bg-hero) = colored box */ --cs-hero-blobs: none; /* block = soft color glows inside the box */ --cs-hero-pad-x: 0px; /* title starts on the content line */ --cs-hero-top: clamp(28px, 4vw, 56px); /* space above the title */ --cs-hero-bottom: 0px; --cs-hero-optical: 6px; /* optical nudge: the big title sits a touch higher so the gap above *looks* equal to the gap below */ --cs-hero-margin-top: calc(env(safe-area-inset-top, 0px) + var(--nav-top) + var(--nav-height) + var(--cs-hero-gap)); /* subtitle → image = logo → title (the bar is invisible at the top, so the eye measures from the logo) */ --cs-hero-after: calc(var(--cs-hero-gap) + var(--cs-hero-top) + (var(--nav-height) - 1.5 * var(--nav-logo-size)) / 2); /* ---------- Project pages: side column ---------- */ --aside-width: 300px; /* the sticky column on the right */ --aside-gap: 20px; /* space between content and the side column */ --cs-columns: minmax(0, 1fr) var(--aside-width); /* "minmax(0, 1fr)" = single column */ --aside-order: 0; /* -1 = show the info above the content */ --aside-position: sticky; /* sticky = follows you while scrolling, static = stays put */ --toc-display: block; /* "On this page" navigation: block / none */ --aside-bg: var(--color-bg); --aside-border: var(--color-line); --title-gap: 32px; /* big title → the text under it */ --intro-gap: 48px; /* intro text → the images / table / boxes it introduces */ --stack-gap: 20px; /* image ↔ image, table ↔ images */ --sub-block-gap: var(--section-gap); /* space before a second label/title inside a section = like between sections */ --pains-col-gap: clamp(32px, 5vw, 80px); /* Pain points: title column ↔ list */ --pains-optical: 3px; /* nudge so the title's letters and the first point's letters share a top line */ --pains-split: 1fr; /* title column vs. list column (1fr = half and half) */ --pains-item-gap: 36px; --pains-text-width: 38ch; /* Pain points: line length of the text under each point */ /* Pain points: space between the stacked points */ --rows-pad: 24px; /* padding of each stacked row (Research takeaways) */ --rows-title-gap: 22px; /* extra space between the title and the first row */ --aside-stack-gap: var(--nav-top); /* between the side cards and under the menu = the menu's distance from the top */ --case-gap: var(--aside-gap); /* Case Studies page: space between projects = image ↔ side column on a project page */ --anchor-gap: 40px; /* where menu / "On this page" links stop: this far under the menu */ --case-border: var(--color-line); /* Case Studies page: frame around each project */ --case-bg: transparent; /* or var(--color-bg-hero) for a gray card */ --case-inset: 12px; /* space between the frame and the image */ --case-text-width: 500px; /* the text column on the left */ --chip-inset: 5px; --next-chip-inset: calc(var(--chip-inset) + 3px); /* the Next project card is bigger, so its square sits a bit further in */ /* space around the neon/black arrow square inside a button or card */ --ft-bg: #0d0d0d; /* footer background (Design System → Footer) */ --ft-ink: #f2f2f0; /* footer text */ --ft-muted: #8a8a86; --ft-accent: var(--hero-neon); --ft-ascii: #4c7a12; /* the "code" characters */ --ft-ascii-hot: var(--hero-neon); /* characters near the mouse */ --ft-word: var(--hero-neon); /* the big name */ --ft-glow-opacity: 0.3; /* strength of the neon glow in the footer */ --ft-art-height: clamp(130px, 13vw, 200px); /* the code field at the bottom of the footer */ --about-line: 58ch; /* About text: about 14 words per line */ --about-stats-width: 620px; /* the three numbers sit in three equal columns inside this width */ --case-thumb-width: 360px; /* Case Studies list: the project image on the right */ --case-title-size: clamp(34px, 4.4vw, 64px); --case-idle: #c9c9c6; /* Case Studies list: project names that aren't active */ --code-gap: 18px; /* home header: spacing of the code characters */ --code-char-size: 12px; --title-measure: 16em; /* longest line of a section title */ --text-measure: 68ch; /* longest line of body text on project pages */ --case-line-img: 300px; /* Case Studies: image width in each row */ --case-line-pad: 28px; /* Case Studies: space above and below each row */ --trail-color: var(--green-500); /* home header: the code trail behind the mouse */ --tone-color: #8c8c89; /* the gray part of long titles */ --cards-row-gap: 56px; /* space between project cards when they stack (phones) */ --aside-shadow: none; /* "Like the menu" uses var(--nav-shadow) */ --aside-blur: 0px; /* glass blur behind the side cards */ /* ---------- 11. Corners (shared) ---------- */ --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px; /* ---------- Old names, kept so existing CSS keeps working ---------- */ --font-sans: var(--font-body); --text-display: var(--display-size); --text-h1: var(--h1-size); --text-h2: var(--h2-size); --text-h3: var(--h4-size); --text-lead: var(--lead-size); --text-body: var(--body-size); --text-small: var(--tag-size); --weight-heading: var(--h2-weight); --weight-body: var(--body-weight); --tracking-heading: var(--h2-tracking); --bg: var(--color-bg); --hero-bg: var(--color-bg-hero); --ink: var(--color-text); --ink-soft: var(--color-text-muted); --ink-faint: var(--color-text-faint); --accent: var(--color-accent); --peach: var(--color-blob-1); --lilac: var(--color-blob-2); --line: var(--color-line); --radius: var(--radius-md); --sans: var(--font-body); --serif: var(--font-accent); --sand: var(--color-surface); }