The wordmark
Use the complete Supasaito logo when introducing the company. Keep the supplied spacing between the mark and name.
Visual brand guide
Supasaito
The Supasaito mark, colours and motion. A practical reference for designers, partners and anyone presenting Supasaito.
One mark. A consistent identity.
A rounded rhombus, tilted 23.44° clockwise. Keep its shape, rounded tips and proportions in every version.
The standalone mark
Use the gradient mark on light or dark backgrounds. Blue and white versions cover single-colour applications.
The app icon
The white mark on a blue tile is for browser tabs, app icons and avatars. Use the supplied sizes.
Write the name consistently
Brand: Supasaito. Japanese: Supasaito（スーパーサイト）. Company: Supasaito株式会社; English company name: Supasaito Inc.
The logo in context
Choose the asset for its background. These are examples of placement, not additional logo variants.
Give the mark room
Keep a clear area of at least half the mark’s width around a standalone mark. Do not place text or graphics in this area. Preserve the supplied spacing within the full logo.
Small sizes
Use a static mark from 16 px. For small marks below 20 px on dark or busy backgrounds, use white. Small in-product loading indicators are a separate exception.
Supasaito blue
The logo uses a radial gradient from the centre. Light backgrounds have a light core and dark edge; dark backgrounds use a dark core and light edge.
Brand blue
#0082FCAccessible blue
#0068CADeep blue
#0053A1Light blue
#8AC5FFDark navy
#001F3DLight background
#57ACFF → #0082FC → #0053A1
Dark background
#0068CA → #2996FC → #8AC5FFUse #0068CA behind small white button labels and for small accent text on white. Keep gradients inside the mark; interface surfaces stay solid.
Full blue scale
#F0F7FF#E0EFFF#B8DCFF#8AC5FF#57ACFF#2996FC#0082FC#0068CA#0053A1#003B73#001F3DA mark with a purpose
Static by default. Motion communicates a state: available, responding or working. Preview each behaviour below.
Reduced motion is enabled. All examples stay static.
Static
Documents, favicons and interfaces with no active process.
Default stateBreathing
A quiet product status: available and connected. Scale 1 → 1.16 → 1.
Shimmer
Light moves through the mark while the shape stays still. A restrained hero accent.
Turn
One complete turn in response to an event, then back to rest.
Working · light
Breathing, shimmer and turn together, only while an AI task is running.
Working · dark
The same working state with a dark core and a light edge.
One shared 1.7-second cycle. The turn occupies 88% of the cycle, followed by a short hold. These previews stop automatically; in the product, working motion stops when the task ends.
Keep the identity intact
- Keep the 23.44° tilt, rounded tips and original proportions.
- Use the light or dark gradient that matches the background.
- Use the supplied blue or white version for one-colour reproduction.
- Do not redraw, stretch, recolour or add shadows to the logo.
- Do not replace the radial gradient with a linear one.
- Do not run the full working animation as an endless decoration. Honour reduced-motion preferences.
Implementation details
Static viewBox: −64 −64 128 128. Working viewBox: −68 −68 136 136. Round the tips with a matching fill/stroke, stroke-width 20 and round joins. Radial gradients use cx/cy 50%, r 65%, with stops at 0%, 55% and 100%. Give scaling and rotation separate nested groups, with transform-box: fill-box and transform-origin: center.
Ready-to-use assets
SVG and transparent PNG logos and marks; app icons and favicons; English and Japanese visual guidelines; an offline interactive motion reference. PNG lockups are exported at 4×. SVG wordmarks retain editable text and use the supplied system-font stack.
Download the complete brand kit