Dropashot

    Brand

    Dropashot, in one place.

    The mark, the colors, the type and the few rules that keep the interface quiet. Everything on this page is what the product itself uses, so it stays true by construction.

    Mark
    Droplet with a shutter
    Type
    Inter · JetBrains Mono
    Accent
    #1dc4b6

    Mark

    Dropashot
    Dropashot
    Lockup
    The mark sits left of the wordmark, centred on the cap height, with a gap of a third of the mark’s width. The wordmark is Inter Semibold with tight tracking, never all caps.
    Clear space
    Keep a margin of half the mark’s width on every side. Minimum size is 16 px for the mark and 24 px for the lockup.
    Don't
    Recolor the gradient, flatten it to one color, add an outline, rotate it, or set it on a busy photo. The old Picyard green and its logo are retired.
    Download: icon.svg, icon-512.png, og.jpg.

    Color

    Gradient

    Light

    Dark

    Accent
    Used for the one action that matters, the lifetime meter, verified states and selection. Never for decoration, backgrounds or large areas.
    Grey
    Hairlines at 8% ink, strong hairlines at 14–16%. Muted for secondary text, faint for metadata. No other greys.
    Light and dark are two tokens sets with the same names, so a component never checks the theme. Click a swatch to copy its hex.

    Type

    Display

    Screenshots, finished.

    ds-display · 40–64 px · 600

    Title

    One payment. The price rises as seats fill.

    ds-title · 24–34 px · 600

    Lede

    Drop a photo or screenshot, drag the crop box, download a PNG.

    17 px · 400 · muted

    Body

    The crop is cut from the original pixels, so nothing is resampled or recompressed.

    15–16 px · 400

    Eyebrow

    How it works

    ds-eyebrow · 12 px · 600 · tracked

    Label

    Width (px)

    12–13 px · muted

    Mono

    POST /api/v1/screenshot · das_live_…

    JetBrains Mono · 12.5–13 px

    Inter is declared at the root so portals, toasts and exports inherit it. Code and values use JetBrains Mono.

    Components

    Buttons

    ds-btn with primary, ghost or accent. 3 px radius. One filled button per surface.

    Field

    A single underline. Focus turns the line to ink. No boxes.

    Segmented

    ImageCodePost

    Exclusive choices. The active cell is filled with ink.

    Meter

    $40 · 1,000$80 · 2,000

    A thin track, accent fill, tabular labels.

    Keys & links

    Press ⌘ V to paste, or choose a file.

    Shortcuts in ds-kbd. Links underline in border color and darken on hover.

    Live elements from the design system. If one here looks wrong, it is wrong in the product.

    Principles

    1. 01

      Structure over containers

      Layout, hairlines and type do the work. No cards, panels or boxes unless something must be contained.

    2. 02

      One filled action per surface

      A single primary or accent button per view. Everything else is a ghost button or a text link.

    3. 03

      Near-square radii

      1–3 px on controls, 4 px on rare surfaces. Nothing is a pill and avatars are the only circles.

    4. 04

      Progressive disclosure

      Show six choices, keep the rest behind “All”. Sections collapse with a caret and a summary.

    5. 05

      Quiet accent

      Teal marks the one thing that matters: the action to take, the state to notice, the meter's progress.

    6. 06

      Numbers are tabular

      Dimensions, prices and counts use tabular figures so columns and meters stay aligned.

    Voice

    Say what it does
    “Crop an image online, free.” not “The ultimate cropping experience.”
    Short sentences
    One idea each. No exclamation marks, no emoji in product copy.
    Second person, present tense
    “Drop a screenshot” rather than “Users can upload screenshots.”
    Honest about privacy
    “Runs in your browser. Nothing is uploaded.” appears wherever it is true, and nowhere it isn’t.

    Questions about usage: contact. Brand strings live in src/brand.js; tokens in globals.css.