# twks — Design Reference Schema: Design Details DESIGN.md v3.2 Source: https://twks.ch/en Captured: 2026-10-07 CSS measured: 2026-10-07T06:13:57.583Z at 1440×1000 — https://twks.ch/en Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot. Status: AI analysed; curator review pending Rubric: 3.2 Observer: google/gemini-3.1-pro-preview Judge: anthropic/claude-sonnet-5 ## Design direction The website blends a minimal, high-contrast Swiss graphic design aesthetic with playful, interactive 3D elements and ASCII animations. Large, stark typography and expansive whitespace provide a clean canvas for bold project imagery and unexpected motion design. ## Classification - Industry: creative - Site type: Blog, Portfolio - Business model: AI, Portfolio, Agency - Styles: minimal, bold, typographic, playful, photographic, high-contrast, 3d-interactive - Platform: Custom code - Technology: Not identified ## Typography - Display: GT Standard — weight 400; size 20px; line-height 24px; tracking 0.2px; lowercase (80% role confidence, computed values) - Heading: GT Standard — weight 600; size 52.8px; line-height 52.8px; tracking -0.5px; Regular (95% role confidence, computed values) - Body: GT Standard — weight 400; size 20px; line-height 24px; tracking 0.2px; Regular (90% role confidence, computed values) ## Functional palette - Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: #000000 is used for the primary typography on the white canvas. (95% role confidence, computed values) - Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: #FFFFFF is the primary background color for the main content areas. (90% role confidence, computed values) - Muted Text — muted text #8C8C8C: color-4: computed rgb(140, 140, 140); AI role: #8C8C8C is used for secondary information like project descriptions (e.g., 'Making space for mental health'). (85% role confidence, computed values) ## Exact computed CSS inventory The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory. ### Font configurations ```json [ { "id": "font-1", "family": "GT Standard", "fontStack": "\"GT Standard\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "weight": "400", "size": "20px", "lineHeight": "24px", "letterSpacing": "0.2px", "traits": "Regular", "count": 59, "contexts": [ { "tag": "span", "text": "s", "top": 488, "property": "font" }, { "tag": "span", "text": "w", "top": 488, "property": "font" }, { "tag": "span", "text": "i", "top": 488, "property": "font" } ] }, { "id": "font-2", "family": "GT Standard", "fontStack": "\"GT Standard\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "weight": "600", "size": "52.8px", "lineHeight": "52.8px", "letterSpacing": "-0.5px", "traits": "Regular", "count": 2, "contexts": [ { "tag": "h1", "text": "Creative communications agency in Geneva", "top": 1089, "property": "font" }, { "tag": "p", "text": "Independent creative agency based in Geneva since 2011. We partner with local and international bran", "top": 1090, "property": "font" } ] }, { "id": "font-3", "family": "GT Standard", "fontStack": "\"GT Standard\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "weight": "400", "size": "16px", "lineHeight": "19.2px", "letterSpacing": "0.2px", "traits": "Regular", "count": 1, "contexts": [ { "tag": "p", "text": "What we do", "top": 1471, "property": "font" } ] }, { "id": "font-4", "family": "GT Standard", "fontStack": "\"GT Standard\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"", "weight": "400", "size": "20px", "lineHeight": "24px", "letterSpacing": "0.2px", "traits": "lowercase", "count": 44, "contexts": [ { "tag": "span", "text": "t", "top": 488, "property": "font" }, { "tag": "span", "text": "w", "top": 488, "property": "font" }, { "tag": "span", "text": "k", "top": 488, "property": "font" } ] } ] ``` ### Color configurations ```json [ { "id": "color-1", "hex": "#000000", "alpha": 1, "cssValue": "rgb(0, 0, 0)", "count": 28, "contexts": [ { "tag": "body", "text": "twks Projects Agency Services Branding Campaign Digital Insights swiss creative agency Contact Proje", "top": 0, "property": "background" }, { "tag": "section", "text": "swiss creative agency", "top": 0, "property": "background" }, { "tag": "h1", "text": "Creative communications agency in Geneva", "top": 1089, "property": "text" } ] }, { "id": "color-2", "hex": "#FFFFFF", "alpha": 1, "cssValue": "rgb(255, 255, 255)", "count": 84, "contexts": [ { "tag": "span", "text": "t", "top": 488, "property": "text" }, { "tag": "span", "text": "", "top": 511, "property": "::after-background" }, { "tag": "a", "text": "Branding", "top": 486, "property": "text" } ] }, { "id": "color-3", "hex": "#000000", "alpha": 0.30196078431372547, "cssValue": "oklab(0 0 0 / 0.3)", "count": 1, "contexts": [ { "tag": "div", "text": "", "top": 0, "property": "background" } ] }, { "id": "color-4", "hex": "#8C8C8C", "alpha": 1, "cssValue": "rgb(140, 140, 140)", "count": 14, "contexts": [ { "tag": "a", "text": "All projects → →", "top": 2001, "property": "text" }, { "tag": "span", "text": "→", "top": 2001, "property": "text" }, { "tag": "div", "text": "Making space for mental health", "top": 2544, "property": "text" } ] } ] ``` ### Extraction limits - Font families are computed CSS declarations, not optical font identification. - Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled. - Transparent colors are recorded with alpha but excluded from opaque palette role assignments. - Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded. ## Type, spacing, and shape language - Spacing rhythm: Loose and expansive, with significant vertical whitespace between sections and horizontal spacing in the staggered grid. - Corner style: Sharp and geometric; all images and layout containers have 0px border radii. - Radius: 0px - Borders: Minimalist; primarily relies on whitespace for separation, with occasional use of 1px solid hairline dividers (e.g., above footer links). - Buttons: Non-existent as contained blocks; actions are represented solely by typographic text links, often accompanied by arrows. - Content width: Fluid and wide, with text blocks indented but imagery often stretching near the edges of the viewport or spanning half widths. - Density: Low density; the design prioritizes large imagery and large text with ample breathing room, creating a very uncluttered layout. - Evidence: Visual inspection of the crops shows sharp corners on project images, large gaps between the 'Case studies' heading and the images, and text links used for navigation instead of buttons. ## Sections Gallery section count: 5. Each entry corresponds to one gallery capture. 1. **Hero — twks Hero** (Home) Opening hero composition from Home, organized around “twks Hero”. Capture: 1440×1000px; page bounds 0–1000px of 6047px; source section ID: `118bd3b6-2116-4d78-b994-e87d3843ac4e`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5e7a8902b308d05c1a27bf6183b9220841072a0200c4bf7fd2ade57df853fa27/section_crop-118bd3b6-2026-10-07T06-14-05-580Z.webp SECTION.md v3.2: `118bd3b6-2116-4d78-b994-e87d3843ac4e` (deterministic evidence; editorial review pending) 2. **Features — Case studies** (Home) Reusable feature composition from Home, organized around “Case studies”. Capture: 1440×2135px; page bounds 2001–4136px of 6047px; source section ID: `d7c45ff9-5f1f-4672-a884-71189b3ec0ca`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/2f71f074ec4a6c22c0067bc4496019bf5ac7b2c04f4b4988d08e8aac2491bfc8/section_crop-d7c45ff9-2026-10-07T06-14-07-496Z.webp SECTION.md v3.2: `d7c45ff9-5f1f-4672-a884-71189b3ec0ca` (deterministic evidence; editorial review pending) 3. **Other — Independent Agency Overview** (Home) AI-proposed category: agency-overview AI suggestion (91% confidence): A complete agency-positioning section with a bold mission statement, supporting “What we do” copy, and clear Agency/Career links, all contained within a distinct white layout before the case studies begin. Capture: 1440×888px; page bounds 1008–1896px of 6047px; source section ID: `2e6c0f2b-32b4-4d78-98ba-f4160c5e2412`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f780fab81b3f084a02b98850501c97d5fdfeafb90f627d3cda0ae1dcf4030851/2e6c0f2b-32b4-4d78-98ba-f4160c5e2412.webp SECTION.md v3.2: `2e6c0f2b-32b4-4d78-98ba-f4160c5e2412` (deterministic evidence; editorial review pending) 4. **Editorial — Latest publications article grid** (Home) AI suggestion (97% confidence): Complete editorial module with its heading, article-link CTA, four image-led publication cards, and clear whitespace separating it from adjacent content. Capture: 1440×594px; page bounds 4325–4919px of 6047px; source section ID: `8531c0fa-e91a-4b4b-affc-9b6688109c52`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/3bfda8790896aff93f5e15485493513ac1deab6ed672c02f72bdfe11d6b6cb6e/8531c0fa-e91a-4b4b-affc-9b6688109c52.webp SECTION.md v3.2: `8531c0fa-e91a-4b4b-affc-9b6688109c52` (deterministic evidence; editorial review pending) 5. **Footer — Contact and ASCII Wolf Footer** (Home) AI suggestion (98% confidence): Complete, distinctive dark footer combining project inquiry and contact details, social links, language controls, address, newsletter signup, copyright, and a large ASCII-art wolf illustration. Capture: 1440×847px; page bounds 5200–6047px of 6047px; source section ID: `e939dca7-9bfb-47ca-8e2a-dcf2d83e1cfe`; image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/8c30e225a27699d00b1fc93d8455384e63c30fe900f35deb1f819ed9a45a8345/e939dca7-9bfb-47ca-8e2a-dcf2d83e1cfe.webp SECTION.md v3.2: `e939dca7-9bfb-47ca-8e2a-dcf2d83e1cfe` (deterministic evidence; editorial review pending) ## Capture and motion evidence - Desktop screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/1dcab19f6fdeaa6bafe3b2f1fc0ef38c07c5bd6c5bfb2e6cbf0563dd7f791ba8/desktop_full-7a830938-2026-10-07T06-13-57-591Z.webp - Mobile screenshot: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/830fa8ea492020706defe9a22fe6fcacc5616b3117f96c13e7ade5293af58fa3/mobile_full-7a830938-2026-10-07T06-14-27-972Z.webp - Open Graph image: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/f0dc49987f1dd8baa7a35ce9f0e68d797bdb40d82c497004658f2dac5f9ccab6/og_image-7a830938-2026-10-07T06-14-04-620Z.webp - Full-page video: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/028047b74152a8da9c3a0d0dbc97c11fd58ef4ccf4224cb5598151fac142bf80/motion-1791353822285.mp4 - Video poster: https://pub-4ea77d2e205a435d8873fdff4115da85.r2.dev/library/5a096c21c69137b819e5334cc2a0aa60a0e8813f3766c2315cabe6e093957ed8/motion-poster-1791353822285.webp - Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone. ## Implementation contract - Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence. - Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments. - Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps. - Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured. ## Reusable components - Navigation Bar - Hero With Background Imagery - Feature Card - Text Link - Footer - Staggered Image Grid - Ascii Animation Block - Minimal Hairline Dividers ## Quality rubric Overall: 65.85/100 (Good) Evidence coverage: 100% Judge tier: Good Verdict: A confidently restrained Swiss-minimal agency site whose monochrome type/color discipline and two bespoke motion set-pieces — the 3D inflatable hero and the particle-built footer panther — give it real personality, but whose mid-page body relies on conventional portfolio-card conventions that keep the overall system short of landmark coherence. - Typography (15%): 62 — A single, consistently applied grotesque (GT Standard) carries the whole hierarchy, with a clear jump from a 52.8px/600 heading to 20px/400 body and a lowercase treatment reserved for nav/logo text. This is competent, legible Swiss-style type discipline, but variety is thin — there is no secondary voice, italic, or scale event beyond the hero statement to create typographic surprise elsewhere on the page. - Color (10%): 63 — The computed palette is strictly black, white, and one mid-gray, with all color interest deliberately delegated to the vivid case-study/project photography. This is a disciplined, purposeful restraint typical of Swiss-minimal branding sites and is executed cleanly, but it is a familiar strategy rather than a distinctive one. - Layout (20%): 64 — Generous whitespace, hairline dividers, a staggered two-up case-study grid, and indented text columns against full-bleed imagery form a coherent, repeatable grid logic that threads through hero, about, case studies, publications, and footer. However, the repeated 'heading + All [x] →' pairing and uniform card format across case studies and publications make the system feel templated rather than purpose-built per section. - Motion (20%): 73 — Two bespoke, non-generic motion pieces anchor the page: a continuously rotating 3D inflatable hero object that reportedly reconfigures into floating video thumbnails, and a particle/point-cloud panther that animates in the footer. These are custom-built set-pieces rather than standard scroll-reveals, which is a genuine strength, though the hero's transformation trigger is not clearly legible in the observed recording. - Originality (25%): 67 — The inflatable 3D poster-object and the particle-rendered panther are genuinely hard-to-substitute ideas that give the site a distinct personality. But these two moments bookend a mid-page body (case-study grid, publication cards, footer columns) that follows very conventional Swiss-agency-portfolio conventions, so originality is concentrated rather than systemic. - Content (10%): 61 — Case studies and publications are presented with a simple, legible image+title+one-line-subtitle pattern that fits the type system, and the footer organizes contact, social, and address content cleanly into columns. The content supports the agency's diverse client work well, but the presentational pattern itself is repeated verbatim across different content types without added depth (tags, year, scope). Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage. Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly. ## Verification checklist - [x] Score evidence - [x] Design tokens - [ ] Functional palette - [x] Normalized sections - [x] Reusable components - [ ] Typography roles ## Curator notes A real street poster shot in a shadowy park grounds the agency in actual city life before bold black headline type takes over on white. Case studies are shown as a loose two-column grid of posters, packaging and signage in clashing yellow, pink and orange, letting the varied client work itself demonstrate range rather than describing it. ## Usage guidance Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.