Website Redesign Case Study PREVIEW (not deployed)

TabbyML (tabbyml.com)

Split-Panel Terminal Hero ↓ Full-Bleed Cinematic Demo Hero

Real site · Real assets · Real code

The Redesign

Before → After

Drag the handle to compare the top of each real page.

BeforeAfter: validated redesign preview (top of page only -- see the full page below for the rest)

What Changed

At A Glance

A more disciplined type scale

Nav Typography

A real, semantic color system

Sharper structural framing

A deliberate corner language

A more focused grid

Design Transformations

Real, Measured Changes

/// 01

Headline Typography

Before

Heading style: {'fontFamily': 'Geistmono, Arial, sans-serif', 'fontWeight': '600', 'fontSize': '47.001px', 'letterSpacing': '-1.9px', 'textTransform': 'none', 'lineHeight': '56.4012px'}

After

Heading style: {'fontFamily': '"Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace', 'fontWeight': '600', 'fontSize': '44px', 'letterSpacing': '-1.7px', 'textTransform': 'none', 'lineHeight': '50.6px'}

The heading typography was initially defined by the 'Geistmono' font family, a 47.001px size, and -1.9px letter spacing with a 56.4012px line height. The new design implemented a transition to the '"Geist Mono"' family with an expanded monospace fallback stack, adjusting the font size to 44px, the letter spacing to -1.7px, and the line height to 50.6px.

/// 02

Nav Typography

Before

Nav link style: {'fontFamily': 'Geistmono, Arial, sans-serif', 'fontWeight': '500', 'fontSize': '18.8004px', 'letterSpacing': '-1px', 'textTransform': 'uppercase'}

After

Nav link style: {'fontFamily': '"Geist Mono", ui-monospace, SFMono-Regular, Consolas, monospace', 'fontWeight': '400', 'fontSize': '14px', 'letterSpacing': '0.42px', 'textTransform': 'uppercase'}

The navigation typography was initially set with Geistmono at a medium weight and larger size, employing negative letter spacing. The refined design transitions to a comprehensive monospace font stack at a regular weight and reduced size, incorporating positive letter spacing to optimize legibility and ensure consistent rendering across diverse systems.

/// 03

Color System

Before

Root color tokens: {'--text-color--text-primary': 'black', '--background-color--background-alternate': 'black', '--gold': '#ffbf7f', '--base-color-neutral--neutral-light': '#aaa', '--base-color-system--error-red-light': '#fef3f2', '--base-color-neutral--black': 'black', '--black-archive<deleted|variable-dccb7db6>': 'black', '--base-color-neutral--neutral-lighter': '#ccc', '--base-color-neutral--neutral-dark': '#444', '--border-color--border-primary': 'black', '--border-color--border-alternate': '#fff8ed', '--rich-ocre': '#472209', '--base-color-brand--white': 'white', '--base-color-brand--black': '#2d292e', '--burnt-gold': '#e68129', '--link-color--link-primary': 'black', '--base-color-system--error-red': '#b42318', '--text-color--text-success': '#027a48', '--neutral': '#e9e1d5', '--background-color--background-secondary': '#eee', '--text-color--text-secondary': 'black', '--base-color-system--success-green-light': '#ecfdf3', '--text-color--text-alternate': '#fff8ed', '--background-color--background-success': '#ecfdf3', '--base-color-neutral--white': '#fff8ed', '--text-color--text-error': '#b42318', '--base-color-neutral--neutral-darker': '#222', '--link-color--link-alternate': '#fff8ed', '--base-color-neutral--neutral-lightest': '#eee', '--base-color-neutral--neutral': '#666', '--link-color--link-secondary': '#aaa', '--background-color--background-error': '#fef3f2', '--base-color-neutral--neutral-darkest': '#111', '--storm-blue': '#a2bdd1', '--jade': '#ffb46c', '--base-color-system--success-green': '#027a48', '--neutral-light': '#fff8ed', '--border-color--border-secondary': '#aaa', '--background-color--background-primary': '#eee', '--background-color--background-tertiary': '#aaa'}

After

Root color tokens: {'--accent-brown': '#471A09', '--bg-secondary': '#E9E1D5', '--ink-on-dark': '#FFFFFF', '--accent-orange': '#E68129', '--bg-dark': '#2D292E', '--accent-green': '#98C379', '--ink': '#000000', '--bg': '#FFF8ED'}

The color system underwent a significant consolidation, transitioning from a broad inventory of granular color tokens to a more distilled and intentional palette. This transformation reduced the total number of defined colors from approximately forty specific entries to eight core values. The revised structure provides a more focused and manageable foundation for consistent visual application.

/// 04

Structural Framing

Before

Header border: False, section labels: 0

After

Header border: True, section labels: 0

The structural framing underwent a refinement in its presentation. Previously, the header displayed no distinct border. The updated design introduces a header border, providing a clear visual demarcation for the section.

/// 05

Corner Treatment

Before

Rounded corners present: True

After

Rounded corners present: False

The design evolution included a significant alteration to the corner treatment. Previously, elements featured a distinctly rounded aesthetic. This was subsequently revised to a sharp, angular finish, fundamentally changing the perceived character of the forms.

/// 06

Layout Density

Before

Column layout: multi-column counts [], grid track counts [2, 4, 3, 5]

After

Column layout: multi-column counts [], grid track counts [4, 2, 3]

The primary change in layout density involved a reduction in the underlying grid tracks. The initial configuration, featuring four distinct grid tracks [2, 4, 3, 5], was subsequently streamlined. This transition resulted in a more consolidated layout, now structured around three grid tracks [4, 2, 3].

How loomloom Did It

The Workflow

The Request

“redesign https://www.tabbyml.com/”

Discover

Understand the existing site: real structure, real assets, real constraints, no model call.

Analyze

Measure the real design system and audit it against a declared design authority's own rules.

Explore

Build real, working direction slices and structural variants: real code, never a mockup.

Select

A human picks the direction and variant that actually fits, from real rendered pages.

Implement

Turn the chosen direction into the real page: real copy, real assets, real responsive layout.

Validate

Real mechanical checks and a real axe-core accessibility scan; any failure blocks completion.

loomloom's role in this case study: writing the 6 narrative paragraphs above from real, verified facts, the only real model call in this run's Share stage. No image was generated: the hero above uses the real color tokens from the actual redesign directly, not an AI illustration of them.

Validation

It Works, Not Just Looks Right

11/11Mechanical checks passed

0Accessibility violations (real axe-core scan)

✓Responsive layout (mobile / tablet / desktop)

✓Real rendered implementation, not a mockup

Reproduce This

How This Was Actually Built

This redesign is built on real open-source work. Thanks to every project below: each is listed because real evidence of its use exists in this run.

redesign-labThe end-to-end pipeline (Discover, Analyze, Explore, Select, Implement, Validate, Share) that produced this entire redesign and case study.
senlindesign/taste-skillMeasured the original page's real design system (colors, type, spacing, layout) via screenshot and DOM extraction -- the raw input to Analyze.
leonxlnx-taste-skillSupplied the build rules, direction-variant families, and the mechanical Pre-Flight Check this redesign was built and validated against.
anthropics/skills (webapp-testing)Rendered and screenshotted every real direction, variant, and the final implementation for functional and responsive checking.
snapsynapse/skill-a11y-auditRan the real axe-core accessibility scan that found (and confirmed the fixes for) this run's Validate-stage violations.
cogfoundry-labs/loomloomGenerated the 6 narrative paragraphs in the Design Transformations section above from this run's real, verified facts.

The before and after target(s) were fetched live at 2026-08-24T23:20:27.701010+00:00 (Share time), not re-read from a saved snapshot of what Gate 2 actually showed. If a live external site changed since that approval, these facts may not exactly match what the human saw and chose.

Want To Redesign Another Site?

Try Redesign Lab