From 845d44c462a1c3ef5ce0f8c326f28751305a5d80 Mon Sep 17 00:00:00 2001 From: Jorim Theuns Date: Thu, 10 Sep 2026 12:34:00 +0200 Subject: [PATCH] docs: align button spec with the shipped styles The brand style guide described a button system the frontend stopped matching. It called the primary button "rounded corners" when the theme ships it fully pill-shaped, and specified a Parchment disabled state at 50% opacity when the code uses a gray fill at full opacity with Golden Pollen and Cotton Candy borders on hover and click. Also repoints the stale relative links in the button design system doc, which broke when that file moved out of frontend/docs. Every link in it now resolves. Co-Authored-By: Claude Opus 5 --- echo/brand/STYLE_GUIDE.md | 13 +++++++++---- .../frontend_button_design_system.md | 16 ++++++++-------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/echo/brand/STYLE_GUIDE.md b/echo/brand/STYLE_GUIDE.md index ab95f257e..656a23a4f 100644 --- a/echo/brand/STYLE_GUIDE.md +++ b/echo/brand/STYLE_GUIDE.md @@ -162,27 +162,32 @@ Keep it simple. One or two font weights max. Let whitespace do the work. ## Buttons +Only the primary button is pill-shaped. That shape is what marks the primary action on a screen, so secondary and tertiary keep standard corners. + ### Primary -- Default: Royal Blue background, white text, rounded corners +- Default: Royal Blue background, white text, pill shape (fully rounded) - Hover: Graphite background - Click: Graphite background +- Loading: Graphite background, white spinner ### Secondary -- Default: Transparent with Royal Blue border, Royal Blue text +- Default: Transparent with Royal Blue border, Royal Blue text, standard corners - Hover: 10% Royal Blue opacity fill - Click: 20% Royal Blue opacity fill ### Tertiary -- Default: Text only, Royal Blue, no border +- Default: Text only, Royal Blue, no border, standard corners - Hover: 10% Royal Blue opacity background - Click: 20% Royal Blue opacity background ### Disabled -- Parchment background (darker), Graphite text at 50% opacity +- Default: Gray background, Graphite text at full opacity. Disabled labels stay readable, never dimmed +- Hover: 1px Golden Pollen border +- Click: 1px Cotton Candy border ### Copy patterns diff --git a/echo/docs/style-guides/frontend_button_design_system.md b/echo/docs/style-guides/frontend_button_design_system.md index 18d3559b6..c92fa2176 100644 --- a/echo/docs/style-guides/frontend_button_design_system.md +++ b/echo/docs/style-guides/frontend_button_design_system.md @@ -71,7 +71,7 @@ This document describes the button design system implemented in the ECHO fronten ## Brand Colors -All brand colors are defined in [`src/colors.ts`](../src/colors.ts) as the single source of truth. +All brand colors are defined in [`frontend/src/colors.ts`](../../frontend/src/colors.ts) as the single source of truth. ### Available Colors @@ -116,10 +116,10 @@ import { baseColors } from "@/colors"; ### File Structure -- **[`src/colors.ts`](../src/colors.ts)**: Single source of truth for all brand colors -- **[`src/theme.tsx`](../src/theme.tsx)**: Mantine theme configuration with button defaults -- **[`src/styles/button.module.css`](../src/styles/button.module.css)**: Custom button variant styles -- **[`tailwind.config.js`](../../tailwind.config.js)**: Tailwind configuration with brand colors +- **[`frontend/src/colors.ts`](../../frontend/src/colors.ts)**: Single source of truth for all brand colors +- **[`frontend/src/theme.tsx`](../../frontend/src/theme.tsx)**: Mantine theme configuration with button defaults +- **[`frontend/src/styles/button.module.css`](../../frontend/src/styles/button.module.css)**: Custom button variant styles +- **[`frontend/tailwind.config.js`](../../frontend/tailwind.config.js)**: Tailwind configuration with brand colors ### How It Works @@ -192,6 +192,6 @@ Test button states in development: ## Questions? For questions about the design system, refer to: -- [Frontend Style Guides](../../docs/style-guides/) -- [AGENTS.md](../AGENTS.md) for general frontend patterns -- [COPY_GUIDE.md](../COPY_GUIDE.md) for button text guidelines +- [Frontend style guides](./) for the other frontend conventions +- [frontend/AGENTS.md](../../frontend/AGENTS.md) for general frontend patterns +- [brand/STYLE_GUIDE.md](../../brand/STYLE_GUIDE.md) for button text guidelines