---
title: 品牌资源
description: Sudomimus 官方标志、登录按钮规范、动效指南、社交卡与应用图标。
editUrl: true
head: []
template: doc
sidebar:
  hidden: false
  attrs: {}
pagefind: true
draft: false
---

Sudomimus 应当给人可靠、安全、聪明的第一印象。视觉系统使用精密的天体导航符号、克制的动效，以及统一的深墨色与暖象牙色。

本页是公开使用规范。所有可下载文件均由 Sudomimus 产品使用的同一套权威几何定义生成。

## 品牌承诺

标准中文品牌承诺是：

> 让身份认证与业务授权彼此解耦。

标准辅助说明是：

> Sudomimus 是为可信应用会话而设计的身份提供方与身份认证平台。

请勿将 Sudomimus 描述为通用 API 授权服务器。集成方应用仍负责自身的业务角色、权限、资源与授权策略。

## 标志家族

| 表面 | 符号 | 含义 |
| --- | --- | --- |
| Sudomimus | 北极星 | 固定而可靠的指引 |
| Sudomimus Docs | 星图 | 相互连接的知识与清晰路径 |
| Sudomimus Sign-in | 罗盘 | 寻找并确认可信方位 |
| Sudomimus With | 星门 | 进入账户与开发者工作的通道 |

第三方应用只能使用 Sudomimus 主品牌北极星。产品标志用于区分 Sudomimus 第一方表面，不得用来标记集成方应用。

## 响应式标志

系统提供两套几何：

- **Micro** 为 12–24 CSS 像素设计，适用于登录按钮和紧凑控件。
- **Standard** 为 32 CSS 像素及以上尺寸设计，适用于页头、演示文稿和大型品牌位置。

不要用缩小 standard 的方式代替 micro。标志四周至少保留标志宽度四分之一的净空。不得裁切、拉伸、倾斜、旋转、添加容器形状或与其他符号拼接。

### 下载

- [Standard 北极星 SVG](https://sudomimus.com/brand-mark.svg)
- [Micro 北极星 SVG](https://sudomimus.com/brand-mark-micro.svg)
- [用于浅色背景的 Micro 北极星](https://sudomimus.com/brand-mark-micro-on-light.svg)
- [用于深色背景的 Micro 北极星](https://sudomimus.com/brand-mark-micro-on-dark.svg)
- [用于浅色背景的北极星](https://sudomimus.com/brand-mark-on-light.svg)
- [用于深色背景的北极星](https://sudomimus.com/brand-mark-on-dark.svg)
- [512 像素应用图标](https://sudomimus.com/pwa-512.png)
- [512 像素 Maskable 应用图标](https://sudomimus.com/pwa-maskable-512.png)
- [Open Graph 社交卡](https://sudomimus.com/og-image.png)

请下载并自行托管获准使用的资产。生产界面不要直接引用 `sudomimus.com` 上的文件。

## 颜色

| Token | 数值 | 用途 |
| --- | --- | --- |
| Brand Ink | `#0B1422` | 主深色背景与浅色表面标志 |
| Brand Ivory | `#EBE4D1` | Brand Ink 背景上的主标志颜色 |
| Brand Slate | `#6E83A6` | 辅助细节 |
| Brand Muted Slate | `#34466A` | 环境细节与深色边框 |
| Brand Border | `#1E2A3E` | 深色背景边界 |

SVG 标志使用 `currentColor`。请在容器上设置一种获准的前景色，不要分别修改内部路径颜色。

## “使用 Sudomimus 登录”按钮

标准中文文案是 **使用 Sudomimus 登录**。英文界面使用 **Sign in with Sudomimus**。不要使用 “Signin via Sudomimus”、删除 Sudomimus 名称的缩写或含义模糊的替代文案。

请使用真实链接或按钮，不要使用按钮截图。最低规范为：

- 最小高度：`44px`；
- 水平内边距：`16px`；
- Micro 标志：`20px`；
- 标志与文字间距：`10px`；
- 字号：`16px`，字重 `600`；
- 圆角：`8px`；
- 提供清晰的键盘焦点；
- 文本标签始终可被辅助技术读取。

```html
<a class="sudomimus-sign-in" href="/auth/sudomimus">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="/assets/sudomimus-mark-micro-on-dark.svg" />
    <img src="/assets/sudomimus-mark-micro-on-light.svg" alt="" width="20" height="20" />
  </picture>
  <span>使用 Sudomimus 登录</span>
</a>
```

```css
.sudomimus-sign-in {
  align-items: center;
  background: #ffffff;
  border: 1px solid #b7c0ce;
  border-radius: 8px;
  color: #0b1422;
  display: inline-flex;
  font: 600 16px/1 system-ui, sans-serif;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
}

.sudomimus-sign-in picture {
  display: contents;
}

.sudomimus-sign-in img {
  display: block;
  flex: none;
}

.sudomimus-sign-in:focus-visible {
  outline: 3px solid #6e83a6;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  .sudomimus-sign-in {
    background: #0b1422;
    border-color: #34466a;
    color: #ebe4d1;
  }
}
```

基础 SVG 使用 `currentColor`。通过 `<img>` 加载时，请根据按钮背景选择固定浅色或深色导出；内联基础 SVG 可以直接继承按钮的 `color`。如果应用使用独立于系统偏好的显式主题，应当根据应用主题选择固定导出。

## 动效

品牌动效应当短暂、精密、确定且只播放一次，并落定为完整静态标志，同时遵守 `prefers-reduced-motion`。第三方登录按钮应保持静态，不要为 Sudomimus 标志添加旋转、脉冲、弹跳、粒子或加载动画。

## 社交卡与应用图标

Sudomimus 社交卡使用 `1200 × 630` PNG。应用图标提供 `192 × 192`、`512 × 512` 以及 `512 × 512` Maskable 版本。Maskable 导出已经包含安全区，不得手动再次裁切。

Sudomimus 每个第一方表面会在 favicon、社交卡与 Web App Manifest 中使用各自相关但不同的产品符号。第三方应用应使用自己的应用身份，只在登录入口内使用 Sudomimus 北极星。

## 错误用法

请勿：

- 重新描绘或临摹标志；
- 添加中心圆、内部轴线、渐变、阴影或发光；
- 拉伸、倾斜或旋转标志；
- 在标志内部放置文字；
- 让第三方登录按钮无限循环播放动画；
- 用第一方产品标志代表集成方应用；
- 暗示 Sudomimus 为集成方应用背书或拥有该应用。