快餐品牌视觉识别及UI系统风格指南
English
Create a comprehensive, 9-part professional brand identity and UI/UX design system style guide sheet for a major fast-food brand. The layout should be structured as a clean, grid-based presentation with distinct, numbered sections (01 to 09). The overall aesthetic must be bold, iconic, and highly structured. ### 01 BRAND HEADER - Include a bold, prominent logo on a striking background (e.g., solid red and white stripes). - Display a recognizable brand mascot or character illustration. - Include a memorable brand slogan (e.g., "it's finger lickin' good") written in a casual, handwritten script font. - List three core brand keywords below the slogan separated by slashes (e.g., BOLD / ICONIC / REAL). ### 02 COLOR SYSTEM - **Primary Palette:** Showcase 4 main colors with hex codes, labeled by their role (e.g., Foundation, Emphasis). - **Secondary Palette:** 4 supporting colors with hex codes, labeled by atmospheric mood. - **Accent Palette:** 4 pop colors with hex codes for specific callouts. - **Gradients:** A visual spectrum displaying brand gradient transitions. - **Color Pairings:** Small contrast blocks demonstrating text/background compatibility (e.g., Red+White, Black+Gold) in both Light Mode and Dark Mode interface previews. ### 03 TYPOGRAPHY SYSTEM - **Headline:** A heavy, tightly lettered, all-caps sans-serif font for maximum impact (e.g., "REAL CHICKEN. REAL GOOD."). - **Subheadline:** A clean, trustworthy sans-serif font in a contrasting color (e.g., "Hand-breaded. Freshly prepared. Every single day."). - **Body Text:** A highly readable, friendly, everyday sans-serif font displaying a short brand philosophy paragraph. - **Specimen Panel:** Display "Aa" font weight examples for Display Bold, Sans Bold, and Sans Regular next to a placeholder logo. ### 04 VISUAL LANGUAGE - **Photography u0026 Art Direction Guidelines:** Detail rules for Image Style (e.g., Bold, Editorial, Craveable), Lighting (e.g., Dramatic directional light with deep shadows), and Textures (e.g., Crispy, tactile food textures, raw wood, metal accents). - **Image Grid:** Include a horizontal sequence of five distinct, high-contrast editorial food and portrait photographs, each tagged with a brand pillar (e.g., Bold, Real, Confident, Craveable, Iconic). ### 05 BRAND APPLICATIONS - Show real-world implementations of the visual identity across multiple media: - **Product Packaging:** 3D mockups of branded food buckets and boxes. - **Website Hero:** A clean desktop landing page layout featuring a strong headline, product shot, and an "Order Now" button. - **Mobile App Screen:** A modern smartphone UI showing a food delivery interface. - **Social Media Posts:** Mockups for Instagram (1:1 square post), Stories (9:16 vertical), and Banners (16:9 widescreen). - **Stationery u0026 Out-of-Home:** A minimalist corporate business card and a dramatic, high-impact nighttime billboard advertisement. ### 06 DESIGN SYSTEM (UI COMPONENTS) - **Buttons:** State variations (Default, Hover, Disabled) for Primary, Secondary, and Text button styles. - **Cards:** UI cards for food menu items featuring high-quality images, titles, pricing, and promotional "Today's Deal" badges. - **Input Fields:** Default, Focused, and Error state text entry boxes. - **Navigation Bar:** Desktop navbar layout with logo, menu links, and an actionable CTA button. - **Spacing Scale:** A visual 8pt grid system scale showing incremental padding blocks (8px, 16px, 24px, up to 96px). ### 07 ICONOGRAPHY - A clean grid of 10 minimalist, uniform line-art icons representing core actions and product categories: Chicken, Bucket, Burger, Fries, Drink, Location, Delivery, Offers, Account, and Favorite. ### 08 PATTERNS u0026 MOTIFS - Five rectangular swatches displaying repeating brand assets: - **Stripe Pattern:** Clean vertical lines. - **Colonel/Mascot Pattern:** A repeating line-art logo motif on a solid background. - **Texture Pattern:** A subtle, raw material texture (like wood or paper grains). - **Shape Motifs:** Geometric chevron/ribbon design elements. - **Dividers:** Thin, functional line breaks and UI indicators. ### 09 MATERIAL u0026 DEPTH - Four visual examples demonstrating physical spatial rendering: - **Real Shadows:** Product packaging casting natural, directional ambient shadows. - **Textured Surfaces:** Close-ups of tactile materials like paper, cardboard, and wood. - **Reflections:** Subtle gloss and polished finishes on plastic or glass drink cups. - **Layer Depth:** A layered mobile application UI showing depth hierarchy and overlapping elements. ### FOOTER QUOTE - Conclude the sheet with a solid red accent block featuring a large white blockquote from the company founder alongside a clean vector line illustration of the brand masco
中文
为一家大型快餐品牌创建一个全面的、由 9 部分组成的专业品牌视觉识别和 UI/UX 设计系统风格指南表。布局应结构化为整洁的、基于网格的展示,带有清晰的编号部分(01 到 09)。整体审美必须是大胆的、标志性的且高度结构化的。 ### 01 品牌头部 (BRAND HEADER) - 在醒目的背景上(例如红白相间的条纹)包含一个大胆且突出的徽标。 - 展示一个具有辨识度的品牌吉祥物或人物插图。 - 包含一个令人难忘的品牌标语(例如 “it's finger lickin' good”),使用随性的手写剧本字体书写。 - 在标语下方列出三个核心品牌关键词,用斜杠分隔(例如:BOLD / ICONIC / REAL)。 ### 02 色彩系统 (COLOR SYSTEM) - **主色调:** 展示 4 种带有十六进制代码的主色,并根据其作用进行标记(例如:基础色、强调色)。 - **次级色调:** 4 种带有十六进制代码的辅助色,按氛围心情进行标记。 - **点缀色调:** 4 种用于特定标注的流行色,带有十六进制代码。 - **渐变:** 显示品牌渐变过渡的视觉光谱。 - **颜色配对:** 展示文本/背景兼容性的小对比块(例如:红+白、黑+金),包含浅色模式和深色模式的界面预览。 ### 03 字体系统 (TYPOGRAPHY SYSTEM) - **大标题:** 一种厚重的、间距紧凑的全大写无衬线字体,以获得最大的视觉冲击力(例如:“REAL CHICKEN. REAL GOOD.”)。 - **次级标题:** 一种整洁、值得信赖的无衬线字体,采用对比色(例如:“Hand-breaded. Freshly prepared. Every single day.”)。 - **正文:** 一种高度可读、亲切、日常的无衬线字体,展示一段简短的品牌哲学段落。 - **字体样本面板:** 在占位符徽标旁边显示 Display Bold、Sans Bold 和 Sans Regular 的 “Aa” 字体粗细示例。 ### 04 视觉语言 (VISUAL LANGUAGE) - **摄影和艺术指导准则:** 详细说明图像风格(例如:大胆、社论感、令人垂涎)、光照(例如:带有深影的戏剧性方向光)和纹理(例如:酥脆、触感良好的食物纹理、原木、金属装饰)的规则。 - **图像网格:** 包含五个独特的、高对比度的社论食物和人像摄影的水平序列,每个都贴有品牌支柱标签(例如:大胆、真实、自信、令人垂涎、标志性)。 ### 05 品牌应用 (BRAND APPLICATIONS) - 展示视觉识别在多种媒体上的实际应用: - **产品包装:** 品牌食品桶和盒子的 3D 模型。 - **网站 Hero 区域:** 一个干净的桌面落地页布局,具有强有力的标题、产品图和“立即下单”按钮。 - **移动端应用屏幕:** 显示送餐界面的现代智能手机 UI。 - **社交媒体帖子:** Instagram(1:1 正方形帖子)、Stories(9:16 纵向)和横幅(16:9 宽屏)的模型。 - **文具和户外:** 极简主义的企业名片和极具戏剧性、高冲击力的夜间广告牌广告。 ### 06 设计系统(UI 组件)(DESIGN SYSTEM (UI COMPONENTS)) - **按钮:** 针对主要、次要和文本按钮样式的状态变化(默认、悬停、禁用)。 - **卡片:** 具有高质量图像、标题、价格和促销“今日特惠”标签的食品菜单项 UI 卡片。 - **输入框:** 默认、聚焦和错误状态的文本输入框。 - **导航栏:** 带有徽标、菜单链接和可操作 CTA 按钮的桌面导航栏布局。 - **间距比例:** 一个视觉化的 8pt 网格系统比例,显示递增的内边距块(8px、16px、24px,最高到 96px)。 ### 07 图标系统 (ICONOGRAPHY) - 包含 10 个极简、统一的线条艺术图标的整洁网格,代表核心操作和产品类别:鸡肉、桶、汉堡、薯条、饮料、位置、配送、优惠、账户和收藏。 ### 08 图案与基调 (PATTERNS u0026 MOTIFS) - 五个显示重复品牌资产的矩形样本: - **条纹图案:** 整洁的垂直线。 - **上校/吉祥物图案:** 纯色背景上重复的线条艺术徽标图案。 - **纹理图案:** 微妙的原材料纹理(如木纹或纸纹)。 - **形状基调:** 几何人字形/丝带设计元素。 - **分隔符:** 纤薄、实用的换行符和 UI 指示符。 ### 09 材质与深度 (MATERIAL u0026 DEPTH) - 四个展示物理空间渲染的视觉示例: - **真实阴影:** 投射自然、定向环境阴影的产品包装。 - **纹理表面:** 纸张、纸板和木材等触感材料的特写。 - **反射:** 塑料或玻璃饮料杯上微妙的光泽和抛光效果。 - **图层深度:** 显示深度层次和重叠元素的层级移动应用程序 UI。 ### 页脚引用 (FOOTER QUOTE) - 以一个纯红色强调块结束表格,该块包含公司创始人的大型白色引用块,旁边是品牌吉祥物的整洁矢量线条插图。