Skip to content

feat(webui): Linear-style WebUI redesign#12

Merged
rysb-dev merged 1 commit intomainfrom
ui/zed-style-redesign
Feb 4, 2026
Merged

feat(webui): Linear-style WebUI redesign#12
rysb-dev merged 1 commit intomainfrom
ui/zed-style-redesign

Conversation

@rysb-dev
Copy link
Copy Markdown
Owner

@rysb-dev rysb-dev commented Feb 4, 2026

Summary

This PR introduces a comprehensive UI redesign for the Agari web calculator, inspired by the Zed editor and OpenCode docs design language (Linear style).

Design Changes

Design System

  • Boxy, sharp-cornered design - No border-radius, all elements are rectangular
  • 1px borders for depth - Replaced shadows with subtle borders
  • Modern dark color scheme:
    • Background: #09090b#18181b (layered)
    • Accent: #3b82f6 (blue)
    • Borders: #2e2e32
  • Monospace typography for values, badges, and code elements
  • Grid-based layout with 1px gap separators between panels

Components Updated

  • Tile - Flat hover states with border color changes
  • TilePalette - Boxy suit labels with colored borders
  • ContextOptions - Segmented toggle buttons, flat checkboxes
  • ScoreResult - Bordered panels, monospace numbers
  • DoraPicker - Flat modal design
  • App layout - Header with border separator, grid panel layout

Screenshots

The new design features clean, professional aesthetics with sharp geometric forms and subtle borders providing visual structure.

Testing

  • npm run build passes successfully
  • No TypeScript errors
  • All functionality preserved

…heme

- Complete design system overhaul with CSS custom properties
- Boxy, sharp-cornered design (no border-radius)
- 1px borders for depth instead of shadows
- Modern dark color scheme (#09090b base, #3b82f6 accent)
- Monospace typography for values and code elements
- Grid-based panel layout with 1px gap separators
- Flat hover states (border color changes, no transforms)
- Updated all components: Tile, TilePalette, ContextOptions,
  ScoreResult, DoraPicker, and main App layout

Inspired by Zed editor and OpenCode docs design language.
@rysb-dev rysb-dev changed the title feat(webui): Zed-editor-style UI redesign feat(webui): Linear-style WebUI redesign Feb 4, 2026
@rysb-dev rysb-dev merged commit f16e8bd into main Feb 4, 2026
8 checks passed
@rysb-dev rysb-dev deleted the ui/zed-style-redesign branch February 4, 2026 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant