Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion .copier-answers.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# Changes here will be overwritten by Copier
_commit: dcfbd4b
_commit: 552b2de
_src_path: https://github.com/python-project-templates/base.git
add_extension: uitk-webawesome
brand_name: Example
Expand Down
38 changes: 28 additions & 10 deletions BRAND.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,42 @@
# Example Brand Guide

Canonical source for the Example identity. Replace each placeholder before publishing the first consumer.
Canonical source for the Example identity. Every section below is a
placeholder — fill it in before publishing the first consumer.

## Identity

Describe what Example is, who it serves, and what it must not be confused with.
Describe what Example is, who it serves, and what it must not be
confused with.

## Mark

Document primary mark, clear space, minimum size, and approved variants.
Document the primary mark, clear space, minimum size, and approved variants.

## Color

| Role | Light | Dark | Usage |
| ------ | --------- | --------- | ------------------ |
| Paper | `#f5f5f0` | `#151515` | Page surfaces |
| Ink | `#151515` | `#f5f5f0` | Primary content |
| Muted | `#666660` | `#aaa9a0` | Supporting content |
| Line | `#d0d0c8` | `#3a3a36` | Borders and rules |
| Accent | `#6cff8f` | `#6cff8f` | Focus and emphasis |
The shipped tokens are neutral greys plus a functional focus color. They exist
so the toolkit renders legibly out of the box, not because they are the brand.
Replace the values in `tokens.css`, then record them here.

| Token | Light | Dark | Usage |
| ----------- | ----- | ---- | ----------------- |
| `bg` | | | Page background |
| `bg-raised` | | | Raised surfaces |
| `fg` | | | Primary text |
| `fg-muted` | | | Supporting text |
| `border` | | | Borders and rules |
| `focus` | | | Focus rings |

Two rules worth keeping whatever the palette becomes:

- Name tokens for the role a color plays, not a material it imitates. Roles
survive a redesign; metaphors have to be renamed or quietly start lying.
- Give every color a job. A single decorative accent applied wherever a page
looks flat is how unrelated products end up looking identical.

Verify each foreground against the surfaces behind it — WCAG AA is 4.5:1 for
normal text, and a focus ring needs 3:1. Assert it in a test so the palette
cannot drift.

## Typography

Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
</head>
<body>
<main>
<p class="eyebrow">Brand toolkit</p>
<example-brand-mark></example-brand-mark>
<h1>Example</h1>
<p>Shared brand identity, design tokens, and reusable Lit and Web Awesome components.</p>
<example-theme-toggle data-testid="theme-toggle"></example-theme-toggle>
</main>
Expand Down
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,17 @@
"lit": "^3.3.3"
},
"devDependencies": {
"@axe-core/playwright": "^4.12.1",
"@playwright/test": "^1.60.0",
"@awesome.me/webawesome": "^3.12.0",
"lit": "^3.3.3",
"@types/node": "^26.3.0",
"@axe-core/playwright": "^4.13.0",
"@playwright/test": "^1.63.0",
"@types/node": "^26.4.1",
"jsdom": "^30.0.1",
"oxfmt": "^0.65.0",
"oxlint": "^1.80.0",
"lit": "^3.3.3",
"oxfmt": "^0.66.0",
"oxlint": "^1.81.0",
"publint": "^0.3.24",
"typescript": "^7.0.2",
"vite": "^8.2.2",
"vitest": "^4.1.11"
"vitest": "^5.0.0"
}
}
Loading
Loading