PinDo.Little beads.
Endless possibilities.
The PinDo brand book and common component system. A warm, clear visual language for finding an idea and making it your own.
Version 1.0 · October 2026
01 / What we stand for
A little confidence at every step.
PinDo helps people move from inspiration to a clear making plan. Every page should answer a practical question: what can I make, what do I need, and what should I check next?
Our personality is cheerful, patient, and precise. We celebrate the maker’s ideas, respect original artwork, and keep digital estimates separate from physical results.
02 / The mark
Four beads. One little beginning.
Use the original rounded-square bead mark with the PinDo wordmark and pink full stop. Leave clear space of at least one bead diameter around the icon. The digital icon minimum is 24 pixels; the wordmark minimum is 100 pixels wide. Keep the icon square and preserve the circular bead holes.
Use the monochrome mark when color is unavailable. Do not stretch, rotate, recolor individual beads, add a drop shadow to the mark, or place it on a visually busy chart.
Download the original SVG icon · Download the monochrome SVG mark
03 / Color
A cheerful accent, with room to breathe.
ink
#262833
muted
#646572
pink
#ed486e
pinkDark
#b7264e
line
#e8e8ed
paper
#ffffff
surface
#f8f8fb
rose
#fff0f4
lavender
#f5f0fb
sage
#f1f6e8
cream
#fff0dc
focus
#7450a3
success
#26724f
danger
#b42342
Pink is the recognition color. Dark pink is the shared control and link color for readable white-button labels and small text. Ink carries headings and body text. Pastel fields support actual bead artwork; they do not replace white content surfaces. Never encode a warning or chart color by color alone.
04 / Typography
Make a little
something.
Inter and the system sans-serif stack. Clear, familiar, and quick to render.
Type that helps you make
Display headings use a 36–64 px responsive scale, tight letter spacing, and a 1.08 line height. Reading copy uses 16–17 px with generous 1.8 line spacing. UI labels use 12–14 px and must remain readable at narrow widths.
Use sentence case. Keep headings short and concrete. Reserve bold for hierarchy and key information. Avoid all-caps body text, decorative fonts in controls, or long copy set as a display heading.
05 / Common components
One family, across the whole making journey.
Actions
One primary action per decision. Secondary actions use a white surface and subtle border. Labels name the action; status labels describe the actual work.
Forms & feedback
Your design stays private in this browser.
Keep labels visible. Validate near the input. Preserve unfinished work when a save fails, and announce the result through an accessible status message.
Spacing & geometry
Spacing follows 4, 8, 12, 16, 24, 32, 48, 64, and 96 px. Controls use 10 px radii, cards 16 px, feature panels 24 px. The page container is 1280 px, with a 720 px reading column. Use borders for grouping before adding shadows.
Icons & artwork
Interface icons use a 24 px canvas and rounded outline strokes. Bead previews come from the actual grid and palette. Use a real finished photo only when the pictured physical object exists and its source is known.
06 / Voice
Warm enough to invite. Clear enough to trust.
Speak to the maker directly. Use familiar making terms and explain a new one once. Name the next action and its result. Keep credit, material limits, and storage boundaries visible where they matter.
| Use | Avoid |
|---|---|
| “Save your private design” | “Publish” for a local save |
| “22 red beads short” | “Materials ready” with unknown counts |
| “Physical test pending” | “Maker approved” without evidence |
| “Your next little project” | Unverified “best” or “perfect” claims |
07 / Access & motion
Shared controls have a minimum 44 px target. Keyboard focus uses a visible purple outline. Chart symbols supplement color. Respect reduced motion; use 150–200 ms feedback and avoid animated decoration that competes with the chart. Test at 320 px and 390 px, with keyboard navigation and real saved-work recovery.
08 / Source & stewardship
The machine-readable source is tokens.json. Brand, button, pattern card, pattern art, footer, layout, and support components implement the public system. The maker app shares the same brand and footer primitives. Keep component changes and the brand book in sync.