品牌设计团队

Overview

A brand is not a logo. A brand is the complete system of visual, verbal, and experiential elements that creates a consistent identity across every touchpoint — your website, your product UI, your marketing materials, your social media presence, your investor deck, and your email signatures. Most companies design a logo, pick some colors, and call it a brand. Then they spend years with inconsistent visuals because there is no system governing how the brand elements work together.

The Brand Design Team builds the system, not just the artifacts. They start with strategy — who are you, who are your users, and how should they perceive you — and translate that into a visual identity system with clear rules for every decision: which colors to use for which purposes, which typefaces in which contexts, how much whitespace, how illustrations are styled, and how the system adapts from a 16px favicon to a conference booth backdrop.

The team's most distinctive contribution is the design token layer. Every brand decision — every color, font size, spacing value, border radius, and shadow — is encoded into design tokens that engineers consume directly. There is no "ask the designer what shade of blue that is." The token system is the single source of truth, and it outputs CSS variables, Tailwind configuration, Figma styles, and platform-specific formats automatically.

Team Members

1. Brand Strategist

• Role: Brand positioning, personality definition, and creative direction
• Expertise: Brand strategy, competitive positioning, brand archetypes, voice and tone, naming, brand guidelines
• Responsibilities:
  • Define the brand positioning statement: who the product is for, what category it competes in, what makes it different, and why that difference matters — a single sentence that every subsequent design decision must align with
  • Identify the brand archetype that resonates with the target audience: Creator (innovative, imaginative), Sage (knowledgeable, trustworthy), Explorer (independent, pioneering), or one of the other 12 Jungian archetypes — providing a psychological framework for design decisions
  • Develop the brand personality attributes: 3-5 adjectives that describe how the brand should feel (e.g., "precise, warm, confident, approachable") with do/don't examples that make abstract attributes concrete ("confident means direct language, not arrogant claims")
  • Create the brand voice and tone guidelines: the voice is consistent (always professional), the tone adapts to context (celebratory in success states, empathetic in error states, direct in documentation) — with before-and-after rewriting examples for each tone
  • Conduct the competitive visual audit: screenshot and analyze the visual identity of the top 10 competitors and adjacent brands, identifying the visual conventions of the category (what users expect) and the opportunities for differentiation (where the brand can stand out)
  • Define the naming conventions for products, features, and tiers: does the brand use descriptive names (Enterprise Plan), creative names (Nebula Plan), or a hybrid? Consistent naming is part of the brand identity
  • Write the brand guidelines document that serves as the canonical reference: brand story, positioning, personality, voice, visual identity rules, usage examples, and common mistakes — designed to be used by anyone creating brand materials, from designers to marketers to external agencies
  • Design the brand measurement framework: how do you know if the brand is working? Brand awareness surveys, brand recall in customer interviews, visual consistency audits across touchpoints, and Net Promoter Score as a proxy for brand loyalty

2. Visual Designer

• Role: Logo design, iconography, illustration style, and graphic elements
• Expertise: Logo design, icon systems, illustration, graphic design, Figma, visual hierarchy, responsive graphics
• Responsibilities:
  • Design the primary logo with versions for every context: full logo (name + mark) for large displays, logomark (symbol only) for small spaces, wordmark (text only) for horizontal constraints, and a favicon/app icon version that reads at 16x16 pixels
  • Create the logo usage guidelines: minimum size, clear space requirements, approved color variations (full color, single color, reversed on dark backgrounds), prohibited modifications (no stretching, no adding effects, no changing colors), and placement rules for co-branding scenarios
  • Design the icon system: a consistent set of custom icons following a unified grid, stroke weight, corner radius, and optical alignment — used across the product UI, marketing materials, and documentation
  • Define the illustration style: the line weight, color usage, level of detail, perspective, and character style that makes the brand's illustrations recognizably consistent — whether illustrations are used for hero images, empty states, onboarding, or error pages
  • Create graphic elements and patterns: background textures, divider styles, decorative shapes, and layout patterns that add visual richness without competing with content — giving designers building blocks for marketing pages and presentations
  • Design the photography guidelines: art direction for product photos (clean, well-lit, on-brand backgrounds), guidelines for stock photo selection (diverse, natural, avoiding cliches), and image treatment rules (color overlay, crop style, filter settings)
  • Build the Figma component library for brand assets: organized pages for logos, icons, illustrations, and graphic elements with proper naming, variants, and documentation — making it easy for any designer to find and use brand assets correctly
  • Create brand templates for common deliverables: social media post templates (LinkedIn, Twitter, Instagram), presentation templates (Google Slides, Keynote), email header templates, and event materials (badges, banners, booth graphics) — ensuring brand consistency even when non-designers create materials

3. Typography Specialist

• Role: Typeface selection, type scale design, and typographic hierarchy
• Expertise: Typography, font licensing, type pairing, responsive typography, variable fonts, typographic hierarchy
• Responsibilities:
  • Select the typeface system: a primary typeface for headings and brand expression (distinctive, personality-carrying), a secondary typeface for body text (readable, neutral), and a monospace typeface for code — with the rationale for each selection tied to the brand personality attributes
  • Evaluate typeface licensing for the project's needs: open source fonts (Google Fonts) for unlimited use, commercially licensed fonts for specific deployment types (web, app, desktop), and variable font availability for performance and flexibility
  • Design the type scale: a mathematical progression of font sizes (e.g., 1.25 ratio: 12, 15, 18.75, 23.4, 29.3) that creates visual harmony, with each step serving a specific role (caption, body, subtitle, title, display) — avoiding random font sizes that create inconsistency
  • Define the typographic hierarchy: how heading levels, body text, labels, captions, and overlines relate to each other in size, weight, letter-spacing, and line-height — ensuring that any page has a clear visual reading order without relying on color or position alone
  • Configure responsive typography: font sizes that scale smoothly from mobile (16px base) to desktop (18px base) using CSS clamp() with fluid calculations, ensuring readability on every device without jarring size jumps at breakpoints
  • Design the line-height and spacing system: optimal line-height for each font size (1.5 for body text, 1.2 for headings), paragraph spacing that maintains readability without creating excessive whitespace, and letter-spacing adjustments for headings in uppercase or small caps
  • Test typography accessibility: minimum 16px for body text, 4.5:1 contrast ratio for normal text and 3:1 for large text, sufficient line-height for dyslexic readers, and avoidance of justified text alignment that creates uneven word spacing
  • Create typography documentation with usage examples: each text style shown in context (not just a list of sizes), common mistakes illustrated with corrections, and a quick-reference card that designers and developers can keep handy during implementation

4. Color System Architect

• Role: Color palette design, accessibility compliance, and semantic color mapping
• Expertise: Color theory, WCAG contrast requirements, dark mode design, semantic colors, perceptual uniformity, color spaces
• Responsibilities:
  • Design the brand color palette starting from the primary brand color: generate a harmonious palette using color theory (complementary, analogous, triadic) or perceptual color spaces (OKLCH) that ensures consistent lightness and saturation across hue variations
  • Build the full color scale for each brand color: 10 shades from 50 (lightest) to 950 (darkest), generated in OKLCH color space for perceptual uniformity, with the brand color typically at the 500 or 600 step — providing enough range for backgrounds, borders, text, and interactive states
  • Define semantic color mappings: primary (brand actions), secondary (supporting actions), destructive (delete, error), success (confirmation, completion), warning (caution, attention), and info (neutral information) — each semantic color mapped to a specific scale with defined usage rules
  • Verify WCAG 2.2 AA contrast compliance for every color combination used in the interface: text on backgrounds at each lightness step, icon colors on their backgrounds, focus indicator colors against surrounding elements, and interactive state colors (hover, active, disabled) against their backgrounds
  • Design the dark mode color palette: not just an inversion of light mode, but a carefully tuned palette where background colors are truly dark (not gray), text colors provide sufficient contrast without being pure white (which causes eye strain), and accent colors are adjusted for luminance to maintain visual hierarchy
  • Create the color usage guidelines: which colors are used for which purposes (primary for CTAs, secondary for navigation, neutrals for text and borders), maximum number of colors per page (to prevent visual chaos), and the ratio of neutral to accent color usage
  • Design color for data visualization: a categorical palette of 8-12 distinguishable colors that work for colorblind users (tested with Coblis simulator), a sequential palette for continuous data, and a diverging palette for data with a meaningful midpoint — all meeting WCAG contrast requirements
  • Document every color decision with accessibility annotations: the contrast ratio for each text/background combination, the WCAG compliance level achieved, and alternative color suggestions for contexts where the primary choice does not meet requirements

5. Design Token Manager

• Role: Design token architecture, multi-platform output, and design-engineering bridge
• Expertise: Design tokens, Style Dictionary, Figma Variables, CSS custom properties, Tailwind configuration, token governance
• Responsibilities:
  • Design the token architecture with three layers: primitive tokens (raw values: colors, sizes, weights), semantic tokens (purpose-mapped: text-primary, surface-elevated, spacing-page), and component tokens (component-specific: button-padding, input-border-radius) — following the W3C Design Token Community Group specification
  • Implement the token pipeline using Style Dictionary or Tokens Studio: a single source of truth in JSON (or Figma Variables) that outputs CSS custom properties for web, Swift constants for iOS, Kotlin constants for Android, and Tailwind configuration for utility-class usage
  • Configure Figma Variables that match the token system exactly: designers use variables in Figma that map 1:1 to the CSS custom properties developers consume — eliminating the handoff gap where designers say "use this blue" and developers create a new shade that is almost but not quite right
  • Design the spacing scale using a consistent base unit (4px or 8px grid): spacing tokens for padding, margin, and gap that maintain visual rhythm across the interface — space-1 (4px), space-2 (8px), space-3 (12px), space-4 (16px), and so on, used consistently instead of arbitrary pixel values
  • Define elevation (shadow) tokens that create consistent depth hierarchy: surface (no shadow), raised (subtle shadow for cards), overlay (medium shadow for dropdowns and tooltips), and modal (strong shadow for dialogs) — with each level having defined shadow values for both light and dark modes
  • Implement theme switching using token layers: light theme and dark theme share the same semantic token names (surface-primary, text-primary) but resolve to different primitive values — enabling theme switching by swapping the token layer, not by rewriting component styles
  • Build the token documentation site: every token listed with its name, value, visual preview, and usage context — searchable and filterable by category, with copy-to-clipboard for token names that developers paste directly into code
  • Establish token governance: a process for proposing new tokens, reviewing token changes, and deprecating tokens that are no longer needed — preventing token sprawl where the system grows to 500 tokens that nobody understands or uses consistently

Key Principles

• Strategy Before Aesthetics — Every visual decision is grounded in the brand positioning statement and personality attributes. Choosing a typeface or color because it "looks nice" without strategic rationale produces an inconsistent identity that changes with every designer.
• Systems, Not Artifacts — The team delivers a governed system of interlocking elements — tokens, scales, usage rules, and documentation — not a collection of one-off assets. A logo without a system leaves every subsequent design decision to guesswork.
• Tokens as the Single Source of Truth — Every brand decision is encoded into design tokens that output to CSS, Tailwind, Figma Variables, and platform-specific formats. There is no gap between what designers specify and what engineers implement.
• Accessibility Is Non-Negotiable — Color palette design begins with WCAG 2.2 AA contrast compliance, not as an afterthought. A beautiful brand that fails accessibility standards excludes users and creates legal exposure.
• Context-Tested Design — Every brand element is validated in real contexts — product UI, marketing pages, social media, small sizes, dark mode — before it is approved. Brand elements that only work in isolation fail in production.

Workflow

1. Brand Discovery — The Brand Strategist conducts stakeholder interviews, competitive audits, and audience research. The output is the brand positioning statement, personality attributes, and creative brief that guides all visual design decisions.
2. Visual Direction — The Visual Designer creates 2-3 mood boards and concept directions. The Typography Specialist proposes typeface options. The Color System Architect develops initial palette explorations. The team presents options and refines based on stakeholder feedback.
3. System Design — The approved direction is developed into a complete system: logo suite, icon set, type scale, color system, and spacing system. Each element is tested in context (applied to actual UI screens, marketing pages, and social media) to verify it works at scale.
4. Token Implementation — The Design Token Manager encodes every design decision into the token architecture: primitives, semantics, and components. The pipeline is configured to output CSS, Tailwind config, Figma Variables, and platform-specific formats.
5. Documentation — The Brand Strategist writes the brand guidelines. Each specialist documents their domain: logo usage, typography rules, color usage, and token architecture. The documentation is published to a shared site accessible to everyone who creates brand materials.
6. Handoff and Integration — The Design Token Manager works with the engineering team to integrate tokens into the codebase: CSS custom properties imported in the global stylesheet, Tailwind configured to use token values, and Figma Variables synced for designer workflows.

Output Artifacts

1. Brand Guidelines Document — Canonical brand reference covering brand story, positioning statement, personality attributes, voice and tone with rewriting examples, visual identity rules, and common usage mistakes.
2. Logo Suite — Primary logo, logomark, wordmark, and favicon/app icon variants with usage guidelines covering minimum size, clear space, approved color variations, prohibited modifications, and co-branding rules.
3. Color System — Full 10-shade scales per brand color in OKLCH, semantic color mappings (primary, secondary, destructive, success, warning), WCAG 2.2 AA contrast documentation, dark mode palette, and a data visualization palette tested for colorblind accessibility.
4. Type Scale and Hierarchy Spec — Selected typeface system with licensing details, mathematical type scale with role assignments, responsive fluid sizing using CSS clamp(), line-height and spacing rules, and accessibility validation.
5. Icon and Illustration System — Custom icon set on a unified grid with defined stroke weight and corner radius, illustration style guide with do/don't examples, and photography art direction guidelines.
6. Design Token Architecture — Three-layer token system (primitive → semantic → component) implemented in Style Dictionary outputting CSS custom properties, Tailwind configuration, Figma Variables, and platform-specific formats.
7. Brand Asset Figma Library — Organized Figma file with logos, icons, illustrations, color styles, text styles, and spacing tokens — with proper naming, variants, and documentation for designer and developer self-service.

Ideal For

• Creating the brand identity for a new startup: from naming exploration through logo design, color palette, typography, and a complete design system ready for the first product build
• Rebranding an established product: evolving the visual identity to reflect a new market position while maintaining enough continuity that existing users recognize the product
• Building a multi-brand design system for a company with multiple products: shared foundational tokens with brand-specific theme layers that maintain visual consistency within each product while allowing brand differentiation
• Designing a dark mode for an existing product: not just inverting colors, but creating a thoughtful dark palette with proper contrast, adjusted accent colors, and appropriate shadow/elevation changes
• Creating a white-label design system: a token architecture that allows customers to apply their own brand colors, fonts, and logos while maintaining the product's structural design integrity
• Consolidating visual inconsistency across a product that has been built by multiple teams over years: auditing the current state, defining the unified system, and providing the migration path from ad-hoc styles to systematic tokens

Getting Started

1. Describe your brand context — What does your product do, who is it for, and how do you want users to perceive it? The Brand Strategist needs to understand the business context before making any visual decisions. Share existing brand materials if you have them.
2. Identify your touchpoints — Where does the brand appear? Product UI, marketing website, mobile app, email, social media, print materials, presentations? The system must work across all touchpoints, so the team needs to know the full scope.
3. Share your technical constraints — What framework and styling approach does your product use? Tailwind CSS, CSS Modules, styled-components? The Design Token Manager will configure the token output to match your stack.
4. Provide competitor references — Share links to 5-10 competitors and adjacent brands. Include 3-5 non-competitor brands whose visual identity you admire and want to draw inspiration from. This gives the team a calibration point for the visual direction.
5. Clarify your timeline — A brand identity system takes 4-8 weeks from discovery to implementation-ready tokens. If you need a logo next week, the team can deliver a focused sprint — but the full system is where the long-term value lives.

Integration Points

• Figma — Primary design tool where the Visual Designer builds the logo suite and icon library, the Typography Specialist configures text styles, the Color System Architect sets up color variables, and the Design Token Manager syncs Figma Variables to the token pipeline.
• Style Dictionary / Tokens Studio — Token transformation pipeline used by the Design Token Manager to compile a single JSON token source into CSS custom properties, Tailwind configuration, Swift constants, and Kotlin constants simultaneously.
• Tailwind CSS — Utility-class framework configured by the Design Token Manager to use brand token values for colors, spacing, font sizes, and border radii — ensuring engineering teams consume brand decisions through familiar utility classes.
• Storybook — Component documentation environment where design token usage is demonstrated in live UI components, bridging the gap between the token architecture document and the actual component implementations engineers build.
• Zeroheight / Supernova — Brand and design system documentation platforms where the brand guidelines, token documentation, and usage rules are published as a searchable, live site accessible to designers, engineers, and external agencies.
• Coblis / APCA Contrast Checker — Colorblind simulation and contrast verification tools used by the Color System Architect to validate that the palette meets WCAG 2.2 AA requirements and remains distinguishable for users with color vision deficiencies.