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
5 changes: 5 additions & 0 deletions .changeset/project-not-product.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@variablelab/brand": minor
---

Rename the term Product to Project. The Project brand chapter moves from `skills/vlab-brand/product-brand.md` to `skills/vlab-brand/project-brand.md`, and the template for a Project's `brand/` folder moves from `templates/product/brand/` to `templates/project/brand/`.
2 changes: 1 addition & 1 deletion .gitattributes
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
tokens/tokens.css linguist-generated=true
tokens/theme.css linguist-generated=true
.github/readme/*.svg linguist-generated=true
templates/product/brand/sign-readme.svg linguist-generated=true
templates/project/brand/sign-readme.svg linguist-generated=true
8 changes: 4 additions & 4 deletions AGENTS.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ Variable Lab's brand guideline, design tokens and shared assets, the package `@v

- `skills/vlab-brand/`: the guideline, as an Agent Skill. `SKILL.md` routes each task to one chapter; `glossary.md` holds the terms.
- `tokens/tokens.json`: the only source of colors and fonts.
- `assets/`: the Logo and the Class stamps. No Product's Sign lives here.
- `templates/product/brand/`: what a Product copies into its own `brand/` folder.
- `assets/`: the Logo and the Class stamps. No Project's Sign lives here.
- `templates/project/brand/`: what a Project copies into its own `brand/` folder.
- `.github/readme/`: the images in the README. Generated.

## Rules

- The guideline states rules for every Product. One Product's specifics, such as its Sign or its copy, belong in that Product's repository or in the site that shows it.
- The guideline states rules for every Project. One Project's specifics, such as its Sign or its copy, belong in that Project's repository or in the site that shows it.
- Before changing a chapter, read [principles.md](./skills/vlab-brand/principles.md): every chapter follows it.
- The skill folder stands alone. An installed skill carries only `skills/vlab-brand/`, so its chapters link only to each other and state values, such as hex codes, instead of pointing outside the folder.
- Everything here is written in English, for any harness: say "agents", not one tool's name, and keep install commands free of agent flags.
Expand All @@ -23,7 +23,7 @@ Edit the source, then run `pnpm build`. `pnpm check` exits 1 when a generated fi

| Source | Generated |
| --- | --- |
| `tokens/tokens.json` | `tokens/tokens.css`, `tokens/theme.css`, the tables in `skills/vlab-brand/color.md`, the palette in `README.md` and its swatches in `.github/readme/`, `templates/product/brand/sign-readme.svg` |
| `tokens/tokens.json` | `tokens/tokens.css`, `tokens/theme.css`, the tables in `skills/vlab-brand/color.md`, the palette in `README.md` and its swatches in `.github/readme/`, `templates/project/brand/sign-readme.svg` |
| `assets/stamps/*.svg` | The stamp previews in `.github/readme/` |
| `assets/logo.svg` | `.github/readme/logo.svg`, the Logo on `ground` for the README |

Expand Down
6 changes: 3 additions & 3 deletions BRAND-USE.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Brand use

The Logo, the Class stamps and every Product's Sign are © Variable Land. All rights reserved.
The Logo, the Class stamps and every Project's Sign are © Variable Land. All rights reserved.

- Use them unmodified to refer to Variable Lab or its Products: in an article, a talk, a list of tools or a "built with" link.
- Use them unmodified to refer to Variable Lab or its Projects: in an article, a talk, a list of tools or a "built with" link.
- Keep them as they are: no edits, no recoloring, no use as the identity of another project or product, and nothing that suggests Variable Land endorses you.

The code and the tokens in this repository are under the [MIT license](LICENSE); these marks aren't. A Product's Sign sits in that Product's repository, in `brand/`, and the repository's code license doesn't extend to it.
The code and the tokens in this repository are under the [MIT license](LICENSE); these marks aren't. A Project's Sign sits in that Project's repository, in `brand/`, and the repository's code license doesn't extend to it.

Questions: ricardo@variable.land.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
## At a glance

- **Dark, warm and flat.** One dark palette, no gradients, no shadows, square corners.
- **One Signature.** The green Logo with "Variable Land" beside it. No Product carries it.
- **A Sign per Product.** A Product starts with its Class stamp and earns a Sign: filled rectangles in one ink.
- **One Signature.** The green Logo with "Variable Land" beside it. No Project carries it.
- **A Sign per Project.** A Project starts with its Class stamp and earns a Sign: filled rectangles in one ink.
- **Facts, in English.** Short declarative sentences a reader can check in the code.

## Palette
Expand Down Expand Up @@ -53,7 +53,7 @@ IBM Plex Sans for text and IBM Plex Mono for code, both in 400 and 500. Two weig
<img src=".github/readme/stamp-library.svg" width="48" height="48" alt="The Library Class stamp">
</p>

The Class stamps of an App and a Library: a body on a base, and a closed frame. Each Product's Sign is drawn on the same 24×24 grid and lives in that Product's own repository, in `brand/`.
The Class stamps of an App and a Library: a body on a base, and a closed frame. Each Project's Sign is drawn on the same 24×24 grid and lives in that Project's own repository, in `brand/`.

## The guideline

Expand All @@ -63,9 +63,9 @@ The Class stamps of an App and a Library: a body on a base, and a closed frame.
| [Logo](skills/vlab-brand/logo.md) | Color, the Signature, sizes and what to avoid. |
| [Color](skills/vlab-brand/color.md) | The palette, soft Vesper and contrast. |
| [Typography](skills/vlab-brand/typography.md) | Families, scale and text flow. |
| [Voice](skills/vlab-brand/voice.md) | Tone, names and how to say what a Product is. |
| [Voice](skills/vlab-brand/voice.md) | Tone, names and how to say what a Project is. |
| [Iconography](skills/vlab-brand/iconography.md) | UI icons and shapes beside text. |
| [Product brand](skills/vlab-brand/product-brand.md) | Class stamps, how a Sign is drawn and a Product's `brand/` folder. |
| [Project brand](skills/vlab-brand/project-brand.md) | Class stamps, how a Sign is drawn and a Project's `brand/` folder. |

The guideline is also an [Agent Skill](https://agentskills.io), `vlab-brand`, so agents read the same text people do.

Expand Down
4 changes: 2 additions & 2 deletions scripts/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// tokens/tokens.json → tokens/tokens.css, tokens/theme.css,
// the tables in skills/vlab-brand/color.md (an installed skill can't read tokens.json),
// the palette in README.md and its swatches in .github/readme/,
// templates/product/brand/sign-readme.svg
// templates/project/brand/sign-readme.svg
// assets/stamps/*.svg → the stamp previews in .github/readme/
// assets/logo.svg → .github/readme/logo.svg
// Generated blocks inside Markdown sit between <!-- build:<name> --> and <!-- /build:<name> -->.
Expand Down Expand Up @@ -54,7 +54,7 @@ for (const file of stamps) {
if (!d) throw new Error(`assets/stamps/${file}: no path d attribute`);
outputs[`.github/readme/stamp-${file}`] = onGround(d);
}
outputs["templates/product/brand/sign-readme.svg"] = onGround("", "<!-- Paste the d attribute of sign.svg into the path's d. -->");
outputs["templates/project/brand/sign-readme.svg"] = onGround("", "<!-- Paste the d attribute of sign.svg into the path's d. -->");

// The Logo on a ground square with a sixth of its height around it, so it never sits on a light background.
const logo = read("assets/logo.svg");
Expand Down
8 changes: 4 additions & 4 deletions skills/vlab-brand/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
name: vlab-brand
description: Variable Lab's brand guideline - principles, Logo, color, type, voice, UI icons and how a Product's Sign is drawn. Use before designing anything public, writing public copy (a README, a page, an image) or giving a Product its Sign.
description: Variable Lab's brand guideline - principles, Logo, color, type, voice, UI icons and how a Project's Sign is drawn. Use before designing anything public, writing public copy (a README, a page, an image) or giving a Project its Sign.
---

# Variable Lab brand

Variable Lab is Variable Land's open source arm. This guideline holds its rules for anything public: sites, READMEs, package pages, images and icons. It states rules, never one Product's specifics: a Product's Sign lives in that Product's repository, and a site's page specs live in that site.
Variable Lab is Variable Land's open source arm. This guideline holds its rules for anything public: sites, READMEs, package pages, images and icons. It states rules, never one Project's specifics: a Project's Sign lives in that Project's repository, and a site's page specs live in that site.

Terms in capitals are defined in [glossary.md](glossary.md).

Expand All @@ -19,6 +19,6 @@ Read the chapter the task touches:
| Set type, sizes and line breaks | [typography.md](typography.md) |
| Write any public text | [voice.md](voice.md) |
| Use or draw a UI icon, set a shape beside text | [iconography.md](iconography.md) |
| Give a Product its Sign, set up its `brand/` folder | [product-brand.md](product-brand.md) |
| Give a Project its Sign, set up its `brand/` folder | [project-brand.md](project-brand.md) |

Beyond this folder, the brand repository (`github.com/withvariablelab/brand`, the package `@variablelab/brand`) holds the tokens (`tokens/`), the Logo and the Class stamps (`assets/`), the template for a Product's `brand/` folder (`templates/product/brand/`) and the terms of use for the marks (`BRAND-USE.md`).
Beyond this folder, the brand repository (`github.com/withvariablelab/brand`, the package `@variablelab/brand`) holds the tokens (`tokens/`), the Logo and the Class stamps (`assets/`), the template for a Project's `brand/` folder (`templates/project/brand/`) and the terms of use for the marks (`BRAND-USE.md`).
2 changes: 1 addition & 1 deletion skills/vlab-brand/color.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ A dark, warm palette in flat planes.
| logo | `#36d399` | The Logo, and nothing else. |
<!-- /build:color -->

- Green lives only in the Logo. A Product has no color of its own.
- Green lives only in the Logo. A Project has no color of its own.
- Signs and Class stamps are `ink`: one ink.
- Contrast on `ground` and `surface`: `ink` 16:1, `ink-muted` 9:1, `dim` 6.5:1. All text stays at 4.5:1 or more. Only decorative marks hidden from assistive technology, such as line numbers and the `$` prompt, sit below that.

Expand Down
22 changes: 11 additions & 11 deletions skills/vlab-brand/glossary.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Variable Lab brand

The language of Variable Lab's brand guideline: the house, its Products and their shapes. Sites that use the guideline keep their own glossary for their pages and content.
The language of Variable Lab's brand guideline: the house, its Projects and their shapes. Sites that use the guideline keep their own glossary for their pages and content.

## The house and its marks

Expand All @@ -9,41 +9,41 @@ The parent house. It builds software that is published, through Variable Lab, an
_Avoid_: VL

**Variable Lab**:
Variable Land's open source arm: its published Products and this guideline. It names the GitHub org and the guideline, never the text beside the Logo.
Variable Land's open source arm: its published Projects and this guideline. It names the GitHub org and the guideline, never the text beside the Logo.
_Avoid_: Variable Labs, VL

**Logo**:
The hexagon with the V. In green it is Variable Lab's; in black, Variable Land's. No Product uses it.
The hexagon with the V. In green it is Variable Lab's; in black, Variable Land's. No Project uses it.
_Avoid_: sign, wordmark, icon

**Signature**:
The Logo with "Variable Land" set in text beside it: how the house signs what it publishes.
_Avoid_: lockup, wordmark, house mark

## Products
## Projects

**Product**:
**Project**:
Something Variable Lab publishes and owns. It is an App or a Library.
_Avoid_: project, tool, package, repo
_Avoid_: product, tool, package, repo

**Class**:
Whether a Product is run or imported: App or Library.
Whether a Project is run or imported: App or Library.
_Avoid_: type, kind, category, badge

**App**:
A Product you run from a terminal.
A Project you run from a terminal.
_Avoid_: CLI, tool, binary

**Library**:
A Product you import from code.
A Project you import from code.
_Avoid_: lib, SDK, module, package

## Shapes

**Sign**:
A Product's own shape: filled geometry in one ink. It belongs to the Product; this guideline says how a Sign is drawn, not which one a Product has.
A Project's own shape: filled geometry in one ink. It belongs to the Project; this guideline says how a Sign is drawn, not which one a Project has.
_Avoid_: logo, icon, mark, glyph

**Class stamp**:
The shape of a Class. A Product carries it until it earns a Sign.
The shape of a Class. A Project carries it until it earns a Sign.
_Avoid_: badge, pill, tag, class icon
4 changes: 2 additions & 2 deletions skills/vlab-brand/iconography.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Iconography

Two families, and nothing else: filled shapes, which are the Signs and the Class stamps ([product-brand.md](product-brand.md)), and outlined UI icons. No emoji anywhere.
Two families, and nothing else: filled shapes, which are the Signs and the Class stamps ([project-brand.md](project-brand.md)), and outlined UI icons. No emoji anywhere.

## UI icons

Expand All @@ -14,7 +14,7 @@ Two families, and nothing else: filled shapes, which are the Signs and the Class
| Copy | Copies a command. | `<rect x="5.75" y="5.75" width="8.5" height="8.5"/>` and `<path d="M2.75 10.25V2.75h7.5"/>` |
| Copied | Replaces Copy for a moment after a copy. | `<path d="M3 8.5l3.25 3.25L13 5"/>` |

A new icon follows the stroke rules. Before it ships, set it at 14px beside every Product's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them.
A new icon follows the stroke rules. Before it ships, set it at 14px beside every Project's `brand/sign.svg` and both Class stamps: it must not be mistaken for any of them.

## Shapes beside text

Expand Down
2 changes: 1 addition & 1 deletion skills/vlab-brand/logo.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ File: `assets/logo.svg` in the brand repository, `viewBox 0 0 402.02 468.12`.

- Another color, an outline, or a background other than `ground`.
- "Variable Lab" beside it: the name beside the Logo is Variable Land.
- A Product using it, or the Logo set beside a Sign.
- A Project using it, or the Logo set beside a Sign.
- A drawn wordmark or any other variant.

## Linking it
Expand Down
4 changes: 2 additions & 2 deletions skills/vlab-brand/principles.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ The rules every other chapter follows.

- **Variable Lab's own.** Variable Lab is Variable Land's open source arm, and this guideline is its own. Everything it publishes follows it: sites, READMEs, package pages, images.
- **Dark only.** Every Variable Lab surface uses the dark palette in [color.md](color.md).
- **One Signature.** Everything is signed with the Signature: the Logo with "Variable Land" set in text beside it ([logo.md](logo.md)). A Product adds its Sign and nothing else: no Signature, color, wordmark, letter, italic name or small-caps eyebrow of its own.
- **One Signature.** Everything is signed with the Signature: the Logo with "Variable Land" set in text beside it ([logo.md](logo.md)). A Project adds its Sign and nothing else: no Signature, color, wordmark, letter, italic name or small-caps eyebrow of its own.
- **One version.** The Logo, each Class stamp and each Sign exist in one version. A shape is never redrawn alone.
- **Two Classes.** An App is run; a Library is imported. Every Product is exactly one.
- **Two Classes.** An App is run; a Library is imported. Every Project is exactly one.
- **Open source is the context.** It is what Variable Lab is, so it never appears as a badge or a selling point.
- **Flat.** No gradients, no shadows. Square corners on every box, block and panel. Borders and rules are 1px in `rule`.
- **Facts.** English, checkable, without clients, case studies or invented numbers ([voice.md](voice.md)).
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Product brand
# Project brand

A Product's brand is its Sign, and nothing more. This chapter says how a Sign is drawn and where it lives. Which Sign a Product has belongs to the Product.
A Project's brand is its Sign, and nothing more. This chapter says how a Sign is drawn and where it lives. Which Sign a Project has belongs to the Project.

## Class stamp first

A new Product carries its Class stamp until it earns a Sign. It never gets a letter, a color or a second house in the meantime. Both stamps are in the brand repository, in `assets/stamps/`.
A new Project carries its Class stamp until it earns a Sign. It never gets a letter, a color or a second house in the meantime. Both stamps are in the brand repository, in `assets/stamps/`.

| Class | File | The shape |
| --- | --- | --- |
Expand All @@ -15,13 +15,13 @@ A new Product carries its Class stamp until it earns a Sign. It never gets a let

- `viewBox 0 0 24 24`, filled geometry on a 4px module, in one ink: `ink`, written as `fill="currentColor"`.
- Straight rectangles only: no circles, no letters, no rounded corners.
- It draws an idea of what the Product does. It is never a mascot, an animal or a picture of the name.
- **Covered-names test**: at 16px, with the names hidden, every Sign and Class stamp is told apart from every other. A new Sign passes it before it ships, against every other Product's `brand/sign.svg` and both Class stamps.
- It draws an idea of what the Project does. It is never a mascot, an animal or a picture of the name.
- **Covered-names test**: at 16px, with the names hidden, every Sign and Class stamp is told apart from every other. A new Sign passes it before it ships, against every other Project's `brand/sign.svg` and both Class stamps.
- If a new Sign can't pass, the family has a problem: review the Signs together. A Sign is never redrawn alone.

## The Product's `brand/` folder
## The Project's `brand/` folder

Once it has a Sign, a Product keeps it in a `brand/` folder next to its `package.json`. Start from `templates/product/brand/` in the brand repository.
Once it has a Sign, a Project keeps it in a `brand/` folder next to its `package.json`. Start from `templates/project/brand/` in the brand repository.

| File | What it holds |
| --- | --- |
Expand Down
6 changes: 3 additions & 3 deletions skills/vlab-brand/voice.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ Brief and declarative, in English. Say facts a reader can check in the code or t
## Names

- "Variable Land" and "Variable Lab": two words, always.
- A Product's name is lowercase kebab-case (`my-product`), in titles too.
- A Product's name is its title. Its executable and its package are metadata, shown beside the name, never instead of it.
- A Project's name is lowercase kebab-case (`my-project`), in titles too.
- A Project's name is its title. Its executable and its package are metadata, shown beside the name, never instead of it.
- In Markdown, a scoped package name goes in backticks (`` `@scope/name` ``). Bare, GitHub links it as a mention of someone else's account.

## Saying what it is

- Name what a Product does or guarantees, in the words its code uses.
- Name what a Project does or guarantees, in the words its code uses.
- Say what it leaves out when that is concrete and checkable: a file, a package, a behavior.
- Check every claim against the code before it ships, not only against the README.
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# <product> brand
# <project> brand

The Sign of <product>: <one or two sentences on the idea it draws>.
The Sign of <project>: <one or two sentences on the idea it draws>.

| File | Use |
| --- | --- |
| `sign.svg` | The Sign, 24×24, in `currentColor`. Sites and images use this file. |
| `sign-readme.svg` | The Sign on a `ground` square, for READMEs. |

How a Sign is drawn and used: [vlab-brand › Product brand](https://github.com/withvariablelab/brand/blob/main/skills/vlab-brand/product-brand.md).
How a Sign is drawn and used: [vlab-brand › Project brand](https://github.com/withvariablelab/brand/blob/main/skills/vlab-brand/project-brand.md).

These files aren't covered by this repository's license. Their use is set by [BRAND-USE.md](https://github.com/withvariablelab/brand/blob/main/BRAND-USE.md).
File renamed without changes
Loading