Design Guide

Design guide

The rules that keep the world, the look and the words consistent across Hoshimado itself and every work it makes.

The color and spacing samples are drawn straight from the values this site actually uses (tokens.css). Change the guide, and this page changes with it.

01Rules

Rules of the world

Everything Hoshimado expresses rests on these four rules.

  1. 01

    A lit window means someone is inside.

    You cannot see in, but the light tells you. There is always a maker inside the window called Hoshimado. So the maker's name is never hidden.

  2. 02

    No one can see inside a star. Only its light reaches us.

    We cannot touch what is inside another person. All we see is the light of how they act. Even so, we cannot help sensing someone beyond it.

  3. 03

    Value lies not in the stars, but in the lines between them.

    A constellation only exists once the lines are drawn. Value lives in relationships, and lines take time to draw.

  4. 04

    A star whose light has gone out is not gone. It is only asleep.

    Each work is a star. A work that has stopped has not ended; it is sleeping. It can be lit again at any time.

Brand words

A window is lit. Someone is inside.

On a night when AI can make anything, Hoshimado lights stars from a window with a maker inside.

Words we don't useCutting-edgeRevolutionaryChange the future

02Principles

Three principles

The rules of the world, turned into everyday design decisions. When in doubt, check against these three.

Transparency

Don't hide what we are doing. Put both what we can and cannot do into words, and show them.

Write "Your files are never sent anywhere" in one sentence, somewhere prominent on screen (only for works where that is true).

Quiet

Calm like the night sky, never rushing anyone. Only one point of emphasis per screen.

One primary button, one glow. No countdowns or blinking to hurry people along.

Accumulation

A comfort that makes people want to open a work every day, rather than a one-time flash. Every work sits under the same night sky.

However many works there are, the "by Hoshimado" in the footer and the voice stay the same.

03Structure

Brand structure

People find their way from a work to Hoshimado, and from Hoshimado to the maker. In the end, trust and relationships gather around the maker as a person; Hoshimado is the window to that person.

  • Trunk: the maker

    Examples
    takumihiguchi.com, note, X
    Role
    Writing about how things are made and what the maker thinks
    Name and color
    The maker's name, and the look of the maker's own site

  • Branch: Hoshimado

    Examples
    This site
    Role
    The window that shows the works and the world
    Name and color
    The colors and logo in this guide

  • Leaves: the works

    Examples
    papatto, YUNA
    Role
    Where people come in and use things
    Name and color
    Each work's own name and colors, signed "by Hoshimado"
  • Don't repaint works in Hoshimado's colors. If you are unsure about colors for a new work, it is fine to start from the colors in this guide.
  • Every work follows this guide for its voice and accessibility.

04Voice

Voice

  • Write in plain, friendly English. Not too formal: write the way you would explain something to a friend. Use sentence case for headings and buttons.
  • Write only facts and promises we can keep. No unfounded superlatives and no promises we cannot guarantee.
  • No exclamation marks or emoji in the UI. Only when a character is speaking does its own way of talking come first.
  • Buttons start with a verb ("Save", "Get started"). For errors, write one sentence for what happened and one for what to do.
  • Use numerals for numbers. Write dates as "October 28, 2026" and times as "6:30".

Words of this world

On the site, we use the terms below. Inside a work's own screens, that work's words come first.

  • Hoshimado (the brand, this site)

    Hoshimado term
    Window

  • Works, list of works

    Hoshimado term
    Stars
    English heading
    Works

  • Philosophy, worldview

    Hoshimado term
    About this world
    English heading
    Rules

  • Author, operator

    Hoshimado term
    The person inside the window
    English heading
    Creator

  • Relationship with users, connection

    Hoshimado term
    Lines

Write / don't write

Privacy

Write

Your files are never sent anywhere. Everything happens inside this browser.

Don't write

Industry-leading security keeps your data completely safe!

Errors

Write

We couldn't save this. You might be offline. Please try again.

Don't write

An error occurred (code 500)

Pausing a work

Write

papatto is paused for now. We'll let you know when it starts again.

Don't write

This service has been discontinued.

Writing the name

  • Always write Hoshimado, with only the first letter capitalized.
  • All capitals are used only for small English headings in the caption style.

06Endorsement

by Hoshimado

Hoshimado's signature, placed in the sites and apps of its works. It aims to leave each work's world intact while still showing that the same maker is behind it.

The papatto footer in light and dark. At the right end of the copyright line, by Hoshimado appears in papatto's muted text color
How it sits in papatto. The color is papatto's muted text color (muted)
  • This signature is the only part of the logo whose color may change. Fill it with a single color, the work's own muted text color, and don't bring in Hoshimado's navy or the work's accent color.
  • Place it at the right end of the footer's bottom line (the copyright line). Match the signature's letter height to the copyright text beside it (about 16–20px tall), and never make it larger than body text.
  • Link it to the Hoshimado site, opening in a new tab.
  • Don't put it in the header, make it larger than the work's logo or set it side by side like a co-brand.

Signature files (SVG)

07Color

Color

Night navy and starlight white are the face of the brand, with a little window lamplight, interactive blue and star gold added. The Hoshimado site is built on the night surface only, and always uses the Dark token values. Light is for works where daytime comes first, such as papatto.

Night

The night sky in the first view, full dark surfaces, the logo and text on light surfaces, large areas of color.

  • brand-void#03050d
  • brand-deep#070c1f
  • brand-night#101a3a
  • brand-twilight#22346e

Starlight, lamp and star glow

starlight is for the logo and text on dark surfaces. lamp is only for the glass of the lit window. glow is the one point of emphasis per screen.

  • brand-starlight#f6f1e4
  • lamp#f2c879
  • glow#e8c277
  • glow-inkLight#8a64174.9:1 against backgroundDark#e8c27711.1:1 against background

Backgrounds

Page / cards and dialogs / bands and code.

  • surfaceLight#f7f5efDark#0b1024
  • surface-raisedLight#ffffffDark#141c3a
  • surface-sunkenLight#efece3Dark#070c1f

Text

Body and headings / supporting text / notes. Each meets 4.5:1 or more on all three backgrounds.

  • inkLight#101a3a15.6:1 against backgroundDark#f6f1e416.7:1 against background
  • ink-secondaryLight#4a55786.7:1 against backgroundDark#b7bccf10:1 against background
  • ink-mutedLight#5f67845.1:1 against backgroundDark#8a93ad6.2:1 against background

Borders and controls

Borders are for decorative dividers and the outlines of inputs and buttons. accent is only for links, primary buttons, selection and focus.

  • borderLight#d9d5caDark#262f57
  • border-controlLight#7e869eDark#66709b
  • accentLight#3d5bd95.2:1 against backgroundDark#8fa6ff8.1:1 against background
  • on-accentLight#ffffffDark#0b1024

States

Success / warning / error. Always pair with words or an icon.

  • successLight#1c70495.6:1 against backgroundDark#5cc5938.9:1 against background
  • warningLight#8f5c0e5.2:1 against backgroundDark#e8b04b9.6:1 against background
  • dangerLight#b93a365.2:1 against backgroundDark#f07c767:1 against background

Proportions

On night surfaces, roughly 80% is brand-void and brand-deep, a little under 20% is text (the ink colors), and 10% or less is accent. lamp and glow are points, not areas, used only once per screen.

What we don't use

  • accent as decoration

  • lamp or glow painted over large areas

  • Blue-purple gradients, neon or flashy nebula illustrations

08Typography

Type

Manrope for Latin text, Noto Sans JP for Japanese and Noto Sans SC for Chinese. Sizes and line heights come only from the 12 styles below.

  • statement52 / 72px, 600A line that speaks of the world. The opening of Rules

    A window is lit.

  • display48 / 56px, 600Large English headings

    Works

  • title-132 / 44px, 600Page headings

    papatto

  • title-224 / 34px, 600Section headings

    92 tools, one feel

  • title-318 / 28px, 600Headings for cards and small groups

    Information

  • body16 / 28px, 400Body text

    Convert images and tidy up text, entirely inside your browser.

  • body-sm14 / 24px, 400Supporting text, tables, metadata

    Your files are never sent anywhere.

  • label14 / 20px, 600Buttons, tabs, form labels

    Save

  • caption12 / 18px, 500Notes, badges, small English headings

    Coming soon

  • code14 / 22px, 400Code, file names, IDs

    src/styles/tokens.css

  • phrase22–32 / 1.9 (scales with screen width), 500A line that sets a scene (Rules and Creator on the site)

    Join the stars you choose, and draw a constellation of your own

  • prose14 / 2.1, 400Paragraphs meant to be read. Line height is opened up for easy reading

    You choose the stars you can rely on, and you connect them. The constellation you make becomes the shape of what is useful to you, and what you like, in your everyday life.

  • Manrope for Latin text. Japanese pages use Noto Sans JP and Chinese pages use Noto Sans SC. Numerals always stay in Manrope.
  • Say things in one large line, and keep explanations short beside it. Don't pair a heading, a description and a button every time.
  • Keep body line height generous (1.75 for body, 2.1 for prose paragraphs). Keep lines to about 60–75 characters (measure).
  • Sizes and line heights come only from these 12 styles. Don't override them individually on a page.
  • Create emphasis with size and space, not with lots of bold.

09Layout

Layout, spacing and corners

Spacing works in units of 4px, with a limited set of steps. Side margins are space-4 on phones and space-12 on wide screens.

Spacing steps

space-2 to 4 inside parts, space-4 to 6 between parts, space-16 or more between sections. When in doubt, go one step wider.

  • space-14px
  • space-28pxInside parts. Between a label and its field
  • space-312pxInside parts
  • space-416pxInside and between parts. Side margins on phones
  • space-624pxBetween parts. Between form fields
  • space-832pxBetween the last form field and the primary button
  • space-1248pxSide margins on wide screens
  • space-1664pxBetween sections (at least this)

Corner radius

Buttons and inputs use radius-md. Frames for photos and video have square corners.

  • radius-sm6pxSmall marks
  • radius-md10pxButtons, inputs
  • radius-lg16pxLarge parts
  • radius-xl24pxDialogs
  • radius-window22%Icon-style tiles (same as the logo's window frame)
  • radius-pill999pxSearch fields only

Composition

  • Show the list of works as tiles, filled edge to edge with each work's video. Lay the name over the bottom left of the tile and darken the bottom so it stays readable. Don't wrap them in card borders or shadows.
  • On work detail pages, put photos and video in 16:10 frames, and the opening video full width.
  • Divide sections with a single 1px border line on top. Leave space-16 or more after the line.
  • Body width tops out at content-max (1120px); reading text wraps at measure.
  • Don't round the corners of photo or video frames. When in doubt, make the spacing one step wider.

10Motion

Light and motion

Motion shows how time flows in this world. Slowly, easing out, never bouncing.

Hoshimado's three motions

A light comes onAbout 3 seconds, ease-out. Once per page
A line is drawnFrom star to star, one at a time. When a line arrives, the next star lights
Stars twinkleOn a 6–8 second cycle, out of step with each other

Timing

  • duration-fast

    Duration
    120ms
    Used for
    Hover and press

  • duration-base

    Duration
    220ms
    Used for
    Opening, closing and fades

  • duration-slow

    Duration
    480ms
    Used for
    Brand moments only

  • duration-lamp

    Duration
    3200ms
    Used for
    A light comes on (once per page)

  • duration-line

    Duration
    1400ms
    Used for
    Drawing one constellation line

  • duration-twinkle

    Duration
    7000ms
    Used for
    The twinkle cycle of a star

Light

By day, shadow-sm (cards) and shadow-lg (dialogs, menus) lift things off the page. By night, the same tokens turn into faint outlines and light.

Light (window by day)

shadow-sm
shadow-lg
shadow-glow

Dark (window by night)

shadow-sm
shadow-lg
shadow-glow
  • Slowly, easing out, never bouncing. No bouncing, shaking or spinning, and no blinking to grab attention.
  • The one exception is the first view, where you peek at the works' videos. A mosaic and a band of horizontal noise show that you are looking through a window.
  • With reduced motion on, stop every effect and show the lights and lines already in place.
  • shadow-glow, like glow, appears only once per screen. shadow-lamp is only for the lit window.

11Forms

Forms

Every input follows the same visual rules. Labels, fields and errors share the same shapes and spacing.

Light (window by day)

This doesn't look like a URL. Please start with https://.

Dark (window by night)

This doesn't look like a URL. Please start with https://.

  • Always place the label above the field. Don't use the placeholder as a label; use it for an example of the input.
  • Inputs and selects are 44px tall, with radius-md corners, a surface-raised background and a border-control outline. Text is 16px.
  • Since most fields are required, mark the optional ones instead. Don't use a red "*".
  • Show errors after the person finishes typing, as one sentence with an icon below the field. Say what is missing and how to fix it.
  • Use a toggle for settings that apply right away, radio buttons to pick one of 2–4 options, and a select for 5 or more.

12Buttons

Buttons

Every button combines a kind (primary, secondary or quiet) with a step on the size scale. Use only the shared component, and never style buttons inside a work.

Kinds

  • Primary

    The one action you most want people to take on a screen. Filled with accent, and only one per screen.

  • Secondary

    Other actions that sit beside the primary one. Drawn as an outline.

  • Quiet

    Small nearby actions, or undoing something. Text only, with a faint background on hover.

Light (window by day)

Dark (window by night)

Size scale

Sizes are set by height. When in doubt, use the standard 44px.

  • lg

    Height
    48px
    Where to use it
    The main button at the end of a flow (Save, Send)

  • md

    Height
    44px
    Where to use it
    Standard. The same height as inputs and selects

  • sm

    Height
    36px
    Where to use it
    Small nearby actions (Copy, Undo, Today). Secondary (outline) or quiet (text only) both work; pick one and use it throughout a work

  • icon

    Height
    44px
    Where to use it
    Icon only, where fingers press often (delete a row, close full screen)

  • icon-sm

    Height
    36px
    Where to use it
    Icon only, such as Copy beside a result

  • icon-xs

    Height
    32px
    Where to use it
    Only for the × inside an input

Tool works may add a 56px step, but only for the most important action on the stage (Spin, Start).

Placing buttons together

  • Leave 8px (space-2) between buttons within one group of actions. This is the one exception to space-4–6 between components.
  • If they don't fit, wrap to the next line. Scroll sideways only when it's clear there's more, as with a row of chips.
  • Put the primary button at the end of a flow or on the right. Place secondary and quiet buttons before it.

Toggle buttons

A button that switches on and off each time it is pressed. While on, it shows an accent outline and a faint fill, and its state is announced with aria-pressed.

Light (window by day)

Dark (window by night)

  • Keep the label the same ("Bold" stays "Bold" when pressed). Show the state with shape and color.
  • Settings that apply immediately use a switch. Toggle buttons are for changing how a tool displays things (bold, grid, mute and so on).
  • Size them from the button scale (usually sm or icon-sm), and leave 8px between them.

Color swatches

A control for choosing one color. Place 32px circles 8px apart, built as radio buttons.

Light (window by day)

Card color

Dark (window by night)

Card color
  • They look 32px wide, so leave at least 8px between them to avoid mistaps.
  • Mark the selected color with a 2px ring, 2px away. Give every circle a 1px outline (border-control), so colors close to the background (navy on night, white on day) still keep their shape.
  • Make each color's name available to screen readers. Never rely on color alone.
  • Let people choose with the arrow keys (radio button behavior).

13Imagery

Photos, video and icons

checkxalertsearchdownloadlockmooncopyControls use accent
  • Show works with video recorded from real screens or streams. Show them in use, as they are, rather than in polished ad footage.
  • Photos should be quiet, real things: the actual night sky, windows, the lights of a room. Avoid stock photos with large faces.
  • Draw illustrations only with rounded rectangles and arcs, stars as points and 1px lines (constellations). Stars are four-pointed or small dots, nothing else.
  • Draw icons with 1.75px lines and rounded ends and corners, on a 24px grid (matching Lucide's shapes). Don't use emoji in place of icons.

14Accessibility

Accessibility

Pair every status mark with words

LiveComing soonPaused

Focus is a 2px solid line, 2px away

Save
  • Text meets 4.5:1. Large text (24px or more), icons and the outlines of controls meet 3:1 or more.
  • Draw keyboard focus as the 2px solid focus-ring line, 2px away from the element.
  • Never convey state with color alone. Marks such as "Live" always come with words.
  • Give images alt text that describes their content. The logo's is "Hoshimado". Hide decorative stars and lines from screen readers.
  • Make anything people can press at least 44px. When something must be smaller, keep it at least 24px (WCAG 2.2, 2.5.8) and leave enough room around it to avoid mistaps.
  • Even if something looks small, its pressable area may be extended with padding. Links within a sentence are exempt.

15Checklist

Before you publish

Check each of these, one by one, before a work or page goes live.

  1. Nothing contradicts the rules of the world (the maker's name isn't hidden; no promises we can't guarantee)
  2. Work states are written as "Live / Coming soon / Paused"
  3. There is only one primary button, one glow and one lit window per screen
  4. All text colors come from the tokens and meet contrast in both Light and Dark
  5. Every input has a label, and errors are explained in a sentence, not by color alone
  6. For a work, "by Hoshimado" is in the footer in the work's muted text color
  7. Effects stop when reduced motion is on, and this has been checked