Deft
Ask AI

Search

Search skills, authors and topics

fatihaydost / brand-identity-skill

brand-identity

Brand identity sets from one brief - logo, typography and colour palette built together, measured (contrast, colour blindness, glyph coverage, font licences, small-size logo renders) and compared side by side as identity cards, shown on the user's own site, then a brand guidelines kit (PDF, logo files, tokens) for the chosen set. Use for a new brand or any part of one (logo, fonts, colours, or a mix), for refreshing an identity, or for critiquing one, even if the user only says "branding".

View sourceVisualTypographyColorSystems

Install

npx skills add https://github.com/fatihaydost/brand-identity-skill --skill brand-identity

Tokens export

How the chosen set leaves the skill as code: kit/<SET>/tokens/ from export_tokens.py (colour) plus font CSS variables written by the kit. Tags: [strong] vendor or spec documentation, [practice] convention.

Rules

  • Export only an audited palette (no gate in either mode); tokens spread a failing pair into every screen.
  • palette.json is the only source. Generated files are read-only: change the source, re-export.
  • python3 scripts/export_tokens.py palette.json --out DIR [--formats css,scss,tailwind,dtcg,gpl,swatches] [--dtcg-per-mode]. Open each file once and quote token names from it, not from memory.

Files

FileForNotes
tokens.cssany web codescales + 16 roles; light on :root, dark on [data-theme="dark"] and prefers-color-scheme scoped by :root:not([data-theme="light"])
tokens.scssSassmirrors the CSS; don't derive shades with Sass lighten/mix (they shift hue)
tailwind.palette.jsTailwind v3, or v4 via @configv3 opacity modifiers (bg-primary/50) don't work on hex variables: use a scale step or color-mix()
tokens.dtcg.jsontoken pipelinesDTCG 2025.10 [strong]; roles alias scale steps
tokens.{light,dark}.tokens.jsonFigma Variables--dtcg-per-mode; DTCG has no modes, each file becomes one mode
palette.gplGIMP, Inkscape, Kritaentries named "Role: Brand name"
swatches.htmlhumans, approvals, printhex, RGB, OKLCH, scales, key pairs with ratios

Naming [practice]

  • Reference (scales primary-50 … 950) → semantic roles (--bi-background, --bi-surface-alt, --bi-text-muted, --bi-on-primary) → component tokens, which belong to the developer's codebase.
  • Name by job, not hue: --bi-primary, never --bi-blue; colour names ("Harbor Blue") live in the kit.
  • Components use roles; a component reaching for primary-600 breaks in dark mode. Fills pair only with their on-* partner.
  • Extended colours: --bi-ext-N + --bi-on-ext-N; N is a position, so keep the order stable.
  • Another prefix: alias once (--color-primary: var(--bi-primary)), don't edit generated files.

Tailwind v4

CSS-first (theme variables) [strong]:

css
@import "tailwindcss";@import "./tokens.css";@theme inline { --color-primary: var(--bi-primary); --color-on-primary: var(--bi-on-primary); /* … */ }

Utilities read the variables, so the dark switch keeps working. Consider --color-*: initial; to drop default colours.

Fonts

The kit adds font CSS variables for the display and text roles, with fallback stacks and the embed code (Google Fonts link or self-host note). No font files are shipped; kit/<SET>/fonts.md lists sources and licences (type.md). Set font-variation-settings for pinned axes and lang on content for locale casing.

Handoff note (README or kit page)

Which file for which stack and the two wiring lines; theme switching (data-theme on <html>, OS default otherwise); the tested fill → text pairs with ratios in both modes ("only these pairs are tested"); do/don't (roles in components, status never by colour alone, links underlined or ≥ 3:1 from body text, focus ring --bi-focus); changes go through palette.json. Logo colours are artwork in kit/<SET>/logo/, not tokens.

Figma

Writing into a user's Figma file is an action in their account: only on request, and prefer handing them the per-mode files to import (Variables → drag in, or Import mode; sRGB only; Figma help). [strong]