Brand Assets Generator (stoyanov.works) — Design System Reference

1. Visual Theme & Atmosphere

This is a tool that generates brand assets, and it dresses itself accordingly: the interface reads like a type specimen sheet rather than a SaaS dashboard. The canvas is a warm off-white paper (rgb(250, 249, 247)), not clinical white, giving the generator the feel of a print studio worksheet. A single custom grotesk, Telegraf, carries every label, link, and button — the kind of geometric sans that brand-identity studios reach for because it’s confident at both display and micro sizes. Ink-black text (rgb(0, 0, 0)) sits on the paper canvas, and the primary interactive surface flips the relationship entirely: a near-black panel (rgb(26, 26, 26)) that reads as a printed swatch or a inverted brand card. The overall atmosphere is restrained, functional, and typographically literate — a tool built by people who care about the thing it produces.

2. Color Palette & Roles

Foundation

• rgb(250, 249, 247) — page canvas (warm paper white, luminance 0.977)
• rgb(246, 245, 243) — secondary surface, a hair dimmer than the canvas (luminance 0.961) — used for adjacent panels/cards
• rgb(26, 26, 26) — inverted dark surface (luminance 0.102) — the brand-card / preview panel register

Text & ink

• rgb(0, 0, 0) — body text and default borders — true black, not the near-black used elsewhere, so body copy reads as the sharpest ink on the page
• rgb(102, 102, 102) — input text/border, a mid-gray that keeps unfocused form fields quiet
• rgb(51, 51, 51) — select text, a shade lighter than pure black
• rgb(187, 187, 187) — link text, a pale gray that recedes against the paper canvas

Interactive

• Button: rgb(34, 34, 34) background, rgb(255, 255, 255) text, rgb(34, 34, 34) border — a charcoal-black stamp with white type, the darkest solid chrome on the page
• Link border: rgb(187, 187, 187) on the sides and top, dropping to rgb(85, 85, 85) on the bottom edge — an asymmetric underline-style border rather than a flat rule
• Select: rgb(255, 255, 255) fill, rgb(51, 51, 51) text, rgb(221, 221, 221) border — the one element that reverts to a conventional white form-field treatment

The palette is essentially monochrome — paper, ink, and a run of grays — with the charcoal button as the only near-black “accent.” Color isn’t doing brand work here; typography and tonal contrast are.

3. Typography Rules

Typeface: Telegraf (with system-ui, -apple-system, sans-serif fallback) — a single custom grotesk used everywhere except one native input, which quietly falls back to Arial.

Scale

Principles

• Weight never moves — everything sits at 400. Hierarchy comes from size and letter-spacing alone: body copy runs large and loose at 16px, while every UI label (link, button, select, label) drops to 10–11px with small positive tracking to keep the micro-type legible.
• Buttons and labels share the same tracking value (0.44px), tying the two together as the same “control” register.
• The native <input> is the single typographic outlier — it renders in Arial at browser-default size (13.3333px) rather than Telegraf, a tell that this one field was left unstyled. Treat this as an implementation gap, not a design decision, when rebuilding the system: give inputs Telegraf at 11–13px to match the rest of the control set.

4. Component Stylings

Buttons (primary action)

• Background rgb(34, 34, 34), text rgb(255, 255, 255), matching border — a solid charcoal stamp, the darkest filled surface in the UI
• Telegraf 11px with 0.44px tracking, no uppercase transform

Links

• Transparent background, rgb(187, 187, 187) text
• Border present on all sides but asymmetric: rgb(187, 187, 187) top/sides, rgb(85, 85, 85) bottom — reads as a soft underline rather than a boxed pill
• Telegraf 10px, tightest type on the page

Selects

• White fill (rgb(255, 255, 255)), rgb(221, 221, 221) border, rgb(51, 51, 51) text
• The only component that keeps a conventional filled-field look rather than the transparent/ink treatment used elsewhere

Inputs

• Transparent background, rgb(102, 102, 102) text and border — a quiet, low-contrast field defined by a thin gray hairline
• Falls back to system Arial rather than Telegraf (see Typography section) — worth normalizing if extending this system

Labels

• Telegraf 11px, 0.44px tracking — same register as buttons, reinforcing that labels and actions belong to the same control layer

Shadows / radii: none detected in the extracted styles — depth and shape are not part of this system’s vocabulary at the base-element level.

5. Layout Principles

• Body has zero padding/margin at the root — the page delegates all spacing to inner containers rather than the document root.
• Three tonal surfaces do the layout work instead of borders: the paper canvas (rgb(250, 249, 247)), a barely-dimmer secondary surface (rgb(246, 245, 243)), and the near-black inverted panel (rgb(26, 26, 26)). Sectioning is achieved through luminance steps, not rules or shadows.
• No breakpoints were captured in the extracted data — treat the layout as needing verification at tablet/mobile widths rather than assuming a specific grid.
• Given the tool’s purpose (generating brand assets), expect a control column (selects, inputs, labels, buttons) paired with a live preview area — the dark rgb(26, 26, 26) surface is the natural candidate for that preview/output panel, contrasting against the paper-toned control surfaces.

6. Depth & Elevation

Depth here is entirely tonal, not shadow-based — no box-shadow or border-radius values were detected anywhere in the system. Three luminance steps carry all the elevation cues:

• Canvas (luminance 0.977) → secondary surface (luminance 0.961) is a whisper-thin step, just enough to separate a panel from the page without a border.
• The inverted dark surface (luminance 0.102) is the one dramatic jump in the system — it doesn’t sit “above” the canvas so much as it flips polarity, functioning as a distinct register (likely the preview/output zone) rather than a raised card.

7. Do’s and Don’ts

Do

• Use rgb(250, 249, 247) as the base canvas — never pure white.
• Set all UI type in Telegraf; reserve size (10–16px) and tracking (0.2–0.44px) as the only hierarchy tools, keeping weight fixed at 400.
• Use the charcoal rgb(34, 34, 34) fill exclusively for the primary button — it should stay the darkest filled surface on the page.
• Treat the near-black rgb(26, 26, 26) surface as a polarity flip (dark panel/preview), not as a shadow-elevated card.
• Give links their asymmetric border treatment (lighter top/sides, darker bottom) rather than a flat underline.

Don’t

• Don’t introduce drop shadows or border-radius for elevation or shape — none exist in the source system; tonal contrast alone carries depth.
• Don’t let inputs fall back to system Arial — extend the Telegraf treatment to every form control, including native inputs.
• Don’t add bold or heavier weights for emphasis — this system communicates hierarchy through size and tracking only.
• Don’t treat the select’s white-fill, gray-border look as the template for other controls — it’s the one component that differs from the transparent/ink language everything else uses.

8. Responsive Behavior

No breakpoints were present in the extracted styles, so responsive rules should be treated as unverified rather than absent. Given the compact micro-type scale already in use (10–11px controls, 16px body), the system has headroom to hold its type sizes across viewports without needing aggressive scaling — the main responsive risk is the control-column-plus-preview-panel layout implied by the two-tone canvas/dark-surface pairing, which will likely need to stack vertically on narrow screens.

9. Agent Prompt Guide

Build a UI that matches the Brand Assets Generator’s design language.

Set the canvas to warm paper white rgb(250, 249, 247) — never pure white — with a secondary surface at rgb(246, 245, 243) for adjacent panels. Use Telegraf (fallback system-ui, sans-serif) for every UI element: body at 16px, buttons and labels at 11px with 0.44px tracking, links at 10px with 0.2px tracking and an asymmetric border (light top/sides, rgb(85, 85, 85) bottom). Hold weight at 400 everywhere; let size and tracking carry hierarchy. Make the primary button a solid charcoal stamp — rgb(34, 34, 34) background, white text, matching border. Give inputs a transparent background with rgb(102, 102, 102) text/border (and style them in Telegraf rather than letting them fall back to system Arial). Reserve a near-black rgb(26, 26, 26) surface for a preview/output panel — a polarity flip against the paper canvas, not a shadow-raised card. Skip drop shadows and border-radius entirely; this system carries depth through tonal contrast alone.

Generated by Sparkbites — extracted from live CSS analysis