Skip to content

docs: align button spec with the shipped styles #1058

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spashii merged 1 commit into from
Sep 11, 2026
Merged

docs: align button spec with the shipped styles #1058

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions echo/brand/STYLE_GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
16 changes: 8 additions & 8 deletions echo/docs/style-guides/frontend_button_design_system.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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
Loading