# 01 — Design Research: What Apple, Google, OpenAI, Anthropic & Microsoft Actually Teach **Research date:** 21 October 2026 **Purpose:** Extract transferable principles for a developer portfolio — not to copy any brand's skin. **Method:** Primary design guidelines and research publications were read directly (Apple HIG, Google Design, OpenAI Brand, Anthropic design tokens, Microsoft HAX). Secondary 2026 critiques were used to understand the "AI-generated" failure mode. --- ## 1. Apple — Human Interface Guidelines Source: (accessed Oct 2026) Related: Apple's eight principles are unusually useful because they are about **intent**, not decoration: | Principle | Apple's words | What it means for a portfolio | |---|---|---| | Purpose | "Make something meaningful." | Every section must answer a visitor question. Delete anything that only decorates. | | Agency | "Let people do things their own way." | No forced scroll-jacking, no modals for basic content, no hidden navigation. | | Responsibility | "Act in people's best interest." | Honest project status, no fake metrics, no fake testimonials, transparent AI use. | | Familiarity | "Build on what people know." | Standard links, visible focus states, predictable back/forward behaviour. | | Flexibility | "Adapt to diverse contexts and needs." | Mobile-first, light/dark, reduced motion, keyboard and screen-reader support. | | Simplicity | "Be clear and direct." | One idea per section. Short labels. No ornamental complexity. | | Craft | "Care about every detail." | Baseline grid, consistent spacing, correct punctuation, real alt text, no broken images. | | Delight | "Make it human." | One or two memorable moments — typography, a small interaction, a great sentence — not confetti everywhere. | ### Apple on AI specifically From the **Generative AI** HIG page: - "Design your experience responsibly." - "Keep people in control." - "Clearly identify when and where you use AI." - "Never trick someone into thinking they're interacting with or viewing content authored by a human if they're actually interacting with AI." - "Set clear expectations about what your AI-powered feature can and can't do." - Provide a **non-AI fallback** where possible. **Adoption for this site:** the portfolio is human-authored. Where AI is part of a project, the project page says so explicitly (model used, local vs cloud, limitations). No "AI-powered" badge used as decoration. ### On Liquid Glass (iOS 26) Apple's current material language uses translucency and depth. It is impressive on device, but it is also the most copied look of 2025–26. **Decision: adopt the principle (depth, layering, deference to content), not the material.** No glassmorphism cards on the portfolio. --- ## 2. Google — Material 3 Expressive research Source: This is the most evidence-heavy design research of the group: - **46 separate research studies**, **hundreds of designs**, **18,000+ participants** worldwide. - Expressive design is built from **color, shape, size, motion, and containment**. - Well-applied expressive design was preferred across all ages, with preference **up to 87% among 18–24-year-olds**. - The goal is not decoration: expressiveness is used to **draw attention to what matters** and **group like elements**. - Google explicitly exceeded accessibility standards for tap targets and contrast rather than merely meeting them. - Research methods included eye tracking, surveys, focus groups and usability testing. Key quote: *"Expressive design makes you feel something. It inspires emotion, communicates function, and helps users achieve their goals."* **Adoption for this site:** personality is allowed, but it must carry hierarchy. Typography and the accent colour are the expressive layer; layout remains calm. Every expressive choice must pass the question: *does this help someone understand the work faster?* Caveat: M3 Expressive's bold colour/shape language is designed for **apps**, where repeated use builds familiarity. A portfolio is a one-visit experience; too much expression becomes noise. We use it at low volume. --- ## 3. OpenAI — Brand guidelines Source: OpenAI's public brand guidance is short and revealing: - The wordmark is built from **OpenAI Sans**; the "O" is a **perfect circle**. - The Blossom combines **circles (humanity, warmth)** with **right angles (technology, precision)**. - Guidance repeatedly says: **lots of open space**, no effects, no textures, no added colours, do not place over busy imagery. - Typography is described as balancing "technological precision and humanistic warmth." **Adoption for this site:** restraint reads as confidence. Large type, generous margins, a near-monochrome palette, and one accent. No gradients on text, no glow, no logo effects. "Open space" is a design material, not wasted space. --- ## 4. Anthropic — Editorial warmth Sources (third-party token documentation, updated 6 Oct 2026): , Anthropic's interface is the strongest counter-example to "AI = dark mode + purple gradient": - Primary ink: **`#141413`** (warm near-black, not `#000`). - Background: **`#FAF9F5`** (warm paper, not pure white). - Typeface: **Anthropic Sans**, used editorially at large sizes. - Spacing built on a **2px** increment system. - Character: warm parchment, publication-like, high typographic contrast, minimal ornament. **Adoption for this site:** warm paper + warm ink is the base. A serif display face supplies humanity; a grotesque supplies engineering credibility; a mono face supplies metadata. This directly breaks the "Inter on #0A0A0A" default. --- ## 5. Microsoft — Guidelines for Human-AI Interaction (HAX) Source: Origin: 2019 CHI paper, synthesized from 20+ years of research; 18 evidence-based guidelines. The 18 guidelines are organised across four moments: 1. **Initially** — make clear what the system can do; make clear how well it can do it. 2. **During interaction** — time services to context; show relevant information; support efficient invocation; support efficient dismissal; support efficient correction; scope services when in doubt; make clear why the system did what it did. 3. **When wrong** — support efficient recovery; make clear how well the system can do what it does; encourage granular feedback. 4. **Over time** — convey consequences; provide global controls; notify users about changes. **Adoption for this site:** project pages for AI products include a "Limits & behaviour" block: what the model can do, known failure modes, data/privacy posture, and whether a human fallback exists. This is a credibility signal almost no portfolio has. --- ## 6. Nielsen Norman Group — State of UX 2026 Source: (16 Jan 2026) Key findings relevant to this redesign: - AI moved **"from hype to fatigue."** Visitors are tired of AI theatre. - **"UI is still important, but it'll gradually become less of a differentiator."** - Trust in AI experiences depends on **transparency, control, consistency, and support when the system fails.** - The recommended response is to **"design deeper to differentiate"** — research, problem framing, and craft over surface styling. **Adoption for this site:** the redesign competes on **depth of case studies** and **specificity of writing**, not on another animated hero. The visual layer supports the evidence; it is not the evidence. --- ## 7. Cross-company synthesis — 10 rules we will follow 1. **Content before chrome.** Every page answers a real question; decoration is optional. 2. **One accent, warm neutrals.** Paper/ink base; vermilion accent used for links, focus and one CTA per page. 3. **Typography carries the brand.** Serif display + grotesque body + mono metadata. No Inter-default. 4. **Space is a feature.** Wide margins, clear line length (60–75 characters), visible grid. 5. **Flat, not glassy.** 1px rules, square corners, no blur cards, no glow. 6. **Motion explains, never performs.** 120–320ms transitions; no particles, parallax or custom cursors. 7. **Honesty is the aesthetic.** Real status, real dates, real limitations, real build links. 8. **Accessibility is baseline craft.** Contrast, focus rings, keyboard paths, reduced motion, semantic HTML. 9. **Human details beat genericity.** Specific place names, dates, failures, decisions, hand-written copy. 10. **Depth over breadth in the showcase.** 4–6 deep case studies + a complete archive beats 26 shallow cards. --- ## 8. What we deliberately rejected | Trend | Why rejected | |---|---| | Glassmorphism / liquid glass cards | 2025–26's most saturated look; reduces text contrast; reads as template. | | Purple-blue gradients | The canonical AI-generated signal. | | Particle/dot canvas hero | Decorative CPU cost; distracts from work; impossible to justify. | | Custom cursor + magnetic buttons | Novelty that breaks touch/keyboard and dates instantly. | | Bento grid of stats | Every AI portfolio since 2024; content becomes filler. | | Scroll-jacked reveals for every element | Friction; bad on mobile; accessibility risk. | | Fake testimonials / client logos | Destroys trust the moment it is questioned. | | "Hi, I'm X" + waving emoji | Zero information; identical to millions of pages. | --- ## Seedha matlab (short version) Badi companies ka common pattern ek hi hai: **kam cheezein, par bahut precisely**. Apple kehta hai purpose aur craft; Google kehta hai emotion ko hierarchy ke liye use karo; OpenAI kehta hai open space; Anthropic dikhata hai warm paper + editorial type; Microsoft kehta hai AI ki limits transparent rakho; NN/g kehta hai UI ab differentiator nahi, depth hai. Isliye redesign **paper-and-ink editorial archive** hoga — glass, gradient aur particles nahi.