Media Kit

    Brand assets and guidelines for doba. Everything below reflects the live design system.

    Boilerplate

    Pre-approved copy at every length — quote it verbatim. The name is always lowercase: doba. Never "Doba", "DOBA", or "Doba Protocol" in copy; "doba protocol" only when the technical context demands it.

    Tagline — bios & captions

    "100 invested fans outperform 100,000 streams."

    One-liner — press & headlines

    "doba is the only marketplace where artists upload their music and get paid instantly once their music is collected. Everything is settled on-chain."

    Paragraph — about sections

    "Artists release music as fan-owned digital assets. No distributors, no payout thresholds, no rented audiences."

    Short form — social & footers

    "made with love, by doba"

    doba logo on light
    doba logo on dark
    doba markdoba
    doba markdoba
    doba banner
    Logo PNG Banner PNG
    • Maintain clearspace around the logo equal to at least half the logo's width on all sides.
    • Minimum size: 24 px digital, 10 mm print. Below that, the mark loses legibility.
    • The mark may stand alone; the lowercase wordmark should always accompany it at first mention.
    • The lockup pairs the mark with "doba" set in Chivo ExtraBold, lowercase, tight tracking — never any other typeface.

    Colors

    Cyber Pink

    Primary action — collect, buy, active states

    #FF1F8A

    RGB 255 / 31 / 138 · HSL 330 / 100% / 56%

    Lavender

    Accent — secondary CTAs, labels, highlights

    #B794F4

    RGB 183 / 148 / 244 · HSL 263 / 85% / 77%

    Midnight

    Dark surface base, light-mode text

    #0D0D12

    RGB 13 / 13 / 18 · HSL 240 / 17% / 5%

    Paper

    Light surface base, dark-mode text

    #FAF9F6

    RGB 250 / 249 / 246 · HSL 60 / 33% / 98%

    Functional Colors

    Pink 600

    Light-mode indicators (visualizer, active)

    #DB2777

    Purple 600

    Light-mode lavender text (artists, tickers)

    #9333EA

    Emerald 500

    Collected / success states

    #10B981

    Red 400

    Warnings & inline errors

    #F87171

    Gradients

    Brand Gradient

    Headlines & gradient text — cyber-pink through lavender.

    from #FF1F8A via #B794F4 to #FF1F8A

    .gradient-text · 8s shimmer loop

    Ambient Background

    Page backdrop on every surface — flat base + two blurred orbs over a soft band.

    band #EDE4F9 / #140B19

    orbs: cyber-pink 20/10% · lavender 30/5%

    Rule: gradients are atmospheric, never informational. Text never sits on the brand gradient except as .gradient-text display type.

    Typography

    Chivo

    AaBbCc 0123

    UI & body copy

    Light 300 · Regular 400 · Bold 700 · Black 900

    Fallback: Arial, sans-serif

    Space Mono

    AaBbCc 0123

    Display & brand moments

    Regular 400 · Bold 700

    Fallback: ui-monospace, monospace

    IBM Plex Mono

    AaBbCc 0123

    Data — addresses, hashes, code

    Regular 400 · Medium 500 · SemiBold 600

    Fallback: ui-monospace, monospace

    Iconography

    Library

    @tabler/icons-react — the only icon set across every doba surface. Never mix in lucide, heroicons, or inline SVGs.

    16 · 18 · 22 · 24

    Conventions

    • 14 px inline labels · 16 px nav & buttons · 18–20 px list items · 22 px header icon buttons · 24–28 px feature & playback
    • Default stroke for UI icons; stroke={1.5} for social brand marks
    • Icon buttons: p-2 rounded-md + hover wash; active states in cyber-pink
    • One custom mark only: DobaVisualizer (the playing indicator)

    Layout

    Breakpoints

    sm 640 · md 768 · lg 1024

    Mobile-first; the dashboard shell pivots at lg.

    Containers

    App content: max-w-7xl · Home: max-w-4xl (text) / max-w-6xl (hero)

    Shell padding: px-4 sm:px-6 lg:px-8

    Pill Shell

    Header, sidebar & player float as frosted-glass pills:

    .glass-surface + 60/50% tint + rounded-2xl + shadow-xl

    No full-bleed slabs, no shell edge borders.

    Rhythm

    4px spacing scale · cards p-5 to p-6

    Sections: space-y-6 to space-y-10 · radius --radius: 0.75rem

    Link Previews

    • RULE 1 Every shareable URL ships Open Graph + Twitter metadata: site-wide defaults in the root layout, per-track overrides on song pages.
    • RULE 2 Image URLs are always absolute — resolved via metadataBase (app.doba.world) or hardcoded origin. Never relative.
    • RULE 3 Site image: the composed default card (doba-og.png, 1200×630 — mark, wordmark, tagline on the brand background). Track pages: a composed 1200×630 share card (cover, title, artist, price on the brand background), generated per track via opengraph-image.tsx.
    • RULE 4 Required fields: title, description, image, type, url, siteName, twitter:card = summary_large_image, @doba_DAO.

    Usage Guidelines

    By Screen Size

    Phone < 640px

    • Mark alone is fine in tight headers (min 24 px)
    • Single-column cards, full-width pills (12 px inset)
    • Drawers become full-page sheets below the header

    Tablet 640–1024px

    • Prefer the lockup (mark + wordmark)
    • Two-column grids open up
    • Pills keep 12 px insets

    Desktop > 1024px

    • Full lockup; mark at 32 px in the header pill
    • Multi-column grids; sidebar & panel pills visible (16 px insets)
    • Ambient background orbs fully visible — keep surfaces glass so they read through

    Do's & Don'ts

    • DO use only the brand colors above.
    • DO keep the clearspace and minimum sizes.
    • DO place the mark on Midnight or Paper surfaces for full contrast.
    • DO write "doba" lowercase, always.
    • DON'T stretch, rotate, recolor, or add effects to the logo.
    • DON'T use the wordmark without the mark.
    • DON'T revive the retired angular/clip-path visual language — the system is rounded glass.
    • DON'T imply partnership or endorsement without written agreement.

    Press, partnerships, or asset requests: reach us on Discord or X.