{ "schema": "brand-kit@2", "palette": { "paper": "#F2F2F3", "surface": "#FAFAFA", "ink": "#4C4D52", "ink_muted": "#8D8E96", "accent": "#E87D0D", "on_accent": "#FFFFFF", "accent_secondary": "#265787", "border": "#E2E3E4", "night": "#292D32", "on_night": "#FFFFFF", "extras": [ { "name": "Blender Orange (PMS 716)", "hex": "#E87D0D", "role": "Logo color, published. The orange of the logomark's swirl; the orange community badge ground. Not used as a UI color on blender.org", "prov": "published", "source": "https://www.blender.org/about/logo/ § colour swatches", "site_use": "Logo only; the favicon SVG renders the orange as #EA7600 (observed)" }, { "name": "Blender Blue (PMS 647)", "hex": "#265787", "role": "Logo color, published. The wordmark 'blender' and the eye of the logomark", "prov": "published", "source": "https://www.blender.org/about/logo/ § colour swatches", "site_use": "Logo only (observed)" }, { "name": "White", "hex": "#FFFFFF", "role": "Logo color, published (the third swatch); the white 'socket' surround of the logo; all copy on dark grounds and over hero art", "prov": "published", "source": "https://www.blender.org/about/logo/ § colour swatches", "site_use": "Hero titles, footer Donate text, What's Coming button fill (observed)" }, { "name": "Favicon orange (rendered)", "hex": "#EA7600", "role": "The orange the site's own logomark SVG uses; close to, but not, the published #E87D0D", "prov": "observed", "source": "https://www.blender.org/wp-content/themes/bthree/assets/icons/favicon.svg (2026-10-30)" }, { "name": "Background", "hex": "#F2F2F3", "role": "Web Assets --color-bg, hsl(210 4% 95%): the page ground of every blender.org page", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Homepage and logo page ground (observed)" }, { "name": "Background primary", "hex": "#FAFAFA", "role": "Web Assets --color-bg-primary (bg + 3%): box and card fill (--box-bg-color)", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Rounded content boxes on the logo, about and trademark pages (observed)" }, { "name": "Background secondary", "hex": "#EAEBEB", "role": "Web Assets --color-bg-secondary (bg - 3%): blockquote fill, table borders", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Background tertiary", "hex": "#E2E3E4", "role": "Web Assets --color-bg-tertiary (bg - 6%): the default border color and blockquote rule", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Text", "hex": "#4C4D52", "role": "Web Assets --color-text, hsl(230 4% 31%): headings and body copy on light grounds", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Every heading and paragraph on light bands (observed)" }, { "name": "Text primary", "hex": "#424348", "role": "Web Assets --color-text-primary (text - 4%): slightly stronger text", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Text secondary", "hex": "#8D8E96", "role": "Web Assets --color-text-secondary (text + 26%): muted text, navbar color", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Text tertiary", "hex": "#B2B3B8", "role": "Web Assets --color-text-tertiary (text + 40%): captions, blockquote cite", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Accent blue", "hex": "#0099FF", "role": "Web Assets --color-accent, hsl(204 100% 50%): links on hover, focus outline, active tabs, the primary (tinted) button text", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "'Download Logo Kit' button text on a 10% tint (observed on the logo page)" }, { "name": "Accent button gradient start", "hex": "#6183FF", "role": "Web Assets --btn-accent-bg-img: linear-gradient(350deg, hsl(227 100% 69%), hsl(206 90% 62%)), the .btn-accent fill", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Donate button in the nav and footer (observed)" }, { "name": "Accent button gradient end", "hex": "#47AAF5", "role": "End of the .btn-accent gradient (hsl(206 90% 62%))", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Body / dark ground", "hex": "#292D32", "role": "Web Assets --body-bg, --color-bg-alt and the secondary navbar, hsl(213 10% 18%): hero ground under the art, sub-navigation bar, footer", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Sub-nav bar, hero fallback, footer (observed)" }, { "name": "Global navbar", "hex": "#1C1E22", "role": "Web Assets --navbar-global-bg hsl(213 10% 12%); also the dark-theme --color-bg", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Secondary navbar separator", "hex": "#40474F", "role": "Web Assets .navbar-secondary --navbar-separator-color", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Secondary navbar link", "hex": "#D2D6DA", "role": "Web Assets .navbar-secondary --navbar-link-color", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "Sub-nav links on the logo page (observed)" }, { "name": "Button ground", "hex": "#EAEDF0", "role": "Web Assets --btn-color-bg hsl(210 16% 93%): default .btn fill; also --input-color-bg", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Button text", "hex": "#677A8E", "role": "Web Assets --btn-color hsl(210 16% 48%): default .btn text", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Input border", "hex": "#D3D9DF", "role": "Web Assets --input-color-border hsl(210 16% 85%)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Info", "hex": "#13BDE7", "role": "Web Assets --color-info (status)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Info background", "hex": "#D9F5FC", "role": "Web Assets --color-info-bg: alert-info fill", "prov": "published", "source": "web-assets src/styles/_variables.sass", "site_use": "The survey announcement bar above the nav (observed)" }, { "name": "Success", "hex": "#6BB125", "role": "Web Assets --color-success (status)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Warning", "hex": "#E4A511", "role": "Web Assets --color-warning (status)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Danger", "hex": "#EE5353", "role": "Web Assets --color-danger (status)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Code", "hex": "#903D94", "role": "Web Assets --code-color hsl(297 42% 41%): inline code text", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Dark theme surface", "hex": "#30353B", "role": "Web Assets dark theme --color-bg-primary hsl(213 10% 21%)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Dark theme text", "hex": "#C7CBD1", "role": "Web Assets dark theme --color-text hsl(213 10% 80%)", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "Massive-title teal", "hex": "#46EBC2", "role": "Heading color of the 'Free and Open Source' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Near-black box", "hex": "#1C1C1C", "role": "Ground of the 'Free and Open Source' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Massive-title blue", "hex": "#0066FF", "role": "Heading color of the 'Part of the industry' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Blue tint box", "hex": "#F2F7FF", "role": "Ground of the 'Part of the industry' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Massive-title purple", "hex": "#9300FF", "role": "Heading color of the 'It's about people.' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Purple tint box", "hex": "#F8F2FF", "role": "Ground of the 'It's about people.' box", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Footer heading grey", "hex": "#ABB2BA", "role": "Footer column headings (14px/600) on #292D32", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Black", "hex": "#000000", "role": "Text of the white hero button; ground of the about page's activities band", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30); https://www.blender.org/about/ (2026-10-30)" }, { "name": "Survey bar link cyan", "hex": "#10A2C6", "role": "Text and underline of the survey announcement link on the #D9F5FC bar (Web Assets alert-info text)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Nav logo orange (as served)", "hex": "#F4792B", "role": "Orange of the nav logo SVG that bthree serves as a CSS background (.navbar-logo-blender). Site-only rendering; the published logo orange stays #E87D0D and the favicon uses #EA7600", "prov": "observed", "source": "source/bthree-style.css .navbar-logo-blender data URI (2026-10-30)" }, { "name": "Nav logo blue (as served)", "hex": "#0E548B", "role": "Blue of the wordmark and eye in the nav logo SVG (published logo blue is #265787)", "prov": "observed", "source": "source/bthree-style.css .navbar-logo-blender data URI (2026-10-30)" }, { "name": "Nav logo white (as served)", "hex": "#FEFEFE", "role": "White pupil/socket fill inside the nav logo SVG", "prov": "observed", "source": "source/bthree-style.css .navbar-logo-blender data URI (2026-10-30)" }, { "name": "Footer link grey", "hex": "#737E8C", "role": "Footer link text, footer-note line and social icon color on #292D32 (14px desktop, 12px phone); hover keeps the color and adds an underline", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Footer column rule", "hex": "#454C54", "role": "2px vertical rule on the left of the Follow/Support column in the footer (desktop only)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Card shadow grey", "hex": "#959DA5", "role": "Card thumbnail shadow: 0 8px 24px rgba(149,157,165,0.2) under every news/dev/studio/people image", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Accent glow blue", "hex": "#0052FF", "role": "Glow of the gradient accent buttons: rgba(0,82,255) at 0.1, 0.1 and 0.3 (nav) or 0.55 (Download Blender, footer Donate)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Accent gradient hover start", "hex": "#708FFF", "role": "Hover state of the .btn-accent gradient: linear-gradient(350deg, #708FFF, #5AB3F6)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Accent gradient hover end", "hex": "#5AB3F6", "role": "End of the .btn-accent hover gradient", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Accent button hover ground", "hex": "#F3F5F6", "role": "background-color under the accent gradient on hover (not visible behind the gradient)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Ecosystem gradient start", "hex": "#020381", "role": "Left end of the Ecosystem cover overlay: linear-gradient(90deg, #020381, #2874FC) at opacity 0.6 over the photo collage", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "name": "Ecosystem gradient end", "hex": "#2874FC", "role": "Right end of the Ecosystem cover overlay gradient", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" } ] }, "typography": { "display": { "family": "Inter", "weight": 800, "tracking": 0, "line_height": 1, "fallback_stack": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif", "real": "Inter (variable, wght + slnt; SIL OFL 1.1, The Inter Project Authors), shipped in Blender Web Assets as Inter-VariableFont_slnt,wght.ttf", "stand_in": false, "prov": "published", "source": "web-assets src/styles/_variables.sass; web-assets src/styles/_fonts.sass", "site": { "weight": 800, "size_px": "72 desktop (>=1220px) / 55 (>=900px) / 36 phone (--fs-hero-title 7.2 / 5.5 / 3.6rem at 1rem = 10px)", "line_height": "1 (hero h1: line-height = font-size); 1.3 on homepage 'massive titles' (93.6px at 72)", "tracking": "normal", "prov": "published", "source": "web-assets src/styles/_variables.sass; web-assets src/styles/_hero.sass; observed https://www.blender.org/ (2026-10-30)", "loading": "Load Inter exactly as blender.org does: ONE @font-face for the variable file registered at font-weight: 400 only (src Inter-Variable.ttf format('truetype'), font-weight: 400, font-style: normal), and set every weight with font-variation-settings: \"wght\" N alongside font-weight N. Never register the face as 'font-weight: 100 900'. Because the face is registered at 400, Chrome adds synthetic bold on top of the 600 and 800 axis weights: headings (28px section labels 600, 32px feature titles 600, 72px titles 800) render visibly heavier than a plain Inter 600/800 at the same advance width (\"Latest News\" 28px: 168.1px wide either way). Weights below 600 (400 body, 500 buttons) get no synthesis. Verified 2026-10-30 by rendering both setups against the live page." } }, "body": { "family": "Inter", "weight": 400, "tracking": 0, "line_height": 1.556, "scale": 1, "fallback_stack": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif", "real": "Inter", "stand_in": false, "prov": "published", "source": "web-assets src/styles/_variables.sass", "site": { "weights": "300 light, 400 body, 500 buttons, 600 headings h1-h6 and bold, 800 hero and massive titles (--fw-light/--fw-bold/--fw-title)", "sizes_px": "base 14 / 16 (>=900px) / 18 (>=1220px); lead 21 / 24; small 12 / 14", "line_height": "--lh-base 20px, 28px from 900px (1.556 at 18px)", "tracking": "normal throughout", "prov": "published", "source": "web-assets src/styles/_variables.sass" } }, "mono": { "family": "Source Code Pro", "weight": 400, "fallback_stack": "ui-monospace, Menlo, Monaco, \"Cascadia Mono\", \"Segoe UI Mono\", \"Roboto Mono\", \"Source Code Pro\", \"Fira Mono\", monospace", "real": "No brand mono: Web Assets sets a system monospace stack (ui-monospace first)", "stand_in": true, "prov": "published", "source": "web-assets src/styles/_variables.sass" }, "calibration": "No calibration needed: Inter is Blender's real web face, open (SIL OFL 1.1) and shipped in Web Assets; the variable file is in the book's fonts folder. Web Assets sets html font-size 62.5% so 1rem = 10px; all published sizes above are converted at that rate. Tracking is normal everywhere (no letter-spacing in the type tokens). Mono has no brand face; Source Code Pro is our pick from inside their own system stack.", "variation": "Measured 2026-10-30: every text element sets font-variation-settings \"wght\" (e.g. \"wght\" 800 on the hero H1 and massive titles, \"wght\" 600 on headings, \"wght\" 500 on buttons); no other axes. font-optical-sizing is auto but the served Inter variable (slnt, wght axes; no opsz) has no optical-size axis, so it has no effect. font-feature-settings normal; letter-spacing normal everywhere. The hero headline is Inter 800 at 72px/72px (36px/36px phone).", "loading": { "rule": "Load Inter exactly as blender.org does: ONE @font-face for the variable file registered at font-weight: 400 only (src Inter-Variable.ttf format('truetype'), font-weight: 400, font-style: normal), and set every weight with font-variation-settings: \"wght\" N alongside font-weight N. Never register the face as 'font-weight: 100 900'. Because the face is registered at 400, Chrome adds synthetic bold on top of the 600 and 800 axis weights: headings (28px section labels 600, 32px feature titles 600, 72px titles 800) render visibly heavier than a plain Inter 600/800 at the same advance width (\"Latest News\" 28px: 168.1px wide either way). Weights below 600 (400 body, 500 buttons) get no synthesis. Verified 2026-10-30 by rendering both setups against the live page. Set -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on html and body, as blender.org does. Without it, 400 body text (24px feature copy, 20px box paragraphs) renders visibly heavier and denser than the live page; with it plus the 400-registered face, headings stay heavy and body stays light.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30); bthree style.css @font-face{font-family:Inter;...;font-weight:400;font-variation-settings:\"wght\" var(--font-weight)}" } }, "style": { "button_shape": "rounded", "button_note": "Buttons: radius .6rem (6px), padding .8rem 1.6rem, line-height 2.4rem (3.2rem from 900px), weight 500. Default .btn is #EAEDF0 with #677A8E text; .btn-accent is the 350deg #6183FF to #47AAF5 gradient with a blue glow; .btn-primary is a 10% blue tint with #0099FF text; .btn-secondary is a 2px inset outline. Active state scales to 0.95", "corners": "6px (--border-radius) on buttons and inputs; 12px (--border-radius-lg) on boxes, cards, images and covers", "linework": "2px borders (--border-width .2rem); soft low-alpha shadows on boxes", "motion": "150ms transitions (80ms fast, 250ms slow), ease-out; buttons scale to 0.95 when pressed", "prov": "published", "source": "web-assets src/styles/_variables.sass; web-assets src/styles/_button.sass; web-assets src/styles/_mixins.sass" }, "voice": { "tone": [ "Free", "Community-minded", "Enthusiastic", "Plainspoken" ], "notes": [ "Plainspoken means concrete, not simple: Blender talks to practitioners in the names of real tools and techniques, then adds a little warmth ('Really!'). Vague benefit copy is off-voice.", "Blender publishes no voice or copy guide. Everything here is read from its own pages (observed 2026-10-30), not prescribed.", "Freedom is the through-line: free to use, change, share and sell your work; 'Free and Open Source software, forever.'", "Credit the people: the community, contributors and artists come before the software; hero art carries the artist's name.", "Warm and a little playful: exclamation marks and asides appear in Blender's own copy ('Really!', 'Hi Five!').", "Plain explanations, including of money: who pays, how funds are spent, annual reports.", "The trademark rules govern how others use the name: written out in full, never abbreviated or merged into another name." ], "rules": [ { "id": "technical-specificity", "kind": "guidance", "text": "Product copy names the actual tool, technique or standard (path tracer, N-Gons, B-spline bones, planar tracking, OpenGL viewport, Python API). Never replace a feature with a benefit abstraction ('one file from start to finish', 'ready for anything'). Short noun-phrase list items, no verbs of promise.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30) § Everything You Need", "examples": { "do": [ "PBR shaders & HDR lighting support", "Support for Planar tracking and Tripod solvers", "B-spline interpolated bones" ], "dont": [ "Ready for film, games and more", "Your setup, saved with you", "One file from start to finish" ] } }, { "id": "news-register", "kind": "guidance", "text": "News and Studio excerpts name the real thing (a person, a technique such as NPR or Gaussian splatting, a phase such as fundraising) and may open with a lively verb phrase ('Buckle up', 'Let's take a stroll'). Never generic invitations ('Watch', 'Meet', 'Discover', 'The team shares').", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30) § Blender Studio, Blender Development" }, { "id": "headline-case", "kind": "headline_case", "value": "title", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "Scoped: SECTION LABELS and feature titles are Title Case (Latest News, Blender Development, Everything You Need, Make it Your Own; short words like 'it' stay lowercase). CARD TITLES and captions keep the source's sentence case, never title-cased (e.g. 'Showcasing Blender at industry events', 'The demo scene is back with Nodevember', 'Splatting the Gaussians into Blender'). Box titles are sentence case: 'Part of the industry', 'It’s about people.' (with full stop)." }, { "id": "spelling", "kind": "spelling", "value": "en-US", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "Site copy spells 'colors', 'customize', 'organization' (US); Web Assets code comments use 'Colours' (UK)" }, { "id": "exclamations-allowed", "kind": "guidance", "text": "Exclamation marks are part of the voice in moderation: one in a line of enthusiasm, never in rules or legal copy", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "id": "name-in-full", "kind": "guidance", "text": "Write the name as Blender: never abbreviated, modified or combined with other words or symbols into a new mark", "prov": "published", "source": "https://www.blender.org/about/trademark-policy/" }, { "id": "credit-as-text", "kind": "guidance", "text": "To say a work was made with Blender, type it out (e.g. 'made with Blender') rather than using the logo", "prov": "published", "source": "https://www.blender.org/about/logo/ § Usage in Credits" }, { "id": "free-forever", "kind": "guidance", "text": "Describe Blender as Free and Open Source software (capitalised as Blender writes it), licensed GNU GPL", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "id": "no-trial-language", "kind": "avoid", "terms": [ "free trial", "educational version", "trial version" ], "why": "The license page contrasts Blender with trial or educational editions of commercial software; Blender has none", "prov": "inferred", "source": "https://www.blender.org/about/license/" }, { "id": "no-affiliation-implied", "kind": "guidance", "text": "Third-party copy must never imply official affiliation, sponsorship or endorsement by the Blender Foundation", "prov": "published", "source": "https://www.blender.org/about/trademark-policy/" } ], "approved": { "phrases": [ "The Freedom to Create", "Free and Open Source", "Free and Open Source software, forever", "Artistic freedom starts with Blender", "The Free and Open Source 3D Creation Suite", "It's about people.", "made with Blender" ], "words": [ "free", "open source", "community", "artists", "create", "freedom" ] }, "banned": [ "free trial", "educational version" ], "prov": "observed", "source": "https://www.blender.org/" }, "spec": { "source": "https://www.blender.org/about/logo/", "how": "blender.org's logo, trademark, about, foundation, license, website and press pages and homepage (text and HTML, fetched 2026-10-30), the Blender Web Assets v2.2.10 source (the official front-end framework for blender.org sites, read from projects.blender.org/infrastructure/web-assets) and the live bthree theme CSS; no PDF brand guide exists", "provenance": "published", "motion": [ { "name": "transition", "easing": "ease", "duration_ms": 150, "use": "--transition-speed: color, background and border changes on buttons, links and inputs", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "transition-fast", "easing": "ease-out", "duration_ms": 80, "use": "--transition-speed-fast with --transition-timing-fast: the button press scale", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "transition-slow", "easing": "ease", "duration_ms": 250, "use": "--transition-speed-slow: slower reveals", "prov": "published", "source": "web-assets src/styles/_variables.sass" }, { "name": "press", "easing": "ease-out", "duration_ms": 80, "use": "Buttons scale to 0.95 on :active", "prov": "published", "source": "web-assets src/styles/_mixins.sass" } ], "icons": { "grid": "not published", "stroke": "not published (an icon font: fontutti)", "sizes": [ { "name": "button icon", "px": 12, "use": "max width of an SVG icon inside a button (Web Assets button mixin)" } ], "set": "fontutti, a Fontello-built icon font in Web Assets: 152 glyphs, 111 custom plus Font Awesome (15), Typicons (11), Entypo (7), Fontelico, Elusive, Linecons and MFG Labs", "color": "currentColor (icons inherit the text color)", "prov": "published", "source": "web-assets fontutti_config.json; web-assets src/styles/_mixins.sass" }, "signature": [ { "name": "Heavy Inter headings (synthetic bold on the variable face)", "where": "every 600 and 800 heading: section labels, feature titles, hero and massive titles", "spec": "Load Inter exactly as blender.org does: ONE @font-face for the variable file registered at font-weight: 400 only (src Inter-Variable.ttf format('truetype'), font-weight: 400, font-style: normal), and set every weight with font-variation-settings: \"wght\" N alongside font-weight N. Never register the face as 'font-weight: 100 900'. Because the face is registered at 400, Chrome adds synthetic bold on top of the 600 and 800 axis weights: headings (28px section labels 600, 32px feature titles 600, 72px titles 800) render visibly heavier than a plain Inter 600/800 at the same advance width (\"Latest News\" 28px: 168.1px wide either way). Weights below 600 (400 body, 500 buttons) get no synthesis. Verified 2026-10-30 by rendering both setups against the live page. Set -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale on html and body, as blender.org does. Without it, 400 body text (24px feature copy, 20px box paragraphs) renders visibly heavier and denser than the live page; with it plus the 400-registered face, headings stay heavy and body stays light.", "dont": "Don't register Inter as font-weight 100 900 or load Google Fonts Inter: headings then render a clear step lighter than blender.org. Don't omit -webkit-font-smoothing: antialiased on html/body." }, { "id": "complete-logo", "name": "The complete orange-and-blue logo", "where": "the top-left of every blender.org page, credits, the logo kit; the only place the published colors appear", "spec": "logomark plus lowercase 'blender' wordmark, horizontal, with the registered mark; orange #E87D0D swirl, blue #265787 eye and wordmark, white; full color with its white surround on images, or full color, black or white without the surround on simple plain grounds", "once": "one Blender logo per piece, and secondary to the owner's own brand when a third party uses it", "example": { "ground": "paper", "text": "blender" }, "dont": "alter, recolor, enhance, crop to the mark alone (third parties), use it as your own logo, or show it more prominently than your own name", "prov": "published", "source": "https://www.blender.org/about/logo/" }, { "id": "artist-hero", "name": "Artist-made hero art", "where": "the hero of every blender.org page", "spec": "a full-bleed render made with Blender (film still, splash screen) behind a left-aligned white Inter 800 title (72px desktop, line-height 1) and a 24px subtitle; .1rem .1rem .4rem 25% black text-shadow; ground #292D32 behind the image; the artist or studio credited as a small link at bottom right", "once": "one hero image per page, always credited", "example": { "ground": "night", "text": "The Freedom to Create" }, "dont": "use stock photography or uncredited art; Blender's own imagery is work made in Blender", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30); web-assets src/styles/_hero.sass" }, { "id": "massive-title-box", "name": "Massive-title boxes", "where": "homepage message sections (Free and Open Source, Part of the industry, It's about people.)", "spec": "a rounded 12px box with a soft shadow and 48px padding; a 72px Inter 800 heading (line-height 1.3) in one saturated color on its own tint: #46EBC2 on #1C1C1C, #0066FF on #F2F7FF, #9300FF on #F8F2FF; 20px body in #4C4D52 (white on the dark box)", "once": "one color per box; each box a different color", "example": { "ground": "#F2F7FF", "text": "Part of the industry", "ink": "#0066FF" }, "dont": "use the logo orange or blue for these headings (the site never does); stack two boxes of the same color", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "id": "accent-gradient-button", "name": "Blue gradient accent button", "where": "the Donate button in the nav and footer; .btn-accent", "spec": "linear-gradient(350deg, #6183FF, #47AAF5), white 500-weight text with a faint text-shadow, 6px radius, a layered blue glow (rgba(0,82,255) at 10%, 10% and 55%), heart icon before the label", "once": "one accent button in view", "example": { "ground": "paper", "text": "Donate" }, "dont": "use the gradient for secondary actions; those are #EAEDF0 grey or outlined", "prov": "published", "source": "web-assets src/styles/_variables.sass; web-assets src/styles/_button.sass" } ], "page": { "source": "https://www.blender.org/", "date": "2026-10-30", "prov": "observed", "measured_at": "live page with Playwright at 1440x900 and 390x844 (Chromium), plus measure/home-desk.json and home-phone.json; page height 9686 desktop, 15373 phone", "voices": "Two voices. The homepage (and any landing page built from this spec) is a plain, institutional news-and-release hub: a release headline (\"Blender 5.3 Beta\") with one factual subtitle line, Title Case section labels (Latest News, Blender Development, Blender Studio, Everything You Need), uppercase card kickers (BLENDER SURVEY 2026, REPORTS), sentence-length card titles, and feature copy written as a short paragraph plus \"· \" bullet lists. The warmer community voice (freedom, people, an exclamation now and then: \"Join the official Blender Survey 2026!\", \"Really!\") lives in the four message boxes and the alert. A landing page follows this homepage voice and this anatomy; the book's fixed rules (Blender written in full, complete logo, credited Blender-made art, Free and Open Source wording) still hold. Where the guide and the site disagree on color, the guide is law for the logo (#E87D0D / #265787) and the site is how it is served on the web (nav logo SVG #F4792B / #0E548B; favicon #EA7600): keep each scoped. No brand color (orange or logo blue) is ever used for UI; UI accents are #0099FF and the #6183FF to #47AAF5 gradient.", "resting_state_note": "The ref/ desktop fold and phone fold screenshots were captured scrolled and the phone full-page capture shows the mobile menu open with the hero blanked. The resting state below is re-measured live: survey alert visible at the top, menu closed, hero art loaded.", "announcement": { "summary": "Full-width survey alert above the nav: one centred underlined link line on a pale cyan bar. It is the only bar above the nav (there is no separate dark utility bar at rest; the #292D32 strip at the top of ref/home-desk-full.png is the body ground showing through a capture artefact).", "text": "Join the official Blender Survey 2026! followed by an orange heart emoji; \"official Blender Survey 2026\" is bold (600)", "href": "https://www.blender.org/news/blender-survey-2026/", "ground": "#D9F5FC (Web Assets alert-info), no border, no radius", "desktop": "y 0-48, 1440 wide, padding 10px; text 18px/28px Inter 400 #10A2C6 with a 2px underline in the same color, centred (link x 545-896)", "phone": "y 0-40, padding 10px; 14px/20px, one centred line (x 59-332)", "resting_state": "Always visible at load; not dismissible; scrolls away (not sticky)" }, "nav": { "summary": "White 64px bar under the alert: complete Blender logo at the left of the 1170 container, a right-aligned row of seven plain text links and a blue gradient Donate button at the far right. Phone: logo left, hamburger right.", "ground": "#FFFFFF with box-shadow 0 1px 2px rgba(0,0,0,0.05) at rest; when stuck to the top after scrolling the shadow becomes 0 0 24px rgba(0,0,0,0.2) (desktop)", "height": "64px desktop (y 48-112), 64px phone (y 40-104, padding 8px)", "border": "none; separation is the 1px/2px shadow only", "logo": { "variant": "complete horizontal logo (orange orbit + blue eye + lowercase blender wordmark + registered mark), full colour, no white socket, served as an SVG CSS background (background-size 100%, centred)", "px": "128px wide box, logo drawn about 128x37 (SVG viewBox 198x58), vertically centred in the 64px bar", "position": "desktop x 151 (container 1170 at x 135 + 16px padding); phone x 8 in a 128x48 box", "colors": "nav SVG fills #F4792B orange, #0E548B blue, #FEFEFE white (these are the served values; the published logo is #E87D0D / #265787)", "hover": "opacity 0.8", "file": "nav-logo-blender.svg (the logo the theme serves; SVG embedded in style.css)" }, "links": { "count": 8, "labels": [ "Roadmap", "Download", "Support", "Get Involved", "About", "Jobs", "Store", "Donate" ], "hrefs": [ "/roadmap/", "/download/", "/support/", "/get-involved/", "/about/", "/jobs/", "https://store.blender.org/", "https://fund.blender.org/" ], "size": "14px", "weight": 400, "color": "#4C4D52; hover #0099FF (no underline)", "alignment": "right-aligned group: Roadmap x 678, Download 756, Support 838, Get Involved 907, About 1006, Jobs 1062, Store 1110 (each padding 0 8px, full 64px tall); Donate button x 1185", "highlight_dots": "Roadmap and Jobs carry a 6px #0099FF dot (::after, absolute, top 16px, right 4px) above the end of the label", "dropdowns": "none" }, "actions": "['Donate: .btn-accent, 104x32 at x 1185 y 64; linear-gradient(350deg, #6183FF, #47AAF5); white 14px/32px Inter 500 label after a heart outline icon; radius 6px; padding 4px 16px; glow 2px 4px 4px rgba(0,82,255,0.1), 1px 16px 24px rgba(0,82,255,0.1), 2px 8px 32px rgba(0,82,255,0.3); hover gradient #708FFF to #5AB3F6'] | Donate box: height fixed 32px (height: 32px; line-height 24px; padding 4px 16px), 104 wide, 14px 500 white", "sticky": "position sticky, top 0: the alert scrolls away and the nav sticks", "phone": "{'shows': 'logo (128x48 box at x 8) and a 53x48 hamburger button at x 329 (fontutti i-menu glyph, 15px #4C4D52, transparent ground, radius 6px); no Donate in the bar', 'menu': 'drops down under the bar (not a full sheet): eight full-width rows Roadmap ... Store, then a heart + Donate row; each row 51px, 15px/400 #4C4D52, padding 16px, #F2F2F3 ground, separated by 2px rules; Roadmap and Jobs keep the #0099FF dot at the right edge; the rest of the screen below is #292D32', 'cta': 'none in the bar; Donate only inside the menu'} | the 15px size applies only to the rows of the opened phone menu; the closed bar shows logo + hamburger only" }, "hero": { "summary": "Full-bleed 640px art hero: a Blender Studio film splash (OVERGROWN) as a cover background with a 25deg dark gradient from the lower left, and a bottom-left stack of a heavy white release headline, a 24px subtitle and two buttons; a small \"Blender Studio\" credit link bottom right. Copy verbatim: headline 'Blender 5.3 Beta'; subtitle 'NVIDIA RTX Spark-ready with support for DLSS denoising, Gaussian Splatting, and much more!'", "desktop": { "band": "y 112-752, 1440x640, ground #292D32 under the image", "content_box": "container 1170 (x 135) with 16px padding; .hero-content x 151 w 1138, anchored to the bottom with 48px bottom margin (content y 496-704)", "headline": "x 175 (24px inset inside the content box), y 496, 72px/72px, ink width about 583px for \"Blender 5.3 Beta\"", "subtitle": "y 576, box max-width 800px with text-wrap: balance, 24px/28px: the line breaks are balanced, giving 2 lines of ~536 and ~531px. Use text-wrap: balance, not a hard break", "buttons": "row at y 648, 40px tall, 9px gap: What's Coming 226x40 at x 175, Download & Test 175x40 at x 410", "text_max_width": 800, "media_frame": "none: image is full-bleed edge to edge, no radius, no overlap with the next band", "credit": "Blender Studio, 14px underlined white link at opacity 0.5, text-shadow 0 0 16px rgba(0,0,0,0.66), x 1335 y 723 (8px from right and bottom)" }, "phone": { "band": "y 104-744, 390x640; background-position 80% 50% so the raccoon character stays in frame", "order": "headline, subtitle, then the two buttons stacked (What's Coming wraps above Download & Test), all left-aligned at x 40", "sizes": "headline 36px/36px 800 at y 419 (one line, 310 wide); subtitle 21px/28px, 4 lines, y 463-575; What's Coming 197x32 at y 607 (14px/24px 500, padding 4px 48px); Download & Test 143x32 at y 648 (14px/24px 400); credit 12px at x 299 y 718; subtitle also text-wrap: balance" }, "at_rest": "Static: no motion, no carousel. Image loaded, overlay linear-gradient(25deg, rgba(0,0,0,0.66) 10%, rgba(0,0,0,0) 65%), plus a .hero-overlay color of rgba(10,10,10,0) (transparent)", "media": { "src": "hero-splash-overgrown.webp: the OVERGROWN splash by Blender Studio, served by blender.org", "size": "2000x1000 webp", "fit": "background-size cover, position 100% 50% desktop / 80% 50% phone" }, "type": "Headline Inter 800 (font-variation-settings \"wght\" 800), 72px/72px desktop, 36px/36px phone, tracking normal, #FFFFFF, text-shadow 1px 1px 4px rgba(0,0,0,0.25) on all hero text; subtitle Inter 400 24px/28px (21px/28px phone) #FFFFFF", "cta": [ "What's Coming (primary on art): fill rgba(255,255,255,0.9), text #000000 18px/32px Inter 500, padding 4px 48px, radius 6px, no shadow; hover fill #FFFFFF", "Download & Test (secondary on art): fill rgba(255,255,255,0.1), text #FFFFFF 18px/32px Inter 400, padding 4px 16px, radius 6px; hover fill rgba(255,255,255,0.2)" ], "proof": "none in the hero (no logos, no stats)", "copy": { "headline": "Blender 5.3 Beta (the current release; use it as is)", "subtitle": "NVIDIA RTX Spark-ready with support for DLSS denoising, Gaussian Splatting, and much more!", "cta": "What's Coming -> https://www.blender.org/download/releases/5-3/ ; Download & Test -> https://builder.blender.org/download/daily/", "credit": "Blender Studio (links to the film)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" } }, "sections": [ { "name": "Latest News", "summary": "Section label plus a 2-up row of news cards and one full-width annual-report card below it.", "ground": "#F2F2F3 (page ground; no band color change from here to the footer)", "desktop": "#news container 1170 at x 135, padding 48px 16px (content x 151-1289); H2 at y 800; grid 2 x 561px with 16px column gap and 24px row gap; card 1 and 2 thumbnails 561x316 at y 848 (16:9); annual-report card spans both columns, thumbnail 1138x564 at y 1298 (about 2:1)", "phone": "H2 24px/28px at y 792; the two news cards stay side by side (170 and 172 wide, thumbnails 96 tall, 16px gap); annual-report card full width 358x174 at y 1134", "anatomy": [ "H2 \"Latest News\" 28px/32px Inter 600 #4C4D52, margin-bottom 16px; the heading is a link to /news/ with no underline", "Card = thumbnail link (radius 12px, shadow 0 8px 24px rgba(149,157,165,0.2), img object-fit cover, image also has 0 2px 4px rgba(0,0,0,0.05)) + 16px gap + uppercase kicker 14px/21.8px Inter 600 #4C4D52 + title 21px/24.5px Inter 400 #4C4D52 with padding 8px 0 16px", "Kickers (verbatim structure): BLENDER SURVEY 2026, BLENDER CONFERENCE RECAP, REPORTS", "Card hover: title turns #0099FF; thumbnail image scales to 1.033", "No card background, border or padding: the text sits straight on #F2F2F3 (card-layout-card-transparent)", "All card titles (news, Development, Studio, people cards) use text-wrap: balance, so 2-line titles split into even halves (e.g. 'Connecting / Blender Community', 'Showcasing Blender / at industry events', 'BCON26: Blender / Studio talks'). The hero subtitle also uses balance. Body paragraphs do not.", "Card titles verbatim: 'Your participation will help shape the future of Blender.' (1 line) / 'Enjoy the recap of BCON26, which took place this September in Amsterdam.' (2 balanced lines) / report card: 'Blender Foundation Annual Report 2025'. Titles are full sentences with a full stop where the source has one", "The fixed back-to-top circle (#hop, see page chrome) shows at the right edge once scrolled; build it" ], "components": [ "news_card" ] }, { "name": "Blender Development", "summary": "Section label linking to code.blender.org and four equal post cards with excerpts.", "ground": "#F2F2F3", "desktop": "section y 1980-2495, padding 30px 0; H2 at y 2010; 4 columns x 272.5px with 16px gaps at x 151, 440, 728, 1017; thumbnails 273x153 (16:9) at y 2058; title at y 2219; excerpt 18px/28px", "phone": "single column, 358 wide; thumbnails 358x201; title 18px/20.6px; excerpt 14px/20px; about 346px pitch per card", "anatomy": [ "H2 \"Blender Development\" 28px/32px 600 #4C4D52 (links to code.blender.org)", "Card: thumbnail (radius 12, same shadow), title 21px/24.5px 400 with margin-top 8px and padding 8px 0, excerpt 18px/28px 400 #4C4D52; no kicker", "Thumbnails are the dev blog's own text-on-image graphics (GAUSSIAN SPLATS INITIAL SUPPORT RECAP etc.); use the files, never redraw", "Titles/excerpts are links, open in a new tab", "Excerpts: 18px/28px paragraphs, one or two sentences, 2-5 lines at 273px (the four cards measured 5, 5, 3, 2 lines); margin-bottom 16px. Titles 21px/24.5px, 1-3 lines", "All card titles (news, Development, Studio, people cards) use text-wrap: balance, so 2-line titles split into even halves (e.g. 'Connecting / Blender Community', 'Showcasing Blender / at industry events', 'BCON26: Blender / Studio talks'). The hero subtitle also uses balance. Body paragraphs do not.", "Card titles verbatim: Splatting the Gaussians into Blender / Geometry Nodes Workshop: September 2026 / Small Teams, Ambitious Projects / Geometry Nodes Physics. Excerpts are written by the developers, plain and specific: what was implemented and what's next, the workshop held after the conference, the strategic targets for the next two years, physics in 5.2 LTS. One ends in a truncation '[…]'" ], "components": [ "post_card" ] }, { "name": "Blender Studio", "summary": "Same 4-up post card row, pulling from studio.blender.org.", "ground": "#F2F2F3", "desktop": "H2 at y 2543 (48px top margin), grid y 2591-2957, 4 x 272.5px, thumbnails 273x153", "phone": "single column, thumbnails 358x201, rows at y 2922, 3232, 3562, 3872", "anatomy": [ "H2 \"Blender Studio\" 28px/32px 600", "Cards (titles verbatim): BCON26: Blender Studio talks / OVERGROWN: What’s next? / Announcing 'Cowboi' / OVERGROWN Teaser Premiere. Title 21px/24.5px, margin-top 8px, padding 8px 0, 2 lines (Cowboi 1 line). Excerpt 18px/28px #4C4D52, one sentence that wraps to 2-4 lines at 273px; the excerpt box is a block 140px tall (5 x 28px) on every card (165 where the title is 1 line), so the grid is 366px tall regardless of excerpt length", "Identical card component to Blender Development", "All card titles (news, Development, Studio, people cards) use text-wrap: balance, so 2-line titles split into even halves (e.g. 'Connecting / Blender Community', 'Showcasing Blender / at industry events', 'BCON26: Blender / Studio talks'). The hero subtitle also uses balance. Body paragraphs do not.", "Studio excerpts are the film studio's voice: short, lively, insider. Verbatim where short: 'It’s time to learn new things from the creators who share!' / 'Let's take a stroll into the world of OVERGROWN.' The other two: one names the next steps after the community fundraising phase (Francesco speaking), one opens 'Buckle up' and mentions a director's debut and NPR techniques. Never 'Watch', 'Meet', 'The team shares'" ], "components": [ "post_card" ] }, { "name": "Free and Open Source box", "summary": "Near-black rounded box: teal massive title, two white paragraphs with an underlined Learn more link, and a cluster of teal heart hexagons at the right.", "ground": "#1C1C1C box (radius 12px, padding 48px, shadow 0 2px 4px rgba(0,0,0,0.05)) on the #F2F2F3 page", "desktop": "box x 135 w 1170, y 3053-3423 (48px top margin); text column 80% (x 183, 859 wide); hex image 134x192 at x 1123 y 3101, top-right", "phone": "box full-bleed 390 wide (container margin 0) with radius 12px, y 4234-5042; title 50.64px/65.8px, 3 lines; image drops below the text, right-aligned at x 208", "anatomy": [ "Massive title \"Free and Open Source\" 72px/93.6px Inter 800 #46EBC2", "Two 20px/31.1px Inter 400 #FFFFFF paragraphs; \"Learn more\" is a #FFFFFF underlined (2px) inline link", "Image: teal heart hexagons PNG (Development Fund hex), 333x478 native, shown 134x192", "Paragraph spacing: paragraph 1 (2 lines: public project, hosted on blender.org, GNU GPL, owned by its contributors) has margin-bottom 16px; paragraph 2 STARTS with a
(a blank 31px line) before 'For that reason Blender is Free and Open Source software, forever.' + underlined 'Learn more' link. So the visible gap between the paragraphs is 16 + 31 = 47px, about 62px baseline to top" ], "components": [ "massive_title_box" ] }, { "name": "Part of the industry box", "summary": "Pale blue box: blue massive title, one paragraph, and a row of four grey/colour member-organisation logos.", "ground": "#F2F7FF box, radius 12px, padding 48px", "desktop": "y 3471-3873; title y 3519; paragraph y 3629 (2 lines across 1074px); 4 equal logo columns, logos centred: Khronos 195x51, Linux Foundation 174x57, Open Invention Network 147x86, ASWF 129x69, row centred around y 3782", "phone": "full-bleed box y 5090-5900; logos stacked one per row, centred at x 98-293, about 80-110px pitch", "anatomy": [ "Massive title \"Part of the industry\" 72px/93.6px 800 #0066FF", "Paragraph 20px/31.1px 400 #4C4D52", "Partner logos as supplied PNGs (no recolour, no filter), each a link to the organisation, radius 0" ], "components": [ "massive_title_box", "logo_row" ] }, { "name": "It's about people box", "summary": "Pale purple box: purple massive title, one line of copy and four portrait photo cards with two-line titles.", "ground": "#F8F2FF box, radius 12px, padding 48px", "desktop": "y 3921-4613; title y 3969; line y 4079; 4 cards x 257px at x 183, 456, 728, 1001; thumbnails 257x342 (3:4 portrait) at y 4134; titles 21px/24.5px at y 4492", "phone": "full-bleed box y 5948-8253; cards single column 294 wide, thumbnails 294x392", "anatomy": [ "Massive title \"It's about people.\" (sentence case with full stop) 72px/93.6px 800 #9300FF", "Line 20px/31.1px #4C4D52", "Portrait cards: radius 12, shadow 0 8px 24px rgba(149,157,165,0.2), title only (no kicker, no excerpt)", "Portrait thumbnails are exactly 257x342 (never shorter), object-fit cover; title below with padding 8px 0 16px, 2 lines at 21px/24.5px; card total 431px tall (342 + 16 gap + 73 title block)", "Card titles verbatim, sentence case: Connecting Blender Community / Showcasing Blender at industry events / Creating Worlds at BCON19 / The demo scene is back with Nodevember", "One line of copy under the title (20px/31.1px, 1 line at 1074px): three short fragments about designers, developers, engineers and artists driven by passion", "All card titles (news, Development, Studio, people cards) use text-wrap: balance, so 2-line titles split into even halves (e.g. 'Connecting / Blender Community', 'Showcasing Blender / at industry events', 'BCON26: Blender / Studio talks'). The hero subtitle also uses balance. Body paragraphs do not." ], "components": [ "massive_title_box", "portrait_card" ] }, { "name": "The Ecosystem cover", "summary": "Rounded photo-collage cover (grid of community video stills) under a dark-to-bright blue gradient, with a white massive title, two paragraphs and an underlined link.", "ground": "photo ecosystem-bcon20-todos.jpg (object-fit cover) + overlay linear-gradient(90deg, #020381, #2874FC) at opacity 0.6; radius 12px", "desktop": "x 135 w 1170, y 4661-5141 (min-height 480px), padding 48px; text column 66% (709px) at x 183; title y 4736", "phone": "full-bleed 390x614, y 8301-8915; title 50.64px 2 lines", "anatomy": [ "Layer order (bottom to top): the collage image (absolute, object-fit cover), THEN the gradient span ABOVE it (absolute inset 0, linear-gradient(90deg, #020381 0%, #2874FC 100%), opacity 0.6), THEN the text container (position relative). The blue wash must sit OVER the photo: if the photo shows natural skin tones the overlay is underneath; fix the stacking", "Content is vertically centred in the 480px min-height cover (padding 48px): title at y 4736 (27px below the padding edge because of the centring)", "Massive title 'The Ecosystem' 72px/93.6px 800 #FFFFFF, margin-bottom 16px", "Then ONE paragraph, 20px/31.1px white, max 709px, built as: sentence 1 alone ('Countless communities and thriving businesses are built around Blender.'), then

(a blank line), then sentence 2 on tutorial makers, content creators, add-on developers and marketplaces forming an ever-expanding ecosystem (2 lines). Total 4 line-boxes: 1 + blank + 2 (y 4846-4970)", "Then, as its own paragraph (margin-top 16px, y 4986), only the link 'Find Blender Communities' (white, underlined) to /community/" ], "components": [ "massive_title_box" ] }, { "name": "Everything You Need (features)", "summary": "A big plain heading then six alternating feature rows: text column and a 16:9 Blender UI screenshot that bleeds toward the page edge, swapping sides every row.", "ground": "#F2F2F3, no box", "desktop": "section y 5189-9154. Heading 'Everything You Need' at x 167 y 5205 (block 128px: 72px/112px, margin-top 16px, padding-bottom 16px). Six rows (li.feature-item), each padding 80px 0, rows touch (no gap). Row heights are FIXED by their content and must come out: 572, 706, 706, 594, 556, 631px (text column height + 160). Text column 553px wide (x 167 on odd rows, x 720 on even rows); image column 553px with the 664x373 image overflowing it by 48px outward (odd rows image x 713-1377; even rows image x 16-680), image vertically centred on the text column. Text column stack, top to bottom: title 32px/49.8px (one line, 50px box), then .feature-desc with padding 16px 0 16px; inside it the paragraph (24px/37.3px, max-width 537px, margin-bottom 16px), then the list (no margin; each item one 37.3px line unless it wraps; no gap between items). Row 1 ends with an extra empty 37px paragraph + 16px margin (an empty

after the list). Vertical: the heading block starts at y 5205 (16px below the section top 5189), row 1 starts at y 5361 directly under the 128px heading block +28px, and the section ends 28px below row 6 (y 9126 -> 9154). Rows 1-6 start at y 5361, 5933, 6639, 7345, 7938, 8495: hit these y values.", "phone": "heading 28px/40px 800 at x 16. Rows padding 48px 0, stacked: title 28px/40px 600 at x 32 (w 326), then .feature-desc padding 18px 0 with paragraph and list inset to x 50, w 290 (21px/30px, paragraph margin-bottom 16px), then the image 326x183 with 20px margin above and below; odd rows image at x 32, even rows at x -64 (bleeds off the left, clipped). Row heights: 797, 921 for rows 1-2.", "anatomy": [ "Heading 'Everything You Need' 72px/112px Inter 800 (+synthetic bold) #4C4D52, a link to /features/, no box, no subtitle", "Feature title: 32px/49.8px Inter 600 (+synthetic bold) #4C4D52. Gap title->paragraph = 16px (desc padding-top). Gap paragraph->list = 16px (paragraph margin-bottom). List items: no bullets, each item text starts with '· ' (middle dot, space), 24px/37.3px, zero item spacing", "Both the paragraph AND the list are max-width 537px inside the 553px column (that is why exactly three items wrap: 'Edge slide, inset, grid and bridge fill, and more', '3D painting with textured brushes and masking', 'Python scripting for custom tools and add-ons', and in VFX 'Real-time preview of your tracked footage and 3D scene')", "Line counts per row at 1440 (paragraph lines + list lines): row 1 Cycles Render Engine: 3 + 4 (+1 empty line); row 2 Modeling, Sculpt, UV: 3 + 9 (6 items, 3 wrap to 2 lines); row 3 VFX: 7 + 5 (4 items, 1 wraps); row 4 Animation & Rigging: 4 + 5; row 5 Story Art, Drawing 2D in 3D: 4 + 4; row 6 Make it Your Own: 5 + 5", "List items verbatim (Blender's own feature names, technical and concrete): Cycles: Real-time viewport preview / CPU & GPU rendering / PBR shaders & HDR lighting support / VR rendering support. Modeling: Full N-Gon support / Edge slide, inset, grid and bridge fill, and more / Advanced sculpting tools and brushes / Multi-resolution and Dynamic subdivision / 3D painting with textured brushes and masking / Python scripting for custom tools and add-ons. VFX: Auto and Manual tracking / Powerful camera reconstruction / Real-time preview of your tracked footage and 3D scene / Support for Planar tracking and Tripod solvers. Animation & Rigging: Envelope, skeleton and automatic skinning / B-spline interpolated bones / Curve editor and dope sheets / Custom bone shapes for fast input / Sound synchronization. Story Art: Combine 2D with 3D right in the viewport / Full Animation Support with Onion Skinning / Layers & Colors for Stroke and Fill / Sculpt brush strokes & Parent to 3D objects. Make it Your Own: Customize the interface layout and colors / Hi-res/Retina screen support / Create your own tools and add-ons / Draw over the OpenGL viewport / Connect with Blender's Render API", "Paragraphs (write your own, at the line counts above, in the same register): row 1 names Cycles as a built-in unbiased path tracer with ultra-realistic rendering; row 2 says the modeling tools make creating and editing models easy; row 3 opens 'VFX professionals say:' then the quote 'Probably the best tracker in the market' in curly quotes (the site names no person; keep it unattributed) then describes camera and object tracking, masking and live camera movement in the 3D scene; row 4 says the rigging and animation tools are used for short films, ads, TV series and features; row 5 opens with 'Really!' and argues drawing in a 3D viewport frees storyboarders and 2D artists; row 6 says the interface is Python-controlled (layout, colors, size, fonts) and extendable with add-ons", "No divider rules between rows (the theme's orange ::before rule renders 0px tall)", "Images are real Blender interface screenshots, radius 12px, no shadow" ], "components": [ "feature_row" ] }, { "name": "Freedom download row", "summary": "One centred line: right-aligned tagline beside the gradient Download Blender button.", "ground": "#F2F2F3", "desktop": "y 9154-9233; two 50% columns: \"The Freedom to Create.\" 20px/31.1px #4C4D52 right-aligned ending at x 702 (padding 24px 0); button 253x40 at x 738 y 9173", "phone": "tagline right-aligned full width at y 14415; button 218x32 left-aligned at x 0 y 14520 (14px) | The Download Blender button really sits flush at x 0 on phone (its column has no padding), 218x32; keep it there, centred vertically in a 77px row under the right-aligned line 'The Freedom to Create.' (padding 24px 0)", "anatomy": [ "Download Blender: .btn-accent px-5, padding 4px 48px, 18px/32px 500 white, gradient #6183FF to #47AAF5, glow 2px 4px 4px rgba(0,82,255,0.1), 1px 8px 24px rgba(0,82,255,0.1), 2px 8px 48px rgba(0,82,255,0.55)" ], "components": [ "button_accent" ] } ], "footer": { "summary": "Dark #292D32 sitemap: four link columns (each with stacked groups), a fifth wider column split off by a 2px vertical rule holding social icons and the Donate block, and one centred note line.", "ground": "#292D32 from y 9233 to the page end 9686; first group titles 79px below its top", "anatomy": [ "container 1170 at x 135; row of col-md-2 columns 195px wide at x 136, 331, 525, 720 (15px padding), then col-md-3 292px at x 915 with border-left 2px solid #454C54", "Vertical rhythm: the footer ground starts at y 9233 and the first group titles sit at y 9312, 79px below the ground's top (footer padding-top 48px plus 31px row offset). Use 79px; this replaces any other padding figure.", "Group spacing is TIGHT: group title (14px/24px 600, 24px tall) sits directly on its list; the list has margin-bottom 8px; the next group title starts right after (e.g. column 1: About at y 9312, its 8 links 9336-9528, Organization at y 9536, People/Jobs 9560-9608, Blender Network at y 9616). No other gap between groups; never 24px", "Group titles 14px/24px Inter 600 #ABB2BA (most are links); links 14px/24px 400 #737E8C, no bullets, hover underline (color unchanged)", "Columns verbatim: [{\"column\": 1, \"groups\": [{\"title\": \"About\", \"href\": \"/about/\", \"links\": [\"Blender Foundation\", \"Blender Institute\", \"Blender Studio\", \"License\", \"Logo & Trademark\", \"Credits\", \"Privacy Policy\", \"Code of Conduct\"]}, {\"title\": \"Organization\", \"href\": \"none (plain label)\", \"links\": [\"People\", \"Jobs\"]}, {\"title\": \"Blender Network\", \"href\": \"https://network.blender.org/\", \"links\": []}]}, {\"column\": 2, \"groups\": [{\"title\": \"Download\", \"href\": \"/download/\", \"links\": [\"Latest Blender\", \"Blender LTS\", \"Previous Versions\", \"Experimental Builds\", \"Source Code\", \"Requirements\", \"Benchmark\", \"Flamenco\"]}, {\"title\": \"Extensions\", \"href\": \"https://extensions.blender.org/\", \"links\": [\"Add-ons\", \"Themes\"]}]}, {\"column\": 3, \"groups\": [{\"title\": \"Developers\", \"href\": \"https://developer.blender.org/\", \"links\": [\"Get Started\", \"Roadmap\", \"Projects\", \"Docs\", \"Blog\", \"Forum\", \"YouTube\", \"Python API\"]}, {\"title\": \"Blender Studio\", \"href\": \"https://studio.blender.org/\", \"links\": [\"Films\", \"Training\", \"Tools & Pipeline\"]}]}, {\"column\": 4, \"groups\": [{\"title\": \"Support\", \"href\": \"/support/\", \"links\": [\"Manual\", \"Community\", \"FAQ\"]}, {\"title\": \"Get Involved\", \"href\": \"/get-involved/\", \"links\": [\"Documentation\", \"Education\"]}, {\"title\": \"News\", \"href\": \"/news/\", \"links\": [\"Press Releases\", \"User Stories\"]}, {\"title\": \"Blender Conference\", \"href\": \"https://conference.blender.org/\", \"links\": []}]}, {\"column\": 5, \"groups\": [{\"title\": \"Follow Blender\", \"href\": \"https://bsky.app/profile/blender.org\", \"links\": [\"YouTube\", \"PeerTube\", \"Bluesky\", \"Instagram\", \"Facebook\", \"LinkedIn\", \"Mastodon\", \"TikTok\", \"Bilibili\"], \"note\": \"icon-only links (fontutti icons, 20px, #737E8C, 32px pitch; 8 on row one, Bilibili wraps to row two at 1440)\"}, {\"title\": \"Support Blender\", \"href\": \"https://fund.blender.org/\", \"links\": [\"Donate (gradient button with heart)\", \"One-time Donation\"]}]}]", "Social row: 20px fontutti icons, #737E8C, 32px pitch from x 932 at y 9344", "Support Blender: Donate .btn-accent 260x40 at x 932 y 9456 (14px/32px 500, heart icon, glow 2px 2px 2px / 0.5px 4px 16px / 2px 4px 24px rgba(0,82,255) at 0.1/0.1/0.55), then \"One-time Donation\" 14px #737E8C centred under it", "Footer note (y 9656, 30px): \"Artistic freedom starts with Blender\", a heart icon, \"The Free and Open Source 3D Creation Suite\"; 14px/21.8px #737E8C centred", "No copyright line, no postal address and no phone number anywhere in the footer (verified in the HTML); legal entity is Stichting Blender Foundation (book identity), not printed here", "Back-to-top (#hop): fixed round #FAFAFA button bottom-right with 0 8px 16px rgba(0,0,0,0.1) shadow; opacity 0 at rest, appears on scroll (animation only)", "Back-to-top: a fixed 32px white circle with an up-chevron, right 24 bottom 24, shadow 0 8px 16px rgba(0,0,0,0.1). Build it; the screenshots show it." ], "phone": "y 14576-15373; columns become 2-up (194px each, 12px/17.1px text): About | Download, Developers | Support, then the social/Donate column (no rule) with icons at 32px pitch and a 164x32 Donate; note 12px centred on 2 lines (42px)" }, "dark_ground": { "secondary_button": "On art: rgba(255,255,255,0.1) fill, #FFFFFF text, radius 6px (hero Download & Test). On #292D32 the only button is the gradient Donate.", "link": "#FFFFFF with 2px underline (dark box, Ecosystem cover); footer links #737E8C, underline on hover", "muted_text_hex": "#737E8C", "heading_text_hex": "#ABB2BA", "hairline_hex": "#454C54", "logo_variant": "The site never places the logo on dark; when one is needed use the published one-colour white logo (study.logos) per the guide" }, "chrome": { "back_to_top": "#hop: position fixed, right 24px, bottom 24px, 32px white (#FAFAFA) circle (radius 50%), shadow 0 8px 16px rgba(0,0,0,0.1), up-chevron #4C4D52; hidden (opacity 0) at the top and visible once scrolled 1 screen down. It IS visible in every full-page screenshot below the fold: include it." } }, "bands": [ { "label": "Survey alert", "ground": "#D9F5FC", "content": "one centred underlined link: Join the official Blender Survey 2026! + heart", "desktop": "1440x48, 18px #10A2C6", "phone": "390x40, 14px", "anatomy": [ "Scrolls away; not sticky" ] }, { "label": "Navigation", "ground": "#FFFFFF", "content": "logo, 7 text links, gradient Donate", "desktop": "64px, container 1170, links right-aligned 14px #4C4D52", "phone": "64px: logo left, hamburger right; menu drops down as #F2F2F3 rows", "anatomy": [ "Sticky; #0099FF 6px dots on Roadmap and Jobs" ] }, { "label": "Hero", "ground": "photo-dark", "content": "H1 release name, subtitle, 2 buttons, Blender Studio credit", "desktop": "640px, content bottom-left at x 175, H1 72px 800", "phone": "640px, H1 36px, buttons stacked", "anatomy": [ "25deg rgba(0,0,0,0.66)->0 gradient from lower left", "Credit link bottom right at 50% opacity", "Ground: full-bleed film art on #292D32" ] }, { "label": "Latest News", "ground": "#F2F2F3", "content": "H2, two 16:9 news cards, one 2:1 report card", "desktop": "grid 2 x 561, gaps 16/24", "phone": "2 small cards side by side, report card full width", "anatomy": [ "Uppercase 600 kickers above 21px titles" ] }, { "label": "Blender Development", "ground": "#F2F2F3", "content": "H2 + 4 post cards with excerpts", "desktop": "4 x 272.5, thumbnails 273x153", "phone": "1 column 358 wide", "anatomy": [ "Thumbnails are text-on-image blog graphics" ] }, { "label": "Blender Studio", "ground": "#F2F2F3", "content": "H2 + 4 post cards", "desktop": "4 x 272.5, 48px above the H2", "phone": "1 column", "anatomy": [ "Same card as Development" ] }, { "label": "Free and Open Source", "ground": "#1C1C1C", "content": "teal massive title, 2 white paragraphs, heart hexes", "desktop": "1170x370, padding 48, radius 12", "phone": "full-bleed 390x808", "anatomy": [ "Title #46EBC2 72px 800", "Ground is a rounded box (radius 12px) of this color inside the #F2F2F3 page, 48px padding" ] }, { "label": "Part of the industry", "ground": "#F2F7FF", "content": "blue massive title, paragraph, 4 member logos", "desktop": "1170x402", "phone": "full-bleed, logos stacked", "anatomy": [ "Title #0066FF", "Ground is a rounded box (radius 12px) of this color inside the #F2F2F3 page, 48px padding" ] }, { "label": "It's about people.", "ground": "#F8F2FF", "content": "purple massive title, line, 4 portrait cards", "desktop": "1170x692, cards 257x342", "phone": "full-bleed, cards stacked 294x392", "anatomy": [ "Title #9300FF", "Ground is a rounded box (radius 12px) of this color inside the #F2F2F3 page, 48px padding" ] }, { "label": "The Ecosystem", "ground": "photo-dark", "content": "white massive title, 2 paragraphs, link", "desktop": "1170x480, radius 12", "phone": "full-bleed 390x614", "anatomy": [ "Text column 66%", "Ground: photo collage + #020381->#2874FC gradient at 0.6" ] }, { "label": "Everything You Need", "ground": "#F2F2F3", "content": "72px heading + 6 alternating feature rows", "desktop": "text 553 / image 664x373 bleeding to the edge, sides alternate", "phone": "stacked, even images shifted off the left edge", "anatomy": [ "\"· \" bullet lines at 24px" ] }, { "label": "Freedom download row", "ground": "#F2F2F3", "content": "The Freedom to Create. + Download Blender", "desktop": "79px, 50/50 columns meeting at the centre", "phone": "tagline right, button left under it", "anatomy": [ "Gradient button with strong 0.55 glow" ] }, { "label": "Footer", "ground": "#292D32", "content": "4 sitemap columns, social + Donate column, note line", "desktop": "453px, columns 195px, last 292px with 2px #454C54 left rule", "phone": "797px, 2-up columns, 12px text", "anatomy": [ "No copyright or address line" ] } ], "layout": { "page_margin": { "desktop": 151, "phone": 16 }, "section_padding": { "desktop": 48, "phone": 48 }, "container_max": 1170, "content_max": 1138, "box_inner_max": 1074, "hero_text_max": 800, "columns": 4, "columns_phone": 1, "gutter": 16, "gutter_phone": 16, "card_gap": 16, "card_row_gap": 24, "nav_height": 64, "radius_card": 12, "radius_button": 6, "note": "Measured on https://www.blender.org/ (2026-10-30) at 1440 and 390. Container 1170px centred (x 135) with 16px inner padding, so content runs x 151-1289 (1138px). Boxes (.is-style-box) are the full 1170 container with 48px padding (content 1074 at x 183), 48px apart vertically. Card grids use 16px column gaps and 24px row gaps (2 x 561 or 4 x 272.5). Section labels sit 48px below the previous block. Features rows pad 80px top and bottom on desktop, 48px on phone. Phone: 16px gutter; boxes and the Ecosystem cover go full-bleed (390) with 48px padding and keep radius 12. Page ground #F2F2F3 from nav to footer; html/body ground #292D32. 'Section padding 48px' = the 48px between boxes and before section labels; per-section values in Page anatomy win where they differ (Blender Development has 30px above its label, features rows 80px). Exact vertical joins at 1440: Latest News section ends at y 1980 (32px below the report card title block); Blender Development 1981-2495; Studio label y 2543; the FOSS box starts at 3053, 96px below the Studio grid end (2957): 48px section padding + 48px box margin; boxes 48px apart; the features section 5189-9154 then the Freedom row 9154-9233.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "breakpoints": { "phone_max": 899, "values": "Web Assets breakpoints: 900px (md), 980px, 1220px (lg); phone layout below 900", "prov": "published", "source": "web-assets src/styles/_media_queries.sass" } }, "type": [ { "role": "Font loading (read first)", "id": "loading", "face": "Inter", "size": { "desktop": 18, "phone": 14 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "Load Inter exactly as blender.org does: ONE @font-face for the variable file registered at font-weight: 400 only (src Inter-Variable.ttf format('truetype'), font-weight: 400, font-style: normal), and set every weight with font-variation-settings: \"wght\" N alongside font-weight N. Never register the face as 'font-weight: 100 900'. Because the face is registered at 400, Chrome adds synthetic bold on top of the 600 and 800 axis weights: headings (28px section labels 600, 32px feature titles 600, 72px titles 800) render visibly heavier than a plain Inter 600/800 at the same advance width (\"Latest News\" 28px: 168.1px wide either way). Weights below 600 (400 body, 500 buttons) get no synthesis. Verified 2026-10-30 by rendering both setups against the live page." }, { "role": "Hero H1", "id": "hero", "face": "Inter", "size": { "desktop": 72, "phone": 36 }, "line_height": 1, "tracking_px": 0, "weight": 800, "color": "#FFFFFF", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "line-height equals size (72/72, 36/36); white with 1px 1px 4px rgba(0,0,0,0.25) shadow; \"Blender 5.3 Beta\" ink width about 583px at 72px; 800 plus synthetic bold (face registered at 400)" }, { "role": "Massive title (boxes)", "id": "massive", "face": "Inter", "size": { "desktop": 72, "phone": 50.64 }, "line_height": 1.3, "tracking_px": 0, "weight": 800, "color": "#46EBC2", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "93.6px line at 72; 65.8px at 50.64 on phone; color per box; 800 plus synthetic bold (face registered at 400)" }, { "role": "Features heading", "id": "display", "face": "Inter", "size": { "desktop": 72, "phone": 28 }, "line_height": 1.556, "tracking_px": 0, "weight": 800, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "72px/112px desktop, 28px/40px phone; 800 plus synthetic bold (face registered at 400)" }, { "role": "Feature title", "id": "h1", "face": "Inter", "size": { "desktop": 32, "phone": 28 }, "line_height": 1.556, "tracking_px": 0, "weight": 600, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "32px/49.8px desktop, 28px/40px phone; weight 600 PLUS synthetic bold (face registered at 400): reads close to a 700. Never use a lighter heading." }, { "role": "Section label H2", "id": "h2", "face": "Inter", "size": { "desktop": 28, "phone": 24 }, "line_height": 1.143, "tracking_px": 0, "weight": 600, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "28px/32px desktop, 24px/28px phone; weight 600 PLUS synthetic bold (face registered at 400): reads close to a 700. Never use a lighter heading." }, { "role": "Hero subtitle", "id": "lead-hero", "face": "Inter", "size": { "desktop": 24, "phone": 21 }, "line_height": 1.167, "tracking_px": 0, "weight": 400, "color": "#FFFFFF", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "24px/28px desktop, 21px/28px phone" }, { "role": "Feature description", "id": "lead", "face": "Inter", "size": { "desktop": 24, "phone": 21 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "24px/37.3px desktop, 21px/30px phone; bullet lines same size" }, { "role": "Card title", "id": "title", "face": "Inter", "size": { "desktop": 21, "phone": 18 }, "line_height": 1.167, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "21px/24.5px desktop, 18px/20.6px phone; hover #0099FF" }, { "role": "Box paragraph", "id": "medium", "face": "Inter", "size": { "desktop": 20, "phone": 20 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "20px/31.1px desktop, 20px/28.6px phone" }, { "role": "Body / excerpt", "id": "body", "face": "Inter", "size": { "desktop": 18, "phone": 14 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "18px/28px desktop, 14px/20px phone (Web Assets base size steps 14/16/18 at <900/900/1220)" }, { "role": "Button label", "id": "button", "face": "Inter", "size": { "desktop": 18, "phone": 14 }, "line_height": 1.778, "tracking_px": 0, "weight": 500, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "18px/32px desktop, 14px/24px phone; hero secondary button is 400" }, { "role": "Alert link", "id": "alert", "face": "Inter", "size": { "desktop": 18, "phone": 14 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#10A2C6", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "underlined 2px; bold part 600" }, { "role": "Card kicker", "id": "kicker", "face": "Inter", "size": { "desktop": 14, "phone": 12 }, "line_height": 1.556, "tracking_px": 0, "weight": 600, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "UPPERCASE as typed in the content (no text-transform); 14px/21.8px desktop, 12px/17.1px phone" }, { "role": "Nav link", "id": "nav", "face": "Inter", "size": { "desktop": 14, "phone": 15 }, "line_height": 1.556, "tracking_px": 0, "weight": 400, "color": "#4C4D52", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "phone menu rows 15px" }, { "role": "Footer link / title", "id": "footer", "face": "Inter", "size": { "desktop": 14, "phone": 12 }, "line_height": 1.714, "tracking_px": 0, "weight": 400, "color": "#737E8C", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "note": "14px/24px desktop, 12px/17.1px phone; titles 600 #ABB2BA" } ], "components": { "button_accent": { "fill": "#47AAF5", "text": "#FFFFFF", "radius": 6, "padding": "4px 16px (4px 48px when px-5)", "height": 40, "text_style": "18px/32px Inter 500 (14px in nav and footer)", "shadow": "2px 4px 4px rgba(0,82,255,0.1), 1px 8px 24px rgba(0,82,255,0.1), 2px 8px 48px rgba(0,82,255,0.55) (Download Blender); nav Donate 0.3 at 2px 8px 32px", "example": "Download Blender (253x40), Donate (nav 104x32, footer 260x40)", "icon": "heart outline before Donate (fontutti i-heart)", "states": { "hover": { "measured": { "fill": "linear-gradient(350deg, #708FFF, #5AB3F6)" }, "css": { "background-image": "linear-gradient(350deg, #708FFF, #5AB3F6)" }, "prov": "observed" }, "active": { "css": { "transform": "scale(0.95)" }, "prov": "published" } }, "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "font_size": 18, "weight": 500, "face": "body", "padding_x": 16, "fill_css": "linear-gradient(350deg, #6183FF, #47AAF5)", "note": "Real fill: background-image linear-gradient(350deg, #6183FF, #47AAF5) over #EAEDF0." }, "button_on_art_primary": { "fill": "rgba(255,255,255,0.9)", "text": "#000000", "radius": 6, "padding": "4px 48px", "height": 40, "text_style": "18px/32px Inter 500 (14px/24px phone, 32 tall)", "shadow": "none", "example": "What's Coming (226x40)", "states": { "hover": { "measured": { "fill": "#FFFFFF" }, "css": { "background-color": "#FFFFFF" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "font_size": 18, "weight": 500, "face": "body", "padding_x": 48 }, "button_on_art_secondary": { "fill": "rgba(255,255,255,0.1)", "text": "#FFFFFF", "radius": 6, "padding": "4px 16px", "height": 40, "text_style": "18px/32px Inter 400", "example": "Download & Test (175x40)", "states": { "hover": { "measured": { "fill": "rgba(255,255,255,0.2)" }, "css": { "background-color": "rgba(255,255,255,0.2)" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "font_size": 18, "weight": 400, "face": "body", "padding_x": 16 }, "news_card": { "thumbnail": "radius 12px, shadow 0 8px 24px rgba(149,157,165,0.2), 16:9 (2:1 for the full-width report card), object-fit cover, 16px below", "kicker": "14px/21.8px 600 UPPERCASE #4C4D52", "title": "21px/24.5px 400 #4C4D52, padding 8px 0 16px; text-wrap: balance", "fill": "none", "states": { "hover": { "measured": { "title": "#0099FF", "image": "transform scale(1.033)" }, "prov": "observed" } }, "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "post_card": { "thumbnail": "273x153 desktop, radius 12, same shadow", "title": "21px/24.5px 400, margin-top 8px, padding 8px 0; text-wrap: balance", "excerpt": "18px/28px 400 #4C4D52 (14px/20px phone)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "portrait_card": { "thumbnail": "3:4 portrait 257x342, radius 12, same shadow", "title": "21px/24.5px 400, 2 lines; text-wrap: balance", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "massive_title_box": { "radius": 12, "padding": 48, "shadow": "0 2px 4px rgba(0,0,0,0.05)", "grounds": "#1C1C1C (title #46EBC2, body #FFFFFF), #F2F7FF (title #0066FF), #F8F2FF (title #9300FF), photo + gradient (title #FFFFFF)", "title": "72px/93.6px Inter 800", "body": "20px/31.1px 400", "gap": "48px between boxes", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "feature_row": { "layout": "flex, space-between, align centre; padding 80px 0; text 553 / image 664x373 radius 12 with no shadow; image side alternates (row-reverse on even rows) and bleeds 48px right or 96px left", "bullets": "plain text lines prefixed \"· \"", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "nav_link": { "text_style": "14px Inter 400 #4C4D52, padding 0 8px, 64px tall", "states": { "hover": { "measured": { "color": "#0099FF" }, "css": { "color": "#0099FF" }, "prov": "observed" } }, "dot": "6px #0099FF circle top 16px right 4px (is-highlight)", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, "text_link_on_dark": { "text": "#FFFFFF", "decoration": "underline 2px", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" } }, "breakpoints": { "phone_max": 899, "note": "Web Assets md breakpoint 900px: phone/stacked layout below 900. Between 900 and 1219 the hero title is 55px; otherwise desktop values apply.", "prov": "published", "source": "web-assets src/styles/_media_queries.sass" } }, "system": { "fixed": [ "The complete orange-and-blue logo, unaltered", "Inter everywhere", "Neutral slate UI: #F2F2F3, #FAFAFA, #4C4D52, #292D32", "Credited art made in Blender as the imagery", "Freedom and Free and Open Source as the message" ], "flex": "The hero art and the homepage box colors change; the frame does not. The guide sets no level for color; blender.org runs from plain grey info pages to saturated massive-title boxes on the homepage.", "traits": [ { "is": "Free", "not": "Freemium", "text": "Free for any purpose forever, with no trial or educational edition (paraphrase).", "source": "https://www.blender.org/about/license/", "prov": "inferred" }, { "is": "Community-owned", "not": "Corporate", "text": "A public project owned by its contributors, funded by donations (paraphrase).", "source": "https://www.blender.org/", "prov": "inferred" }, { "is": "Generous", "not": "Litigious", "text": "Tributes that remix the logo are tolerated; license problems start with a conversation (paraphrase).", "source": "https://www.blender.org/about/logo/", "prov": "inferred" }, { "is": "Artist-first", "not": "Self-promoting", "text": "Heroes show credited art made in Blender rather than product shots.", "source": "https://www.blender.org/ (2026-10-30)", "prov": "inferred" }, { "is": "Transparent", "not": "Opaque", "text": "Annual reports, plain funding explanations, no tracking (paraphrase).", "source": "https://www.blender.org/about/foundation/", "prov": "inferred" }, { "is": "Enthusiastic", "not": "Salesy", "text": "Exclamations and asides in feature copy, never hard-sell.", "source": "https://www.blender.org/ (2026-10-30)", "prov": "inferred" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "Build it the way blender.org is built (kit.spec.page): #D9F5FC alert line, white 64px nav with the full-colour logo left and seven 14px links plus the gradient Donate right, a 640px full-bleed credited Blender-made hero with a bottom-left white Inter 800 72px title and two 6px-radius buttons, #F2F2F3 page with 28px Inter 600 Title Case section labels and transparent cards (12px radius thumbnails, soft shadow), 12px-radius massive-title boxes, #292D32 sitemap footer. Homepage voice (plain, factual), not campaign voice", "flex": "how many card rows; which massive-title boxes (teal/dark, blue, purple, photo+gradient) and in what order; the hero art and release" }, { "format": "Deck", "level": 2, "must": "Full-color logo, Inter, slate grounds (#F2F2F3 or #292D32), credited Blender-made art as full-bleed slides", "flex": "a massive-title color per section divider" }, { "format": "Proposal page", "level": 1, "must": "#F2F2F3 ground, #FAFAFA boxes, #4C4D52 Inter text, #0099FF links, one blue accent button", "flex": "one credited render in the header" }, { "format": "Social post", "level": 3, "must": "Blender-made art, credited; logo or community badge as-is", "flex": "a massive-title color headline" }, { "format": "Video thumbnail (community)", "level": 3, "must": "Community badge unaltered in a corner, the creator's own brand more prominent", "flex": "badge color: white, black or orange" } ], "checks": [ { "name": "Logo hidden", "text": "Cover the logo. It should still read as blender.org: Inter on slate grey, rounded 12px boxes, a credited render made in Blender, freedom-first copy." }, { "name": "Swap test", "text": "Put another 3D tool's logo on it. If the art credits, the free-and-open-source message and the community voice don't feel out of place, it's generic." }, { "name": "Trademark", "text": "The logo is complete and unaltered, and nothing implies a third party is official Blender." } ], "make_it_yours": { "note": "Everything above transfers. These are Blender's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Get the world's best 3D CG technology in the hands of artists as free/open source software.", "prov": "published", "source": "https://www.blender.org/about/" }, "vision": { "text": "Everyone should be free to create 3D CG content, with free technical and creative production means and free access to markets.", "prov": "published", "source": "https://www.blender.org/about/" }, "story": { "text": "The Blender Foundation (2002) is an independent public-benefit organization in Amsterdam that runs blender.org as a public project. Its main income is the Development Fund plus one-time donations; Blender Institute employs developers and Blender Studio makes open films and training that push the software. Since 2020 it publishes annual reports on activities and finances. In January 2026 Ton Roosendaal handed the chairman and CEO roles to Francesco Siddi.", "prov": "observed", "source": "https://www.blender.org/about/foundation/", "source_note": "2026-10-30", "paraphrase": true, "also": [ "https://www.blender.org/about/", "https://www.blender.org/press/" ] }, "values": [ { "name": "Free software", "means": "Use Blender for any purpose, distribute it, study and change it, distribute changed versions (the four GPL freedoms, paraphrase).", "prov": "published", "source": "https://www.blender.org/about/license/" }, { "name": "Your work is yours", "means": "What you create with Blender is your sole property, free to use as you like (paraphrase).", "prov": "published", "source": "https://www.blender.org/about/license/" }, { "name": "Community first", "means": "Work, projects and roadmaps are managed in open channels on blender.org (paraphrase).", "prov": "published", "source": "https://www.blender.org/about/foundation/" }, { "name": "Transparency", "means": "Annual reports on activities and finances since 2020 (paraphrase).", "prov": "published", "source": "https://www.blender.org/about/foundation/" }, { "name": "Privacy", "means": "No third-party tracking or ads on blender.org; no registration or internet needed to use Blender (paraphrase).", "prov": "published", "source": "https://www.blender.org/about/website/", "also": [ "https://www.blender.org/about/license/" ] } ] }, "positioning": { "statement": { "text": "The Free and Open Source 3D Creation Suite.", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30" }, "category": { "text": "Free and open source 3D creation software (page title: 'The Free and Open Source 3D Creation Software')", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30" }, "audience": { "text": "Artists first, plus studios making animation and VFX, game artists, scientists, students and educators; individual artists and small teams get a complete pipeline (paraphrase).", "prov": "published", "source": "https://www.blender.org/about/license/", "also": [ "https://www.blender.org/about/foundation/" ] }, "problem": { "text": "Commercial 3D tools lock work behind trial or educational editions that forbid commercial use (paraphrase of the license page's contrast).", "prov": "inferred", "source": "https://www.blender.org/about/license/" }, "promise": { "text": "The freedom to create: the whole 3D pipeline, free forever, and the work belongs to you.", "prov": "inferred", "source": "https://www.blender.org/about/", "also": [ "https://www.blender.org/about/license/" ] }, "differentiators": [ { "text": "GNU GPL, owned by its contributors; nobody can take the freedom away.", "prov": "published", "source": "https://www.blender.org/about/license/" }, { "text": "Community project funded by donations and the Development Fund, not by license sales.", "prov": "published", "source": "https://www.blender.org/about/" }, { "text": "A complete pipeline in one suite: modeling, sculpting, rendering, VFX, animation and 2D in 3D.", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30" }, { "text": "Member of the industry's open-source and standards bodies; supported by AMD, Apple, Intel, NVIDIA and Qualcomm.", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30" }, { "text": "Privacy: no registration, works offline, no tracking on blender.org.", "prov": "published", "source": "https://www.blender.org/about/license/" } ], "alternatives": [ { "text": "Trial or 'educational' versions of commercial software that forbid commercial work.", "prov": "published", "source": "https://www.blender.org/about/license/" } ] }, "messaging": { "taglines": [ { "text": "The Freedom to Create", "prov": "observed", "source": "https://www.blender.org/about/", "source_note": "2026-10-30", "where": "About page hero; homepage closing line before Download Blender" }, { "text": "Artistic freedom starts with Blender", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30", "where": "Footer note on every blender.org page" }, { "text": "The Free and Open Source 3D Creation Suite", "prov": "observed", "source": "https://www.blender.org/", "source_note": "2026-10-30", "where": "Footer note on every blender.org page" }, { "text": "Free to Use. Free to Change. Free to Share. Free to Sell Your Work.", "prov": "observed", "source": "https://www.blender.org/about/license/", "source_note": "2026-10-30", "where": "License page hero subtitle" } ], "attributes": [ "free", "open", "community-owned", "artist-first" ], "key_messages": [ { "area": "License", "headline": "Free and Open Source", "body": "A public project under the GNU GPL, owned by its contributors and free for good.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "paraphrase": true }, { "area": "Industry", "headline": "Part of the industry", "body": "A member of ASWF, Khronos, Linux Foundation and OIN, supported by AMD, Apple, Intel, NVIDIA and Qualcomm.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)" }, { "area": "People", "headline": "It's about people.", "body": "Designers, developers, engineers and artists, all driven by passion, using Blender to make an impact.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "paraphrase": true } ], "boilerplate": { "text": "Blender is the free and open source 3D creation suite: a community project coordinated by the Blender Foundation, primarily funded by donations. Thousands of people have contributed to the software and millions use it daily. It is released under the GNU GPL, so anyone may use it for any purpose, including commercially, and everything made with it belongs to its creator.", "prov": "observed", "source": "https://www.blender.org/about/", "source_note": "2026-10-30", "paraphrase": true, "also": [ "https://www.blender.org/about/license/" ] }, "pillars": [ { "name": "Free and Open Source", "claim": "A public project, licensed GNU GPL and owned by its contributors, free forever.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "why": "Homepage section heading", "proof": [ "p-gpl", "p-downloads" ] }, { "name": "Part of the industry", "claim": "A member of the industry's open-standards bodies and backed by the major hardware vendors.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "why": "Homepage section heading", "proof": [ "p-memberships", "p-patrons" ] }, { "name": "It's about people", "claim": "Designers, developers, engineers and artists, all driven by passion.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "why": "Homepage section heading", "proof": [ "p-community" ] }, { "name": "The Ecosystem", "claim": "Communities, tutorial makers, add-on developers and marketplaces built around Blender.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "why": "Homepage section heading", "proof": [ "p-businesses" ] }, { "name": "Everything You Need", "claim": "Rendering, modeling, VFX, animation, 2D-in-3D and a Python-customizable interface in one suite.", "prov": "observed", "source": "https://www.blender.org/ (2026-10-30)", "why": "Homepage section heading", "proof": [ "p-features" ] } ], "proof_points": [ { "id": "p-gpl", "kind": "other", "text": "Licensed GNU GPL (v2 or later for source; binaries under v3 or later); Cycles is Apache 2.0.", "source": "https://www.blender.org/about/license/", "prov": "published" }, { "id": "p-downloads", "kind": "stat", "text": "Over 20 million downloads per year (website credits page).", "source": "https://www.blender.org/about/website/", "prov": "observed" }, { "id": "p-memberships", "kind": "other", "text": "Member of the Academy Software Foundation, Khronos Group (Associate), Linux Foundation and Open Invention Network; also ASIFA Hollywood.", "source": "https://www.blender.org/about/", "prov": "observed" }, { "id": "p-patrons", "kind": "customer", "text": "Development Fund Corporate Patrons announced in press releases include Netflix Animation Studios (Jan 2026), Wacom and Bolt Graphics (2025).", "source": "https://www.blender.org/press/", "prov": "observed" }, { "id": "p-community", "kind": "stat", "text": "Thousands of contributors; millions use it daily (about page wording, no exact count).", "source": "https://www.blender.org/about/", "prov": "observed" }, { "id": "p-businesses", "kind": "other", "text": "Blender-based businesses that thrive within the trademark policy: Superhive, CGCookie, Creative Shrimp (named by the policy).", "source": "https://www.blender.org/about/trademark-policy/", "prov": "published" }, { "id": "p-features", "kind": "other", "text": "Cycles, Blender's built-in unbiased path-tracer, with CPU and GPU rendering.", "source": "https://www.blender.org/", "prov": "observed" }, { "id": "p-since", "kind": "other", "text": "Blender Foundation founded 2002; the Blender trademark in use since 2002.", "source": "https://www.blender.org/about/trademark-policy/", "prov": "published" } ] } } } }