Exterior Design-V2

Introduction

This content defines the scope of use of the icons and examples, each icon is divided into areas using different colours

BFBAN logo

WEB - purple

• Logo web-all.png.

  

  ↑ Show examples of different rounded corners

  • Description: Default
  • Usage: Main website
  • Usage examples: Promoting a brand or organisation

• Logo web-all.svg

  • Description: Default, SVG version, automatically recognises dark mode.
  • Usage: Main website
  • Usage examples: Promoting a brand or organisation

information

Here's an example of using svg https://github.com/BFBAN/exterior-design/blob/main/Example/use-icon-web.html ,to
implement the Diablo Tour mode.

• Logo web-community-relaxed.png

  • Description: community, extra wide white space
  • Usage: Main community website
  • Usage examples: Community groups, e.g. QQ group, Kook

APP - Dark Blue

• Logo app-bottom-text-relaxed.png

  1. Wide Logo app-bottom-text-relaxed.png

  2. Narrow border Logo app-bottom-text.png

  • Description: Application width with text at the bottom
  • Usage: application portals or documents, application icons
  • Usage examples: embedded apps, applets, apps for mobile devices, desktop apps

• Logo app-relaxed.png

  • Description: default, wide white space
  • Usage: Main website
  • Usage examples: Promoting a brand or organisation

• Logo app-all.png Description. app-all*.png.

  

  
  

  hint

  ↑ 展示不同圆角例子，在安卓或苹果、鸿蒙系统可能需要切片图标，你可以使用宽体图标来生成

  • Description: Application default
  • Scope of use: application portal or document, application icon
  • Use examples: embedded programs, applets, mobile device programs, desktop programs

Bot - Light blue

• Logo bot-all.png

  1. 风格化2 Logo bot-style2.png

  2. Stylised3 bot-style3.png

  • Description: robot icon, blue background
  • Usage: Robot icon, allows to add third-party organisations or individuals in the bottom right corner.
  • Usage examples: Robot application

• Logo bot-bottom-text.png

  • Description: robot icon, narrow body, bottom image + text
  • Usage: Robot icon
  • Usage examples: 3rd party robots

SDK - red

• Logo sdk-all.png

  • Description: SDK package, plugin icon, red background
  • Usage: Default SDK package icon.
  • Usage examples: Python SDK BFBAN api, (TS/JS) SDK BFBAN api, Dart SDK BFBAN

• Logo sdk.png

  • Description: SDK package, plugin icon, red background, unstylised
  • Usage: SDK package icon, one of the versions provided for styling consistency with web-all.png.
  • Usage examples: Python SDK BFBAN api, (TS/JS) SDK BFBAN api, Dart SDK BFBAN

• Logo sdk-widget.png

  • Description: external widget plugin, red background
  • Usage: Default icon for external widget plugin, available for all plugins with view.
  • Usage examples: (JS)BFBAN player share Widget (Website player share), package view plugin

Usage of Badge Components

WEB

  <img src='https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-web.png?raw=true' width='auto'
       height='40px'/>

• Scope of use: Main site links
• Example of use: Main site

APP

  <img src='https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-app.png?raw=true' width='auto'
       height='40px'/>

• Scope of use: Applications
• Example of use: Application websites

BOT

  <img src='https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-bot.png?raw=true' width='auto'
       height='40px'/>

• Scope of use: Bots
• Example of use: Bot websites

SDK

  <img src='https://github.com/BFBAN/exterior-design/blob/main/Materials/friendly-sdk.png?raw=true' width='auto'
       height='40px'/>

• Scope of use: SDK links
• Example of use: SDK portals, SDK documentation websites

---

Supplementary Instructions

• Everything above belongs to the BFBAN open-source organization, and the right to interpret belongs to them.
• Bottom recommended green color.