SUISUINIAN · IDENTITY · GUIDELINES

Brand Guidelines

Production spec for the Async Loop mark — SVG source, clearspace rule, color, motion, and don'ts. This page can serve as a single-pager handoff. stroke 160 is the master version; sizes ≤32px automatically switch to the stroke-200 small variant.

01 SVG source · single source of truth · 1024 master

<!-- suisuinian mark · master 1024×1024 · stroke 160 -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 1024 1024"
     width="1024" height="1024">
  <path d="M 232 512 A 280 280 0 0 1 792 512"
        fill="none" stroke="currentColor" stroke-width="160"/>
  <path d="M 200 564 A 280 280 0 0 0 760 564"
        fill="none" stroke="currentColor" stroke-width="160"/>
  <circle cx="496" cy="538" r="70" fill="currentColor"/>
  <circle cx="496" cy="538" r="23" fill="var(--bg, #FFFFFF)"/>
</svg>

All color is driven by currentColor; use color: #E85A6E in CSS for the coral variant. The inner knockout circle uses var(--bg) for dark-background adaptation (set --bg: #0A0A0C when on dark). At ≤32px, swap to stroke 200 · axis r 80/26.

02 Clearspace rule · x = half the arc stroke

Clearspace

Minimum clearspace = x (half the arc stroke — on the 1024 grid, that's 80px).
Within x of the mark, nothing else may sit — no type, button, sibling logo, or decoration.
When placed inside a squircle / button / rounded container, the inner padding must be at least 1.5 × x.

03 Color spec · coral is a scarce resource

Coral · Light

#E85A6E

primary on light surfaces

Coral · Dark

#F47D8E

lifted variant on dark

Label · primary

#0A0A0C

body text · default mark

Label · secondary

#3A3A3C

78% black

Surface

#FAFAF7

brand canvas · warm white

Inverse

#FFFFFF

for dark-background marks

04 Motion · two patterns only — don't invent new ones

① Reveal · 280ms ease-out

Axis pops first → upper arc draws from left to right → lower arc draws from right to left. Total 280ms (in-app) or ~1.4s for web heroes. Used only on app launch, empty states, and brand intros.

② Processing pulse · 1.6s loop

Axis opacity oscillates 0.5 ↔ 1, arcs stay still. Reads as «the vault is processing». Reserved for system status and menu-bar states.

05 Don't · any of these fails the brand review

Don't rotate

the resting form is already symmetric

Don't stretch

the arc ratio carries the meaning

No gradients

a single brand color plus neutrals

No drop shadows

flat is core to the tool aesthetic

Don't split-color

arcs and axis share one color

Don't thin the stroke

stroke 160 is locked to the mark

No outer frame

collides with the system squircle

Not on busy backgrounds

clearspace ≥ x is the floor

06 Do · approved usages

Black on white

default · docs · web header

Coral on white

brand accent · posters · launches

White on black

dark mode / dock

White on coral

AppIcon promo · splash

07 File delivery · for engineers / designers / print

mark.svg 1024 master · stroke 160 · currentColor mark-small.svg ≤32px · stroke 200 · axis r 80/26 mark-black.svg exported · #0A0A0C mark-white.svg for dark backgrounds · #FFFFFF mark-coral.svg locked to #E85A6E appicon-1024-coral-on-white.pngprimary AppIcon · iOS / macOS appicon-1024-white-on-coral.pnglaunch promo appicon-1024-dark.png dark dock variant lockup-horiz.svg mark + suisuinian + 碎碎念 lockup-vert.svg stacked · for narrow contexts og-1200x628.png OG / Twitter card guidelines.pdf this page · exported

08 Third-party use · press, fan work, podcast covers

The suisuinian mark (Async Loop) identifies suisuinian. When referencing it in partnerships, press, fan work, podcast covers, or community talks, please follow the clearspace, color, and motion rules on this page, and keep the geometry intact. Commercial use: email hello@ccwu.cc first. Community and editorial use is welcome without permission; we reserve the right to ask for adjustments.