--- title: Webrenew Design Guide version: 1.0 updated: 2026-08-17 canonical: https://webrenew.com/design.md --- # Webrenew Design Guide Use this guide to make work that feels like Webrenew. It covers the public website, product surfaces, presentations, and brand graphics. Webrenew pairs precise engineering with calm, confident design. Every element must help people understand the work and act with ease. ## Quick direction - Build for a near-black canvas with white text. - Use one clear blue accent for action, focus, and progress. - Set headings in FK Grotesk and body text in Geist. - Use thin borders, visible rails, and flat grids to show structure. - Give layouts generous space. Make the content order clear. - Use rounded shapes for controls and focused product surfaces, not for every container. - Show systems, flows, interfaces, and outcomes. Avoid generic stock imagery. - Keep motion quiet, useful, and optional. If a design feels busy, decorative, or vague, remove elements until the purpose is clear. ## Brand character Webrenew is: - Precise, not clinical. - Confident, not loud. - Technical, not cryptic. - Direct, not cold. - Crafted, not ornamental. The work makes the studio process visible. The user can see how the system works. ## Logo Use the supplied Webrenew assets. Do not redraw them or change their proportions. - Full brandmark: [webrenew.com/webrenew_brandmark.svg](https://webrenew.com/webrenew_brandmark.svg) - Icon: [webrenew.com/webrenew-icon.svg](https://webrenew.com/webrenew-icon.svg) - Repository source: `public/webrenew_brandmark.svg` and `public/webrenew-icon.svg` Use the full brandmark when horizontal space permits. Use the icon for compact navigation, avatars, favicons, and square placements. Keep enough empty space around the logo to separate it from text, borders, and controls. Do not stretch, rotate, outline, crop, or add effects to the logo. Do not place a new symbol beside it. ## Color The public site uses the dark theme. Start with black, white, neutral gray, and Webrenew blue. | Role | Token | Value | Use | | --- | --- | --- | --- | | Canvas | `--ds-background-100` | `hsl(0 0% 0%)` | Page background | | Raised surface | `--ds-background-200` | `hsl(0 0% 4%)` | Cards, menus, and panels | | Primary text | `--foreground` | `#ffffff` | Headings and important text | | Strong neutral | `--ds-gray-1000` | `#ffffff` | Active text and icons | | Body neutral | `--ds-gray-900` | `hsl(0 0% 63%)` | Body copy and secondary labels | | Quiet neutral | `--ds-gray-700` | `hsl(0 0% 56%)` | Metadata and low-emphasis text | | Border | `--ds-gray-alpha-300` | `hsla(0 0% 100% / 0.15)` | Default dividers and outlines | | Hover border | `--ds-gray-alpha-400` | `hsla(0 0% 100% / 0.20)` | Interactive borders | | Brand blue | `--ds-blue-700` | `oklch(57.61% 0.2321 258.23)` | Links, focus, and primary actions | | Deep blue | `--ds-blue-800` | `oklch(51.51% 0.2307 257.85)` | Active states and large blue fields | | Error | `--ds-red-600` | `oklch(62.56% 0.2277 23.03)` | Destructive actions and errors | | Warning | `--ds-amber-600` | `oklch(75.04% 0.1737 74.49)` | Warnings and states that need attention | | Success | `--ds-green-700` | `oklch(64.58% 0.199 147.27)` | Success and complete states | Use the CSS variables from `app/globals.css` in the repository. Do not copy color values into components when a token exists. ### Color rules - Keep most surfaces black or near-black. - Use blue to guide attention, not to fill every section. - Use semantic colors only for their named state. - Prefer a thin border or small background shift over a large shadow. - Test text and controls against WCAG AA contrast requirements. - Never use color as the only status signal. Add text, an icon, or both. ## Typography ### Families | Role | Family | Available weights | Source | | --- | --- | --- | --- | | Headings and navigation | FK Grotesk | 300, 400, 500, 700 | `app/fonts/` with `next/font/local` | | Body and UI | Geist | Variable | `next/font/google` | | Code and technical data | Geist Mono | Variable | `next/font/google` | The root layout exposes these Tailwind utilities: - `font-heading` for FK Grotesk. - `font-sans` for Geist. - `font-mono` for Geist Mono. ### Type scale Use a fluid scale that creates strong contrast between display text and body text. | Role | Recommended classes | Notes | | --- | --- | --- | | Hero | `text-6xl md:text-7xl lg:text-8xl font-light leading-[1]` | Keep the line short and balanced | | Page title | `text-4xl md:text-5xl lg:text-6xl font-light` | Use one per page | | Section title | `text-4xl md:text-5xl lg:text-6xl font-light` | Give it space before the related copy | | Card title | `text-2xl font-light` or `text-base font-medium` | Match the card's visual weight | | Lead copy | `text-lg md:text-xl` | Use `--ds-gray-900` | | Body | `text-base leading-relaxed` | Keep paragraphs easy to scan | | Metadata | `text-sm` or `text-xs` | Use a quiet neutral | Use sentence case. Keep display text concise. Avoid all caps except for short interface labels. ## Layout The desktop site uses a visible frame: a centered 80vw content column between two 10vw rails. Thin borders make the frame part of the visual language. ```tsx
{children}
``` Inside the content column, use this default page gutter: ```tsx
{children}
``` ### Layout rules - Set a clear grid first. Add decorative elements after the grid is complete. - Align titles, copy, controls, and card edges to shared lines. - Let borders connect related cards into one system. - Use `gap-8` for common card grids and smaller gaps inside a component. - Use generous vertical space: `py-12 md:py-24` for standard sections. - Stack content on small screens. Do not preserve desktop rails on mobile. - Keep important copy within a readable measure. Do not stretch paragraphs across the full viewport. ## Shape and depth Webrenew uses two shape modes. ### Structural mode Use square corners for page frames, data grids, lists, pricing tables, and content sections. Shared borders make separate items feel like one system. ### Product mode Use `rounded-lg`, `rounded-xl`, or `rounded-2xl` for focused cards, previews, menus, and tool workspaces. Use `rounded-full` for buttons, tabs, status chips, and compact controls. Do not place every section inside a raised rounded card. Keep the page frame and content grid visible. Use shadows only when one surface must appear above another. For most hierarchy, use background contrast and borders. ## Components ### Primary action Use a blue-tinted pill with a thin blue border. Keep the label short. An arrow can appear as the control gains focus or hover. ```tsx Start a project ``` Use `components/ui/primary-button.tsx` in this repository. Do not build a second version of this pattern. ### Secondary action Use a transparent pill with a neutral border. Raise the text contrast on focus and hover. Do not give a secondary action the same weight as the primary action. ### Cards - Use `--ds-background-200` for a raised surface. - Use `--ds-gray-alpha-300` for the default border. - Change the border or background on focus and hover. - Keep the hover scale at `1.01` for large cards. - Put one main idea in each card. - Keep the complete card clickable when it leads to one destination. ### Forms - Place labels above fields. - Keep labels visible after the user enters a value. - Use clear help text before an error occurs. - Put error text next to the field that caused the error. - Show a visible keyboard focus state. - Use one primary submit action per form. ### Navigation Use FK Grotesk at medium weight. Default links can use reduced opacity. Focus and hover states must reach full contrast. Keep mobile navigation direct and easy to close. ## Imagery and illustration Show the systems that Webrenew designs and builds. Preferred subjects include: - Product interfaces and real project screens. - Connected nodes, workflows, and data movement. - Architecture diagrams and structured technical scenes. - Abstract depth, light, and grids that support the content. - Before-and-after states that make an outcome clear. Use local SVG or React illustrations when practical. Keep lines thin, geometry clean, and colors tied to the design tokens. Avoid generic office photos, handshake images, random 3D objects, glossy blobs, fake dashboards, and decorative gradients without a content role. Do not create a new Webrenew logo with an image model. Use the supplied brand assets. ## Motion Motion explains state, direction, or progress. - Use about `200ms` for color and small state changes. - Use `300ms` to `500ms` for control movement and reveals. - Use up to `650ms` for deliberate card or scene transitions. - Keep hover scale small: `1.01` for cards and at most `1.05` for compact actions. - Run complex illustration sequences once, then hold the resolved state. - Stop nonessential motion when the user requests reduced motion. - Do not use timer-driven React state for decorative motion. Prefer CSS keyframes or an event-driven motion API. Continuous motion is acceptable only for quiet ambience. It must not compete with the main action or make text harder to read. ## Voice and copy Lead with the outcome that the user gets. Use the technical detail as proof. Write in plain English: - Use short sentences. - Use active voice. - Put one main idea in each sentence. - Name the action that the user can take. - Replace broad claims with specific evidence. - Explain technical terms when the audience might not know them. - Use “AI-powered” only when AI is material to how the feature works. Good: “Ship production-ready work every week.” Avoid: “We build better digital products.” Button labels must describe the next step. Use “View projects,” “Start a project,” or “Download files.” Avoid “Submit” when a precise action fits. ## Accessibility Accessibility is part of the design, not a final review step. - Start with semantic HTML. Add ARIA attributes only when HTML does not give the required context. - Keep all controls available by keyboard. - Show a visible `:focus-visible` state. - Add useful alternative text to informative images. - Hide decorative images from assistive technology. - Keep WCAG AA text contrast. - Use labels and text with icons and color states. - Keep touch targets at least 44 by 44 CSS pixels when space permits. - Respect `prefers-reduced-motion`. - Test at 200 percent zoom and common mobile widths. ## Repository implementation Use the current system first. Add a new primitive only when the current system cannot meet the requirement. - Global tokens and motion: `app/globals.css` - Font setup: `app/layout.tsx` - Brand assets: `public/webrenew_brandmark.svg` and `public/webrenew-icon.svg` - Brand asset imports: `lib/brand-assets.ts` - Public page frame: `components/site-chrome.tsx` - Primary action: `components/ui/primary-button.tsx` - Base components: `components/ui/` - Home page patterns: `components/new-homepage/` - Design Studio export system: `lib/design-studio/` The site uses Tailwind CSS v4 and an ancestor-scoped dark variant. The root layout applies the `dark` class to ``. Keep components reusable. Keep source files below 500 lines. Keep function complexity and depth within the repository lint limits. ## Review checklist Before release, confirm each item: - The work uses the supplied logo without changes. - The dark palette and Webrenew blue guide the hierarchy. - Headings use FK Grotesk. Body text uses Geist. - The layout has a clear grid and shared alignment lines. - Borders and space create hierarchy before shadows do. - Use rounded shapes only for controls and focused product surfaces. - Copy starts with a clear user outcome. - Focus, hover, active, disabled, error, and progress states are present. - The design works with a keyboard, reduced motion, 200 percent zoom, and mobile screens. - The implementation reuses repository tokens and components. - `pnpm lint`, `pnpm test`, and `pnpm build` pass. When a new pattern conflicts with this guide, first check whether the product has a new requirement. If it does, update the system and this file in the same change.