Brand Visual Guidelines: a Tokeny case study
Generate visual guides with color palettes, typography, and icon specifications from brand concepts. Follow the recorded task, execution screenshots, actual files and verification notes.
By the Tokeny team · Windows · Tokeny 1.7.8 · gpt-6-sol
Prepare the inputs
Create a separate workspace in Tokeny, download and unpack the sample inputs, then select a model that supports tools. The sample uses synthetic data or the public sources named in the article.
- product-brief.md
Send the task to Tokeny
The original task was executed in Chinese. Copying these instructions reproduces the same task; the results below include an English report.
为虚构品牌生成视觉规范：主辅色、文字对比度、字体层级、留白、按钮和图标规范。输出 HTML 指南和设计 token JSON。 交付文件：brand-guide.html、tokens.json。 验收要点： - 含色值和用途 - 文字对比度经过计算 - 覆盖按钮正常和焦点状态 这是使用合成演示输入或指定公开资料的真实操作案例。请先读取工作空间输入，再实际生成文件并自检。所有写入、脚本与临时服务限于当前工作空间；临时服务只监听 127.0.0.1，执行后关闭；不触达外部收件人、不发布、不付款、不更改系统设置，不调用子智能体。需要公开资料时可读取给定 URL。只启用完成任务必需的工具。另写 report.md（中文）和 report.en.md（英文），简洁、完整，包含输入、处理步骤、真实结果、检查方式和局限；失败或未验证部分如实记录，不能宣称成功。最终回复用中文列出产物、关键结果与待核实项。
The recorded run used an isolated demonstration workspace. Review the commands and file paths before approving operations in your own workspace.
What actually ran
The task was submitted through the Tokeny input box. An online model read the inputs and executed tools. This run covers the local sample task and its actual files. Results and checks are recorded below.
Results and verification
Input
product-brief.md: fictional product “Songshu Task Board” for teams of 3–10, with task lists, assignees, due dates, and CSV export.- Source brand color:
#176B52. - Constraints: do not invent customer testimonials, sales figures, or third-party endorsements; write only inside the current workspace.
Processing
- Read
product-brief.md,ENVIRONMENT.md, and the workspace manifest. - Kept
#176B52as the primary color and added an amber accent, dark text, soft canvas, and border colors. - Defined tokens for typography, spacing, icons, and button normal, hover, pressed, focus, and disabled states.
- Calculated text contrast with the WCAG relative-luminance formula and recorded the results in both the JSON and HTML guide.
Actual Results
Created:
brand-guide.html: Chinese visual guide covering color values and usage, measured contrast, type hierarchy, spacing, buttons, and icons.tokens.json: structured brand tokens covering colors, typography, spacing, button states, icons, and contrast checks.report.mdandreport.en.md: this verification record in Chinese and English.
Checks
- Parsed
tokens.jsonto verify valid JSON and required top-level sections. - Recomputed every contrast ratio with the same WCAG relative-luminance formula and compared it with the stored values.
- Checked that the HTML contains
lang="zh-CN", color values, the contrast table,:focus-visible, and button state examples. - Confirmed all four deliverables exist and are non-empty.
Limitations
- No real-browser visual regression or assistive-technology test was run; this pass is static and formula-based.
- Contrast results apply to the declared solid foreground/background pairs. Transparency, image backgrounds, and system font rendering must still be reviewed in the product implementation.
Download and inspect the outputs
The archive contains the files created during this run. Use these checks when adapting the example to your own data.
- Reconcile the reported results against the downloadable sample inputs.
- Open the generated files and check the contents relevant to your task.
- Review the limitations and any unverified steps in the report.