papatto design guide

papatto is a set of tools for getting small tasks done quickly. This page collects the rules that keep its screens and words consistent, using the exact values the site runs on. If you want to use the logo, you can download it under “Logo”.

Contents

Ground rules

Every papatto screen is built on these promises. Nothing is built in a way that would break them.

No ads
No banners and no video ads. Nothing on the screen gets in the way of the task.
No uploads
Images, files and text are processed only on the device of the person using them. Fonts and libraries are bundled, so nothing is fetched from outside servers while you work.
No sign-up
No account and no install. Open it and it works.
Done in a moment
Each tool does one job. Features most people need go in; rarely used extras stay out.

Brand structure

papatto is one of the works by the maker Hoshimado. The name and colors belong to papatto and are not repainted in Hoshimado’s colors.

A “by Hoshimado” signature sits at the right end of the footer’s bottom row, in the muted text color.
Share images carry the same signature in the bottom-left corner, in a muted color.
The signature is never in the header and appears only once per screen. It is never larger than the papatto logo.
Embedded tools on other sites don’t show the signature; the “Open in papatto” band is the only credit.

The signature is 16px tall. The copyright text next to it is 12px, so following Hoshimado’s rule “match the signature’s text height to the copyright text beside it (roughly 16–20px)”, papatto uses the smaller end (by Hoshimado rules).

Relationship to the Hoshimado guide

papatto follows the “Writing” and “Accessibility” chapters of the Hoshimado guide, while keeping its own colors, name and logo.

Hoshimado’s own rules are in the Hoshimado design guide.

Writing

Write in plain words that anyone can follow.

Keep sentences short and friendly. One idea per sentence.
Avoid jargon and unfamiliar terms; say it in everyday words.
Buttons name their action with a verb (“Choose a file”, “Download PDF”). Options in tabs and toggles stay nouns (“PNG”, “Portrait”).
Instructions use the exact words shown on the screen. Button names and instructions match word for word.
Error messages say what happened and what to do next (“That date doesn’t exist. Check the year, month and day.”).
No exclamation marks and no emoji in interface text.
Be honest about what a tool can’t do. State facts like “nothing is sent anywhere” instead of unfounded superlatives (“fastest”, “best”) or reassuring slogans.
Every string exists in 10 languages, with Japanese as the source. Translations read naturally, not word for word.

Write	Avoid
Choose a file	Upload
Convert to PNG	Perform PNG format conversion
Saved	The operation completed successfully!
Couldn’t open this file. Choose another file.	An error occurred
The numbers you enter are never sent anywhere	Cutting-edge security you can trust

Logo

The logo is the mark on the left (an orange circle with three lines) plus the name. Japanese pages use “ぱぱっと”; all other languages use “papatto”.

On light backgrounds

On dark backgrounds

Use the colors as they are: the version with near-black text on light backgrounds, and the version with near-white text on dark ones.
On the site, the logo is drawn by the Logo component. Its colors come from the tokens, so it switches between light and dark automatically.

Don’ts

Change the colors or add gradients
Stretch, rotate or add shadows
Change the spacing or order of the mark and the name
Place it on photos or patterns where it is hard to read

Downloads

Color

Calm, warm neutrals with a single accent: orange. Every color has a light and a dark value and switches with the color setting.

--bgPage backgroundLight#fffcf6Dark#17140f
--surfaceCards, inputs, step boxesLight#ffffffDark#201c16
--surface-hoverHover, quiet surfacesLight#fff6e6Dark#2a241b
--fgBody text and headingsLight#26211bDark#f3eee6
--mutedSupporting text, notesLight#6b6157Dark#aaa093
--lineRules and card bordersLight#ece4d6Dark#342e25
--controlOutlines of inputs, toggles, outlined buttons and color circlesLight#998c7eDark#776d5f
--sliderSlider thumb and trackLight#c97a00Dark#f7b13c
--accentMain buttons, selected and done statesLight#f5a524Dark#f7b13c
--accent-strongFocus outlines, links, on-state textLight#9c5e00Dark#f7b13c
--accent-fgText on orangeLight#2b1a00Dark#2b1a00
--gainPositive balanceLight#2e7d32Dark#74d27a
--lossNegative balance, error text (text-danger)Light#c0392bDark#f4806f

Contrast

Ratios of a color to its background. Text colors target 4.5:1 or more and control outlines (control) 3:1 or more; both themes meet them.

	Target	Light	Dark
`fg / bg`	4.5:1	15.6:1	15.9:1
`muted / bg`	4.5:1	5.9:1	7.1:1
`muted / surface`	4.5:1	6.0:1	6.6:1
`accent-strong / bg`	4.5:1	5.1:1	9.9:1
`accent-fg / accent`	4.5:1	8.2:1	9.0:1
`gain / surface`	4.5:1	5.1:1	9.1:1
`loss / surface`	4.5:1	5.4:1	6.6:1
`control / bg`	3:1	3.2:1	3.6:1
`control / surface`	3:1	3.3:1	3.3:1

Orange fills (accent) are used for main buttons, switches that are on, step numbers and the marks of selected items. Never as decoration.
The strong orange (accent-strong) is used for focus outlines, links such as the footer’s “See all”, and the text of on-state marks. Never for errors.
Error text is red (text-danger, the same color as a negative balance).
Outlines of inputs, toggles, outlined buttons and color circles use control; cards and dividers use line.
Only sliders use the slider color (with accent-strong, the unfilled side of the track would fall below 3:1 against the background).
One orange-filled main button per step.
Colors are written as CSS tokens, so they work in both light and dark.

Type

Headings use a rounded typeface and body text a clear sans-serif. Fonts are served from the site itself, never from outside servers.

M PLUS Rounded 1cHeadings (Japanese, Latin and Cyrillic languages)
Noto Sans JPBody text (Japanese, Latin and Cyrillic languages)
Noto Sans KR・SC・ArabicHeadings and body in Korean, Chinese and Arabic

Sizes

Small tasks, done quickly.30px · text-3xl Page title (desktop)
Small tasks, done quickly.24px · text-2xl Page title (phone), large section headings
Small tasks, done quickly.18px · text-lg Step box headings
Small tasks, done quickly.16px · text-base Body text, inputs on phones
Small tasks, done quickly.14px · text-sm Supporting text, inputs on desktop
Small tasks, done quickly.12px · text-xs Notes, footer

Numbers line up in tables and counters (tabular figures).
Inputs use 16px text on phones, so iPhone doesn’t zoom in on every tap.

Layout, spacing and corners

Designed for phones first, then widened on desktop. Spacing comes in 4px units, from a small set of steps.

Spacing steps

4・8px · gap-1・gap-2Inside a component (icon and label, a heading and its note)
8px · gap-2Items in a row (small buttons, tags)
16px · gap-4Close elements (stacked buttons, rows of cards)
32px · gap-8Groups (step boxes, desktop columns)
48px+ · gap-12・gap-16・gap-24Page sections (the promises and the tool list)
16 / 24・32px · p-4・sm:p-6・sm:p-8Inside a box (16px on phones, 24 or 32px on desktop)

Corner radius

rounded-fullButtons, toggles, tags
rounded-xlInputs, small surfaces
rounded-2xlCards, step boxes
rounded-3xlLarge callout boxes

The 4, 8, 16, 24, 32 and 48px steps are used for the space between elements and for padding inside boxes. When unsure: close = 16, group = 32.
Small paddings inside components (above and below a tag, the sides of a button) are an exception and also use off-scale values such as 2, 6, 10 and 12px.
Pages are at most 1152px wide; reading text wraps at 672px. Side margins are 16px on phones.
Nothing scrolls sideways at 360px (ideally 320px).

Motion

Motion only explains what just happened. Short, and never bouncy.

Moving to a page slides the content in slightly from the side (0.2–0.3s). Going back slides from the other side.
Switching the color theme crossfades the old and new screen over 0.3s.
The “saved” notice rises from the bottom and drops away again.
Guide videos play only while visible and pause when scrolled away.
With “Reduce motion” turned on, animation stops and results appear immediately.

Components

Buttons, toggles and inputs come from shared components; tools never style their own. The same job looks the same in every tool.

PrimaryButtonThe key action in a step. Only one orange button per step
SecondaryButtonOutlined button placed under the main one
SmallButtonSmall nearby actions (copy, undo)
IconButtonRound icon-only button. Always has a spoken label
SegmentedControlPick one of 2–4 options
Format
SwitchAn on/off setting that applies right away
Keep the original size
ToggleButtonOn/off options lined up in a narrow bar. On shows an orange outline and check
TextFieldSingle-line input with its label above
Name
ColorSwatchesCircles for common colors, plus a rainbow circle for any other color
Color
Other color#e53935
CardButton・CardLinkSmall card that is clickable as a whole
BadgeSmall non-clickable tag for a short status
ValidExpired

States

An input with a mistake gets a red border (aria-invalid) and a red message below it that says how to fix it. While focused, an input’s border turns strong orange.
Buttons that toggle (ToggleButton, and IconButton with aria-pressed) show an orange outline and a light orange fill while on. Their text and spoken label stay the same.
Color circles are 32px across and 8px apart. Every circle has a 1px outline (control); the selected one gets a 2px ring drawn 2px away.
Color circles form a radio group and can be chosen with the arrow keys. Screen readers hear the color’s name, such as “Red (#E53935)”.

Size steps

Buttons and other tappable parts are sized by height steps. The step names follow the “Buttons” chapter of the Hoshimado guide.

Step	Height	Components	Use
`xl`	56px	`PrimaryButton xl・SecondaryButton xl / stage`	The key action on a gadget’s stage (spin, start)
`lg`	48px	`PrimaryButton lg`	The final main button of a step (download, save)
`md`	44px	`PrimaryButton md・SecondaryButton・ChangeFileButton・TextField・Select`	Standard. Same height as inputs and selects; also the outlined button under the main one and buttons that pick a file again
`sm`	36px	`PrimaryButton sm・SmallButton・ToggleButton・LinkButton inline・TextField sm`	Small actions nearby (copy, undo) and on/off toggles, including “Save” at the top of the phone editor
`icon`	44px	`IconButton lg`	Icon only, for spots tapped often (delete a row, close fullscreen)
`icon-sm`	36px	`IconButton`	Icon only, such as copy next to a result
`icon-xs`	32px	`ColorField (×)・Thumbnails / ImageStrip (×)`	The × inside an input or on a thumbnail
`swatch`	32px	`ColorSwatches`	Color choice circles

Arrangement

Leave 8px between actions in the same group.
When things don’t fit, wrap to the next line. A SegmentedControl that doesn’t fit stacks its options vertically.
The main button goes at the end of the step.

Icons and guide videos

Icons are line drawings; guides show the real screen on video.

Tool icons are line drawings in a rounded square, in the text color. No orange, so rows of icons stay calm.
Converters show the output format (such as PNG) small inside the icon.
Guides show a short video of the real screen for each step: desktop inside a browser frame, phone inside a phone frame.
The area being touched is outlined in orange.
Step text uses the words on the screen and says where to press and what happens.

Before publishing

Check these before a new screen goes out.

No ads, no uploads and no requests to outside servers
Checked on desktop and phone, light and dark, in Japanese, English and Arabic, with no sideways scrolling at 360px
Only one orange main button per step
Spacing between elements and inside boxes uses the defined steps, and components are the shared ones
Buttons name their action, with no exclamation marks or emoji; error text is red and says what to do
All 10 languages are complete, and button names match the instructions
The guide steps make sense to a first-time user