Reference

Design & Development Glossary

Plain-language definitions for the terms that come up across our work — design, development, strategy, and SEO. Written by Developh, kept short, opinionated, and dated. If you want a longer take on any of these, ask us.

Design

Design System: A shared library of reusable components, tokens, patterns, and rules that lets a team design and build product surfaces consistently. A design system is not a style guide — it ships as code (e.g. a React component library) AND as Figma libraries, kept in lockstep. Most useful when more than one designer or developer touches the product.
Design Tokens: Named values for colour, spacing, typography, radius, shadow, and motion that replace raw hex codes and pixel values across a design system. Tokens are the contract between Figma variables and CSS custom properties: change `--color-brand` once and every surface updates. The W3C Design Tokens Format Module is the emerging standard.
UX (User Experience): The end-to-end feel of using a product — discovery, signup, first task, ongoing use, support. UX is broader than UI: it covers research, information architecture, copywriting, performance, accessibility, and emotional response. Good UX is invisible; bad UX is the friction users describe in support tickets.
UI (User Interface): The pixel-level surface a user touches: buttons, forms, navigation, layout, typography, motion. UI is the visible 20% of UX. A polished UI on top of a broken UX still loses; great UX with a bland UI feels professional but forgettable. Both matter; the order matters more.
Wireframe: A low-fidelity sketch of a screen layout — boxes for content, no real copy, no visual styling. Wireframes are the fastest way to align stakeholders on structure before investing in visual design. Often skipped by senior teams who jump straight to high-fidelity Figma frames; appropriate for greenfield products with unclear scope.
Prototype: A clickable simulation of a product flow — usually built in Figma or Framer — used to test usability before development. Distinct from a wireframe (no styling) or a mockup (no interaction). The right prototype answers one question; over-built prototypes waste time fighting Figma's interaction limits.
Figma: A browser-based collaborative design tool — the de-facto standard for product UI design as of 2026. Figma's strengths: real-time multiplayer, component variants, variables (design tokens), Dev Mode for handoff. Recently expanded with Figma Make (AI-assisted code generation) and Figma Slides.
Branding: The deliberate construction of how a company is perceived — name, logo, voice, visual system, positioning. Branding is not just a logo: it's the answer to "who are you, who is this for, why should anyone care." A brand without strategy is decoration; strategy without expression is a deck.
Typography: The choice and arrangement of typefaces in a design — font selection, sizing scale, line height, tracking, hierarchy. Typography is the single highest-leverage decision in a brand identity: the right typeface signals industry, era, and seriousness before a single word is read.
Atomic Design: A methodology by Brad Frost for organising UI components into atoms (buttons, inputs), molecules (form fields), organisms (forms, headers), templates, and pages. Useful as a mental model for design system structure; over-prescriptive when applied as literal folder hierarchy. Most teams adapt it loosely.

Development

Next.js: A React framework by Vercel for production web apps and sites. Next.js handles routing, server-side rendering, static generation, image optimisation, and code splitting out of the box. As of 2026 it ships with the App Router (server components) and Turbopack as the default bundler. Our default stack at Developh.
React: A JavaScript library for building user interfaces, originally from Facebook (now Meta). React's component model — small, composable functions that return markup — became the dominant UI paradigm of the 2010s. Modern React (18+) emphasises Server Components, concurrent rendering, and Suspense for streaming data.
TypeScript: A typed superset of JavaScript by Microsoft. TypeScript adds compile-time type checking to JS, catching whole classes of bugs (typos, wrong shapes, null derefs) before runtime. Standard at Developh: every project ships with strict mode on. The runtime is plain JS; types are erased at build time.
Tailwind CSS: A utility-first CSS framework that ships predefined classes for spacing, colour, layout, and typography. Tailwind v4 (2025) introduced CSS-native theme tokens via `@theme`, eliminating the JS config file. Pairs naturally with React component libraries — write classes inline, extract to components when patterns repeat.
Convex: A reactive backend platform — database, server functions, file storage, and real-time subscriptions in one. Convex queries are typed end-to-end (TypeScript everywhere), automatically reactive (subscriptions update on data change), and run inside transactions. Replaces Postgres + Express + WebSocket plumbing for product-shaped apps.
Framer: A design and publishing tool that doubles as a no-code site builder. Framer's strength is high-fidelity motion and interactive prototypes, with the option to publish directly to a hosted URL. We frequently start in Framer for speed, then port to Next.js when a project needs custom logic or content depth.
Server-Side Rendering (SSR): Rendering HTML on the server per request, then sending it to the browser ready to display — instead of shipping JavaScript and rendering client-side. SSR wins on first paint, SEO, and social previews. Trade-off: every request hits the server. Modern frameworks (Next.js) mix SSR with static generation per route.
Headless CMS: A content management system that exposes content via API instead of rendering pages itself. Editors manage content in the CMS dashboard; developers fetch it from any frontend (Next.js, mobile app, smart TV). Examples: Sanity, Contentful, Convex (when used as content store), WordPress in headless mode.

Strategy

MVP (Minimum Viable Product): The smallest version of a product that delivers real value to real users — usable to validate whether a market exists. Not a prototype, not a beta. An MVP is the first thing you'd be willing to charge for. Misused to mean "v1"; true MVPs are uncomfortably small.
CRO (Conversion Rate Optimisation): The discipline of increasing the percentage of visitors who take a desired action (sign up, buy, book a call) through systematic testing of copy, layout, friction, and trust signals. CRO is closer to UX research than to marketing — measurable, iterative, and bounded by traffic volume.
Product-Market Fit: The state in which a product satisfies a real, painful market demand strongly enough that growth becomes self-sustaining. Coined by Marc Andreessen. PMF is not a checkbox: most signals (NPS, retention, organic word-of-mouth) only become unambiguous in retrospect.
A/B Testing: An experimental method for comparing two variants of a page, feature, or copy by randomly splitting users between them and measuring outcomes. Useful only with sufficient traffic to reach statistical significance — under ~10k weekly visitors, A/B tests usually surface noise. Below that threshold, prefer qualitative research.
User Research: The structured study of users' goals, behaviours, and frustrations through interviews, surveys, usability tests, and analytics. The cheapest mistake-avoider in product work. Five 30-minute interviews with the right users surface 80% of the issues you'd otherwise discover post-launch.

SEO & AI Search

SEO (Search Engine Optimisation): The practice of structuring a site so search engines (Google, Bing, DuckDuckGo) can crawl, index, and rank it for relevant queries. Modern SEO splits into technical (crawlability, performance, schema), on-page (titles, headings, content), and off-page (backlinks, brand mentions). Increasingly converging with AEO.
AEO (Answer Engine Optimisation): Optimising content to be cited by AI answer engines (ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews). Levers: structured data (FAQ, HowTo, DefinedTerm), clear question-answer formatting, llms.txt, original opinions and named authorship. Closer to PR-style positioning than to traditional SEO link-building.
Schema.org / Structured Data: A shared vocabulary (Schema.org) for marking up page content so search engines understand what a page IS, not just what it says. Emitted as JSON-LD `<script>` blocks. Common types: Organization, Article, FAQPage, Product, Service, BreadcrumbList. Required for most Google rich-result formats.
Open Graph: A meta-tag protocol (originally Facebook's) that tells social platforms how to render a link preview — title, description, image. Implemented as `<meta property="og:title">` tags. Most sharing surfaces (LinkedIn, Slack, WhatsApp, iMessage) read OG tags; Twitter has its own twin protocol with `twitter:` prefixes.
Core Web Vitals: Google's three metrics for real-world page experience: LCP (Largest Contentful Paint, < 2.5s), INP (Interaction to Next Paint, < 200ms), and CLS (Cumulative Layout Shift, < 0.1). Failing any of the three drags rankings. Measured per-URL in Search Console; correlates strongly with conversion.
llms.txt: A plain-text Markdown index at `/llms.txt` that tells LLM crawlers (Claude, ChatGPT, Perplexity) what's on a site and where to find it. Adopted by Anthropic, Vercel, Stripe, and Mintlify. Companion to robots.txt and sitemap.xml — but curated for AI consumption rather than search-engine indexing.
hreflang: An HTML/HTTP signal that tells search engines which version of a page to serve for a given language and region. Implemented via `<link rel="alternate" hreflang="pt-PT">` tags. Critical for bilingual sites — without hreflang, Google can index the wrong language and tank traffic in one of the two markets.