Design kit

Create and collect digital art, Real World Assets and phygital pieces on-chain, from a painting that ships to a work written in code and rendered live from its seed. Everything below is cleared for press and partner use, logo, colours, type, design values and the full guidelines.

Assets

Download

Brand guidelines, landscape (PDF)Logo, colour, type, components, press Brand guidelines, A4 portrait (PDF)Same guide, portrait format for print Design values, Tokens StudioImport into Figma via the Tokens Studio plugin Design values, W3C (DTCG)Style Dictionary / any DTCG-aware tool Design system, MarkdownFull charter + copy-paste Tailwind/CSS for other apps Logo, spectrum mark (SVG)Primary mark · scroll down for the full logo set

These design values mirror the live app (Tailwind + CSS variables). In Figma, use the Tokens Studio file with the free Tokens Studio plugin to generate colour & text styles and variables.

Logo

The wave mark

Spectrum · primary

Mono

White · on dark

Keep clear space of at least the mark's inner-loop height on all sides.
Pair the mark with the wordmark artsunami, always lowercase.
Use black, white, or the brand spectrum only.

Don't

Recolour, rotate, stretch, or add shadows to the mark.
Set the wordmark in another typeface or capitalise it.
Place the spectrum mark on a busy, low-contrast background.

Download, black & white on transparent

Full lockup, blackIcon + wordmarkSVG PNG

Full lockup, whiteIcon + wordmark, on darkSVG PNG

Icon, blackMark onlySVG PNG

Icon, whiteMark only, on darkSVG PNG

Full lockup, spectrumSpectrum mark + dark wordmark (light bg)SVG PNG

Full lockup, spectrum on darkSpectrum mark + white wordmark (dark bg)SVG PNG

Icon, spectrumMark only, brand gradientSVG PNG

Colour

Palette

Click a swatch to copy its hex.

Ink, neutral ramp

Accent & semantic

Surfaces & glows

Brand spectrum

Typography

Type

Mozilla Headline

Headings (H1–H3). Self-hosted variable font, weight 200–700 axis; brand uses 800–900.

--font-display

Outfit

Body, UI, addresses and piece numbers (font-mono maps here too, to stay on brand mid-paragraph). Weights 400 / 500.

--font-sans

Silkscreen

Reserved for the Beatsnack partner wordmark. NOT part of the artsunami scale.

--font-pixel

Display / H1

display · 900

Generative art, live

Heading / H2

display · 900

Each piece a unique seed

Subhead / H3

display · 800

Rendered in the browser

Body

sans · 400

Release digital art, Real World Assets and phygital pieces, each with its on-chain certificate.

Body medium

sans · 500

Self-custody. Verifiable authenticity. Creator royalties.

Label / eyebrow

sans · 700

AUTHENTICITY CERTIFICATE

Root font-size 17px. Headings use fluid clamp(); the global corner radius is 2px (avatars are the one round exception).

Press

Boilerplate & facts

Boilerplate

artsunami is the social home of on-chain art. Artists publish digital art (images, video, animation), Real World Assets and phygital pieces (a physical work shipped with its on-chain certificate of ownership) and coded art, where every piece is a unique seed rendered live in the browser rather than a stored image. There is no subscription and no custody: keys and funds stay with the creator, and every release carries a public authenticity certificate. Collectors mint and own directly, with creator royalties honoured on resale.

One-liner

Create and collect digital art, Real World Assets and phygital pieces on-chain, from a painting that ships to a work written in code and rendered live from its seed.

At a glance

Digital art, Real World Assets and phygital pieces, each with its on-chain certificate of ownership.
Self-custody, artsunami never holds creator keys or collector funds.
Every release ships a public, verifiable authenticity certificate.
No subscription; creators keep royalties on secondary sales.

Foundations

Elevation & motion

shadow.soft

shadow.card

shadow.cardHover

shadow.glow

Single brand easing cubic-bezier(0.22, 1, 0.36, 1) (ease.swift) on every transition; durations 300ms / 500ms. Motion respects prefers-reduced-motion.