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