Developer platform / Brand guidelines

tattoo.dev

The developer platform for tattoo artists, studios and studio software. TattooAPI is the API product.

tattoo.devtattoo.dev / Identity v1

Story

The developer platform for tattoo software.

tattoo.dev is the platform. TattooAPI is the API product. Tattoo Company is the parent company. Keep those roles distinct in documentation, product navigation and partner materials.

The platform brings tattoo-specific discovery and data infrastructure into the tools developers build. Its audience is developers, studio software teams and people connecting tattoo workflows to apps, command-line tools and agents.

Purpose, not a new origin story

Tattoo work has its own vocabulary, relationships and context. Developer tools should respect those details rather than flatten artists and studios into generic records. Do not state launch dates, coverage counts or service guarantees.

Principles

Be precise. Name the interface, the input and the result. Make limitations as legible as capabilities.
Keep the work human. Software supports the artist; it does not replace their authorship.
Make the next step clear. Examples should help a developer understand a task, not decorate a page.
Earn technical trust. Document actual behavior. Do not turn a roadmap into a release announcement.

One family, one direction

The chrome gothic Tattoo Company monogram is the tattoo.dev mark. Do not use older candidate marks in new lockups. Do not use “Tattoo Developers” as a product or platform name.

The visual direction is black, restrained chrome, Inter and a single Playfair Display italic accent word per headline. Site gold is the accent. Do not use the older docs gold, lime or blue surfaces.

Language

Precise enough to build with.

Write for someone trying to understand an interface. Lead with the task and explain the constraint. Prefer concrete nouns and active verbs to launch language.

Narrative threads

Tattoo-specific primitives. Explain artists, studios, portfolios and discovery in their actual context.
From an interface to useful work. Show how a documented capability fits into an app or workflow, without claiming that every integration already exists.
Human craft, technical clarity. Give developers useful structure while respecting the artist and their work.

Naming & vocabulary

Use tattoo.dev for the platform and TattooAPI for the API product. Say “API documentation” when referring to docs. Do not revive “Tattoo Developers,” or use TattooAPI as the name of the whole company.

Use tattoo artist, studio, portfolio, discovery, interface, request and response where they describe the actual task. Distinguish an API request from a client's appointment request. Explain acronyms on first use unless the page is explicitly a technical reference.

Do

Say what a documented endpoint or tool does, and what it does not do.
Label sample data and illustrative output as examples.
Keep code, command names and parameters exact.
Use calm, credible technical language. A useful example is stronger than a superlative.
Identify Tattoo Company as the parent when that relationship matters.

Don't

Promise universal coverage, guaranteed availability or unsupported integrations.
Describe roadmap items as shipped capabilities.
Promise bookings, deposits, payouts or payment protection.
Imply that an AI agent makes the tattoo or owns the artist's work.
Reintroduce the old lime/mint or partner-console blue as the platform identity.

Tone in practice

Use: “Explore the API documentation.” Avoid: a claim that one integration instantly runs every part of a studio.

Use: “Example response.” Avoid: presenting synthetic artists, counts or results as real platform activity.

Brand questions: hello@tattoo.co.

03 / Identity

Our mark. Unmistakably ours.

The original chrome gothic T connects this brand to Tattoo Company. Lead with chrome; flat marks are secondary, not replacement logos.

Preserve the silhouette. Give it room.Source asset ↓

Chrome primary · 1000px master

Use the 1000px chrome master wherever possible. Use the flat versions at small sizes and where raster artwork is not allowed.

Chrome master · 1000px ↓

Secondary artwork

One-color / small-size / single-ink use

Use the flat versions for favicons, embroidery, stamps, tiny sizes and one-color print. Choose black or white for contrast; use supplied gold only where the brand permits it. These are not the primary chrome logo.

Single ink

Use the chrome primary wherever possible; use flat versions at small sizes.

Use the files in the kit as supplied. Do not redraw or recompose the mark.

Room to breathe

Clear space: one quarter of the logo height on each side. Chrome minimum: 48px. Flat mark minimum: 16px, using the supplied favicon artwork.

Keep the character

Do not stretch, rotate, add a glow or redraw the mark. Do not place it over busy photography. Use the supplied light, dark and mono variants.

04 / Palette

Restraint is recognition.

Every swatch below comes from this brand’s token file. Semantic colors describe states; they are not permission to add decoration.

background

bg soft

raised

raised 2

text

gold

light gold

light background

light bg soft

light raised

light raised 2

light text

Color & shape rules

Gold #FFD230. Pill buttons (999px), 16px cards.

Shape system

Pill buttons (999px), 16px cards.

Download resources ↓

Download design tokens ↓

05 / Typography

Let the words do the work.

Body and UI; headings 300, tracking −.03em300, 400, 500

Made for the craft.

Inter ↗

Italic accent; at most one word per headline400 italic

Every detail matters.

Playfair Display ↗

Eyebrows and code400, 500

ID 0042 / 09:41

System monospace ↗

Use with intention

Inter carries the system. Playfair Display italic may accent at most one word per headline. Keep the rest clear and restrained.

Avoid

No substitute display fonts, artificial stretching or decorative effects. Preserve readable line lengths and at least 4.5:1 contrast for body text.

Fonts are self-hosted on this site. Kit font documentation links to Google Fonts and SIL Open Font License sources.

06 / Art direction

The work comes first.

Photography principle

Real work.
Honest detail.
Human craft.

Use only licensed portfolio imagery.

Do

Show the whole piece. Use natural detail and honest skin tones. Show healed work when available, with artist and client permission. Keep labels outside the image.

Don’t

Do not generate fake tattoo work, reshape a piece, over-retouch skin or imply permission. Avoid blood, raw-skin close-ups and medical claims.

Icons

Use simple, consistent line icons. Label unfamiliar actions. The monogram is a brand signature, never a generic interface icon.

Data visualization

Use neutral values first. Reserve semantic colors for labeled states, never color alone. Use only sourced data; clearly label illustrative examples.

07 / Plain text

Identity, at the prompt.

A raster-derived text interpretation for terminals, READMEs and plain-text environments. 40- and 80-column versions travel in the kit.

tattoo.dev — raster-derived ASCII

40 columns
                   '~~
                  '#@*
                  :&*:
                  ;:
    '~+***********xo*******++++++++++++'
  .=&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@o`
 ;#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%;
 `,,,,,,,,,,,,,,:~##~:,,,,,,,,,,,,'
              .~%`-:
             ;#@@:;`    ..
            `@@@@:;`    *=
          :.,@@@@:;`.,~%@@x-`
        ,*` ,@@@@:;`.,~%@@x-`
      '*#`  ,@@@@:;`    *=   ~%:
     ~&&,   ,@@@@:;`    ..  :@@@o'
   :%@@=    ,@@@@:;`        o@@@@&~
 `o@@@@'    ,@@@@:;`        =@@@@@@%,
,&@@@@#     ,@@@@,;`        .%@@@@@@@+.
=@@@@@@.    ,@@#; ;+.        '*@@@@@@@#.
o@@@@@@~    ,&=.  ;@%:         :%@@@@@@;
+@@@@@@&,   .'    ;@@@*.        .=@@@@#'
:@@@@@@@&;        ;@@@%`          -@@+.
 o@@@@@@@@o`      ;@&~            =x,
 .o@@@@@@@@@o:    ;o'           :+;
   ~&@@@@@@@@@#+;';`         ,=o~
    '=#@@@@@@@@@@@@%o+===+o%&x-
       :+%@@@@@@@@@@@@@@@@%=`
          ';=*x%#@@@@%*=;.
                 ,%o'
                  `.

80 columns
                                         .;.
                                       :o&@,
                                      +@@@@:
                                     ;@@@@@,
                                     =@@@&x'
                                     =@x;.
                                     +o
                                     +;
            .````````````````````````o~````````````````````````````'''''''''''.
         ;o#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@#:
       ,%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&=.
     '*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@o`
    ~&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%:
  :%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&x-
  :;;;;;-------------------------=*#@@@@#*~~-----------------------;:.
                                   .+@@-
                               ,*o`  %+
                             '+@@@-  o;
                            ~&@@@@~  *;
                          :%@@@@@@~  *;          `'
                         :@@@@@@@@=  *;          x=
                         ;@@@@@@@@=  *;         +@@-
                     ..  -@@@@@@@@=  *;       ;%@@@@x:
                    ~+.  -@@@@@@@@=  +;  `:~*&@@@@@@@@#*-:.
                  :%+    -@@@@@@@@=  +;  ':~*#@@@@@@@@%+-,.
                'o@~     -@@@@@@@@=  +;       ;%@@@@x:
               ~&@~      -@@@@@@@@=  +;         +@@~       :x~
             :%@@~       -@@@@@@@@=  +;          x+       -@@@%,
           `o@@@*        ~@@@@@@@@=  +;          ''      ,&@@@@@*'
         .+&@@@%.        ~@@@@@@@@=  +;                  %@@@@@@@#-
        -#@@@@@,         ~@@@@@@@@=  +;                 ,@@@@@@@@@@x`
      ,x@@@@@@o          ~@@@@@@@@=  +;                 -@@@@@@@@@@@&=.
    .+@@@@@@@@;          ~@@@@@@@@=  +;                 ,@@@@@@@@@@@@@%:
   ~&@@@@@@@@&.          ~@@@@@@@@=  +;                  x@@@@@@@@@@@@@@*'
 '%@@@@@@@@@@x           ~@@@@@@@@=  +;                  `&@@@@@@@@@@@@@@&~
 +@@@@@@@@@@@x           ~@@@@@@@@;  +;                   -@@@@@@@@@@@@@@@@%,
 %@@@@@@@@@@@#           ~@@@@@@%:   +~                    :#@@@@@@@@@@@@@@@@~
.@@@@@@@@@@@@@,          ~@@@@&=     +@*'                   .=&@@@@@@@@@@@@@@@:
:@@@@@@@@@@@@@*          -@@@*'      +@@&-                    `x@@@@@@@@@@@@@@*
;@@@@@@@@@@@@@&`         -@x,        +@@@@x`                    -&@@@@@@@@@@@@*
,@@@@@@@@@@@@@@x.        ,-          +@@@@@@=.                   'o@@@@@@@@@@@:
 &@@@@@@@@@@@@@@*                    +@@@@@@@%,                    ;#@@@@@@@@-
 o@@@@@@@@@@@@@@@o.                  +@@@@@@@@=                     '%@@@@@%,
 :@@@@@@@@@@@@@@@@#:                 +@@@@@@#:                       =@@@&~
  o@@@@@@@@@@@@@@@@@*'               +@@@@@+.                        +@@*'
  '%@@@@@@@@@@@@@@@@@&=.             +@@@x,                         -@x,
   `#@@@@@@@@@@@@@@@@@@&='           +@&-                         ,x#;
    'x@@@@@@@@@@@@@@@@@@@@o:         +o'                        :o&~.
     .=@@@@@@@@@@@@@@@@@@@@@#+:      +;                      '=%&+.
       ,x@@@@@@@@@@@@@@@@@@@@@@&x+;' *;                  .:+%@&+'
         :x@@@@@@@@@@@@@@@@@@@@@@@@@&&x=-,`.       ',;=o%@@@#=.
           ,+&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&&&&&@@@@@@@@o;
             .;o&@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%~'
                 :+%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@&o~'
                    .,~o%&@@@@@@@@@@@@@@@@@@@@&%*~,
                          ':~=*ox#@@@@@@@#*~;`
                                  '*@@@#-
                                    ;@%'
                                     ~`

Download logo.txt ↓

08 / Resources

Everything, in one place.

Download the complete tattoo.dev kit. Printable guidelines and additional resources are available individually below.

Download tattoo.dev kit ↓Individual assets

logo/00-primary-chrome/tattoo-dev-logo-primary-chrome-master-1000.png

Questions, permissions or production artwork: hello@tattoo.co.