---
title: Brand resources
description: Official Sudomimus marks, sign-in button rules, motion guidance,
social cards, and application icons.
editUrl: true
head: []
template: doc
sidebar:
hidden: false
attrs: {}
pagefind: true
draft: false
---
Sudomimus should feel reliable, secure, and intelligent. Its visual system uses
precise celestial-navigation symbols, restrained motion, and a consistent dark
ink and warm ivory palette.
This page is the public usage contract. The downloadable files are generated
from the same canonical geometry used by Sudomimus products.
## Brand promise
The canonical English promise is:
> Authentication, detached from authorization.
The supporting description is:
> Sudomimus is an identity provider and authentication platform for trusted
> application sessions.
Do not describe Sudomimus as a general-purpose API authorization server.
Integrating applications remain responsible for their own roles, permissions,
resources, and business authorization.
## Logo family
| Surface | Symbol | Meaning |
| --- | --- | --- |
| Sudomimus | North star | Fixed, dependable guidance |
| Sudomimus Docs | Constellation chart | Connected knowledge and a mapped path |
| Sudomimus Sign-in | Compass | Finding and confirming a trusted bearing |
| Sudomimus With | Star gate | Passage into account and developer work |
Third-party applications use only the master Sudomimus north star. Product
marks identify first-party Sudomimus surfaces and must not be used to label an
integrating application.
## Responsive marks
Two geometries are provided:
- **Micro** is designed for 12–24 CSS pixels, including sign-in buttons and
compact controls.
- **Standard** is designed for 32 CSS pixels and above, including headers,
presentations, and large brand placements.
Do not shrink the standard geometry as a substitute for the micro mark.
Maintain clear space of at least one quarter of the rendered mark width on
every side. Do not crop, skew, rotate, add a container shape, or combine the
mark with another symbol.
### Downloads
- [Standard north-star SVG](https://sudomimus.com/brand-mark.svg)
- [Micro north-star SVG](https://sudomimus.com/brand-mark-micro.svg)
- [Micro north star for light backgrounds](https://sudomimus.com/brand-mark-micro-on-light.svg)
- [Micro north star for dark backgrounds](https://sudomimus.com/brand-mark-micro-on-dark.svg)
- [North star for light backgrounds](https://sudomimus.com/brand-mark-on-light.svg)
- [North star for dark backgrounds](https://sudomimus.com/brand-mark-on-dark.svg)
- [512 px application icon](https://sudomimus.com/pwa-512.png)
- [512 px maskable application icon](https://sudomimus.com/pwa-maskable-512.png)
- [Open Graph social card](https://sudomimus.com/og-image.png)
Download and self-host the approved asset. Do not hotlink production interface
assets to `sudomimus.com`.
## Color
| Token | Value | Use |
| --- | --- | --- |
| Brand Ink | `#0B1422` | Primary dark field and light-surface mark |
| Brand Ivory | `#EBE4D1` | Primary mark on Brand Ink |
| Brand Slate | `#6E83A6` | Supporting detail |
| Brand Muted Slate | `#34466A` | Ambient detail and dark borders |
| Brand Border | `#1E2A3E` | Dark-field boundaries |
The SVG marks use `currentColor`. Set one approved foreground color on the
containing element; do not recolor individual paths.
## “Sign in with Sudomimus” button
The canonical English label is **Sign in with Sudomimus**. Do not use
“Signin via Sudomimus”, “Continue with Sudomimus”, or abbreviations that remove
the Sudomimus name.
Use a real link or button rather than an image of a button. The minimum contract
is:
- minimum height: `44px`;
- horizontal padding: `16px`;
- micro mark: `20px`;
- gap between mark and label: `10px`;
- label size: `16px`, weight `600`;
- border radius: `8px`;
- visible keyboard focus; and
- a text label that remains available to assistive technology.
```html
Sign in with Sudomimus
```
```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;
}
}
```
The base SVG uses `currentColor`. Use a fixed light- or dark-background export
through ``, or inline the base SVG when it should inherit the button's
`color` directly. When an application uses an explicit theme rather than the
system preference, select the fixed export from that application theme.
Localized interfaces may translate the label naturally. The approved
Simplified Chinese label is **使用 Sudomimus 登录**.
## Motion
Brand motion is short, precise, deterministic, and one-shot. It resolves into
the exact static mark and honors `prefers-reduced-motion`. Third-party sign-in
buttons should remain static; do not add spinning, pulsing, bouncing, particle,
or loading behavior to the Sudomimus mark.
## Social cards and application icons
Sudomimus social cards use `1200 × 630` PNG output. Application icons are
provided at `192 × 192` and `512 × 512`, plus a `512 × 512` maskable version.
The maskable export includes the required safe-zone inset and must not be
re-cropped by hand.
Each first-party Sudomimus surface publishes its own related product symbol in
its favicon, social card, and web app manifest. Third-party applications should
use their own application identity; they should use the Sudomimus north star
only inside the sign-in affordance.
## Incorrect usage
Do not:
- redraw or trace the mark;
- add a central circle, internal axes, gradients, shadows, or glow;
- stretch, skew, or rotate the mark;
- place text inside the mark;
- animate a third-party sign-in button indefinitely;
- use a first-party product mark for an integrating application; or
- imply that Sudomimus endorses or owns the integrating application.
