SHIUI 詩Hinomaru ink kit
Ukiyo-inspired UI kit — for English interfaces

Paper.
Ink. Sun.

SHIUI is a reusable component kit drawn like a Hinomaru poster — flat 2D, neat 1.5px lines, zero shadows, three colours only. Every card below is live: press it, flip it, dismiss it. Like what you see? Copy its import or full source straight from the card.

111
Live elements
24
Blocks
3
Colours
日の丸、紙と墨Fig. 00 — Hinomaru
00Tokens — three colours, three voices, one lineShiui / Kit
Paper — #e5e3dc
GROUND · WASHI · MARGIN

Every surface. Breathe first, ink second.

Sumi — #2a2926
LINE · TYPE · FRAME

Every border and body word. 1.5px, never shadow.

Shu — #e14d2a
SUN · SEAL · SIGNAL

One accent, spent sparingly — sun, seal, shout.

The catalogue

111 live elements

01Buttons & actions
№ 001 — ButtonPrimary

Use — Main order — shu fill, arrow slides on hover. One per view.

№ 002 — ButtonSecondary

Use — Second path — paper fill, ink wipe to sumi on hover.

№ 003 — ButtonOutline

Use — Scarce action — shu frame, fills only on hover.

№ 004 — ButtonGhost

Use — Quiet escape — brush underline, no frame at all.

№ 005 — ButtonInk

Use — Night primary — sumi solid, wipes to vermilion.

№ 006 — ButtonDestructive

Use — No return — deep vermilion for closing editions.

№ 007 — ButtonSmall

Use — Dense UI — 32px for toolbars, tables, filters.

№ 008 — ButtonLarge

Use — Final step — full-width checkout bar with number.

№ 009 — IconButton

Use — One glyph — 40px square for plus, menu, close.

№ 010 — ButtonLoading

Use — Working state — enso spinner, disabled, announced.

№ 011 — ButtonWithArrow

Use — Editorial jump — headline button with filling arrow.

№ 012 — SplitButton

Use — Buy + options — primary action with live dropdown.

02Seals, tags & eyebrows
№ 013 — BadgeCount
3New proofs

Use — Fresh count — unread proofs in a shu square.

№ 014 — BadgeDot
Press is live

Use — Live pulse — the press is running right now.

№ 015 — TagChip
Woodblock

Use — Filled tag — solid sumi taxonomy.

№ 016 — TagOutline
First pressing

Use — Open tag — lightweight taxonomy.

№ 017 — HankoSeal
詩印

Use — Square seal — the studio signature stamp.

№ 018 — HankoRound
丸印

Use — Round seal — approval and origin mark.

№ 019 — KickerLabel
Catalogue — Spring

Use — Eyebrow — section opener with shu dash.

№ 020 — StatusPill
In print

Use — State pill — availability at a glance.

№ 021 — NumeralSeal
Plate three

Use — Plate numeral — kanji in an ink ring.

№ 022 — PriceStamp
¥4,800

Use — Price stamp — tilted vermilion, market feel.

03Forms & inputs
№ 023 — TextInput

Use — Single line — names, cities, postcodes.

№ 024 — TextareaInput
0 / 240

Use — Long note — commissions with counter.

№ 025 — SelectInput

Use — One of many — native paper-stock picker.

№ 026 — CheckboxInk
Wrap in washi
Free, always

Use — Opt in — washi wrapping consent. Click it.

№ 027 — CheckboxCard

Use — Pick a tier — selectable plan card. Click it.

№ 028 — RadioInk

Use — Mutual choice — sumi vs shu. Click it.

№ 029 — ToggleButton

Use — Filter chip — pressed state in sumi. Click it.

№ 030 — SwitchInk
Night printing

Use — Binary room — night printing toggle. Flip it.

№ 031 — RangeSlider
Ink density72%
薄 thin濃 thick

Use — How much — live ink-density readout. Drag it.

№ 032 — SearchInput

Use — Find — clears itself when you type. Type here.

№ 033 — PasswordInput

Use — Secret — folio access with real reveal. Try Show.

№ 034 — FileInput
Drop artwork here
PDF · PNG · UP TO 24 MB
Browse files

Use — Artwork drop — PDF and PNG up to 24 MB.

№ 035 — DateInput

Use — Split date — year, month, day fields.

№ 036 — OtpInput
Check
your
inbox

Use — Four digits — auto-advances as you type. Try it.

№ 037 — InputAddon
¥JPY

Use — Money in — yen prefix with JPY suffix.

№ 038 — InputIcon
@✓ verified

Use — Verified mail — identity with live check.

№ 039 — FormLabel
Shipping addressStep 02 / 04

Use — Step head — section title plus progress.

№ 040 — FieldHint
iWe ship flat, never folded. Every poster travels in a kraft tube.

Use — Quiet help — how we ship flat.

№ 041 — FieldError
!Postal code looks short — Japan uses 7 digits.

Use — Loud help — what broke and how to fix it.

№ 042 — QuantityStepper
2

Use — How many — edition counter, 1 to 99. Press +.

04Navigation
№ 043 — TabsUnderline

Use — Filter line — catalogue facets. Switch tabs.

№ 044 — TabsBoxed

Use — Range switch — day, week, season. Switch it.

№ 045 — BreadcrumbTrail

Use — Where am I — index down to the plate.

№ 046 — PaginationInk

Use — Many pages — ledger pager with live page. Click.

№ 047 — StepsBar
01Cart
02Wrap
03Post

Use — How far — cart to post in three stops.

№ 048 — SidebarItem

Use — Desk menu — press sections. Pick one.

№ 049 — MenuList

Use — Pills — anchor shortcuts. Pick one.

№ 050 — LinkUnderline

Printed in Kyoto — read our colophon before you order.

Use — In-text link — colophon reference.

№ 051 — LinkArrow
See the process

Use — Go see — teaser with filling arrow.

№ 052 — PageDots
02 / 04

Use — Slides — exhibition position. Click a dot.

№ 053 — BackToTop
Back to top

Use — Up again — smooth scroll with vertical caption.

№ 054 — SectionRail
04Buttons — primary inkShiui / Kit

Use — Catalogue rail — number plus name.

05Feedback & state
№ 055 — AlertNote

Use — News — proofs ready Thursday. Dismiss it.

№ 056 — AlertVermilion

Use — Warning — vermilion running low. Dismiss it.

№ 057 — ToastInk
Added to your folio

Use — Done — added with Undo, self-dismisses. Replay it.

№ 058 — InlineBanner
NoticeThe press pauses Aug 13–16 for Obon. Orders ship after.Details

Use — House note — the Obon pause strip.

№ 059 — ProgressBar
Drying3 / 5

Use — Blocks drying — three of five.

№ 060 — ProgressRing
74%
Edition pulled

Use — Edition pulled — 74 percent ring.

№ 061 — SpinnerEnso
Grinding ink

Use — Working — grinding ink, endless brush.

№ 062 — SkeletonLines

Use — Loading — shape before content.

№ 063 — EmptyState
Your folio is empty

Save proofs as you browse. They will wait here like paper on a rack.

Browse posters

Use — Nothing — an empty folio, 空.

№ 064 — TooltipBubble
B7 washi — 250 gsm

Use — Whisper — washi weight tip.

№ 065 — RatingStars
4.0 — your note

Use — Loved — set your own note. Click a star.

№ 066 — ConfirmStrip
Discard this proof?

Use — Sure? — discard guard with outcome. Decide.

№ 067 — LiveDot
2,140 viewing

Use — Crowd — viewers right now.

06Data & walls
№ 068 — DataTable
PlateStockQty¥
Hinomaru 04Kozo1204,800
Wave studyKraft803,200

Use — Ledger — plates, stock, quantity.

№ 069 — StatCard
Impressions today
312+18

Use — One number — impressions today.

№ 070 — QuoteCard
White space is not empty. It is where the sun rests.
Press master, Kyoto

Use — Voice — the press master line.

№ 071 — AvatarCircle
Soko SuzukiPrinter — 12 yrs

Use — Person — printer portrait.

№ 072 — AvatarHanko
Kyo AtelierVerified studio

Use — Studio — verified square mark.

№ 073 — TimelineRail
Sketch
Pencil on hanshi
Carve
Cherry block, 3 days
Pull
Vermilion pass today

Use — Order — sketch to pull.

№ 074 — AccordionInk

Domestic orders leave in 48 hours, flat in a kraft tube. International in 5–9 days, tracked.

Use — Fold — questions open and shut. Click one.

№ 075 — DefinitionList
Stock
Kozo washi, 250 gsm
Ink
Sumi + vermilion
Run
300 numbered

Use — Facts — stock, ink, run.

№ 076 — CodeBlock
tokens.css
--paper: #e5e3dc;
--sumi: #2a2926;
--shu: #e14d2a;

Use — Tokens — three hexes with copy button.

№ 077 — ListRow
Hinomaru morning editionA2 · 300 run · Kyoto

Use — Row — poster with arrow.

№ 078 — KpiDelta
+12.4%vs last moon

Use — Trend — plus against last moon.

№ 079 — DividerLine

Use — Breath — diamond rule.

№ 080 — DividerSun

Use — Breath — sun rule, a section pause.

№ 081 — TicketStub
Evening viewing
Kiln & Paper — Talk 04
APR 18 · 18:00 · NAKAGYO
№ 0482

Use — Night — talk admission stub.

07Overlays
№ 082 — ModalDialog

Use — Stop — confirm before closing. Open it.

№ 083 — DrawerPanel
Folio (2)
Hinomaru 04 — A2¥4,800
Wave study — B3¥3,200
Subtotal¥8,000

Use — Folio — side cart with total. Close it.

№ 084 — DropdownMenu
Sort catalogue

Use — Sort — catalogue ordering. Open it.

№ 085 — PopoverNote
Paper note
Kozo fibres stay visible under raking light — that is the point.

Use — Aside — paper fibre note. Toggle it.

№ 086 — HoverCard
Kyo AtelierWoodblock studio since 1987. 300 editions, zero reprints.Follow →

Use — Who — studio preview on hover.

№ 087 — DialogConfirm
?Leave without saving?

Use — Check — keep or discard, with answer. Decide.

№ 088 — FilterSheet
Filter — 12 results

Use — Narrow — removable filter chips. Remove one.

№ 089 — CommandRow
ESC
Go to Hinomaru 04Poster
Open folioPage
CheckoutAction
Find stockistPage

Use — Jump — type to filter commands. Type here.

№ 090 — NoticeCard
Just pulled
Edition № 212 — Wave study is on the drying rack.

Use — Fresh — just pulled edition.

№ 091 — CookieStrip
● CookiesWe use one cookie. It remembers your folio, nothing else.

Use — Consent — one honest cookie.

№ 092 — CloseButton

Use — Dismiss — the square × for every overlay.

08Cards & promo
№ 093 — CardInk
Plate record
A generic ink container: any record, notice or preview lives here. Header carries the title, footer carries the action.

Use — Anything box — header, body, footer slots.

№ 094 — FeatureCell
壱 — 01
Flat ink, zero shadow

Two-dimensional poster logic. Borders do the talking, light stays out of it.

Use — Promise — hover inverts to sumi.

№ 095 — PricingCell
Collector
¥9,600
three prints · signed
  • ✓ Numbered edition
  • ✓ Washi wrapping
  • × Framing

Use — Tier — collector pricing with action.

№ 096 — TestimonialMini
★★★★★
The vermilion hits like a temple bell. My wall finally has a pulse.
— R. Tanaka, Osaka

Use — Praise — five stars, one line.

№ 097 — NewsletterRow

Use — Join — subscribes for real. Press Join.

№ 098 — CouponEdge
HINOMARU-1010% off your first folio — ends Sunday.

Use — Gift — dashed code with copy button.

№ 099 — CalloutKanji
Print like a poster, not a page.One sun, two inks, generous margins. Everything else is noise.

Use — Thesis — poster, not page.

№ 100 — InfoRow
MaterialKozo washi — 250 gsm, deckle edge

Use — Fact row — material ledger line.

№ 101 — CopyButton

Use — Copy this — reusable copy-to-clipboard. Click it.

09Marks & motion
№ 102 — LogoMark
SHIUI 詩Ink UI Kit

Use — Wordmark — sun plus SHIUI 詩.

№ 103 — IconSun

Use — Disc — the Hinomaru itself.

№ 104 — IconWave

Use — Sea — seigaiha double stroke.

№ 105 — IconTorii

Use — Gate — threshold with shu plaque.

№ 106 — MarqueeStrip
Hinomaru edition — 300 numberedWashi · Sumi · ShuKyoto press since 1987Hinomaru edition — 300 numberedWashi · Sumi · ShuKyoto press since 1987

Use — Ticker — edition news loop.

№ 107 — TokenSwatch

Use — Palette — click a colour to copy its hex.

10Charts & diagrams
№ 108 — ChartBars

Press run leads the season

Impressions · per plate · Spring run
Hinomaru 04312
Wave study208
Crane164
Pine96
Plum54
F1 Rung bars · Press ledger · 2026

Use — Rank — plates by impressions, shu leads from zero.

№ 109 — ChartTrend

Pulls climb into summer

+18
Impressions · per week · 12 weeks
W01 · 42W12 · 156
F2 Hairline · Press ledger · 2026

Use — Climb — twelve weeks of pulls with ink wash.

№ 110 — ChartDonut

Kozo takes half the run

Stock share · % of 300 · Spring
300NUMBERED RUN
  • Kozo52%
  • Kraft31%
  • Mitsumata17%
F4 Tick donut · Stock ledger · 2026

Use — Shares — stock split of the 300 run.

№ 111 — ChartWaffle

Three quarters pulled

68/100
1 cell = 1% · numbered run · Spring
Pulled · 62Fresh · 6Left · 32
G4 Waffle · Press ledger · 2026

Use — Pulled — one cell per percent, fresh week in shu.

Compositions

24 blocks

Block 01 — Hero● Hinomaru
Ukiyo-inspired UI kit — № 04

One sun.
Two inks.
Zero shadow.

A flat poster-system for interfaces: paper #e5e3dc, sumi #2a2926, vermilion #e14d2a. Borders do the talking — light stays out of it.

Reserve a seatView catalogue →
112 elements22 blocks3 colours
日の丸Fig. 01 — The sun
Block 02 — Type specimen
Display — Shippori Mincho
Aa Ee 漢字
日の丸 0123
Body — Zen Kaku Gothic
The quick brown fox hangs beside the drying rack, 0123456789.

Body copy stays quiet so the sun can shout. Short lines, honest weights.

Mono — Plex Mono
NO.04 / A2 / ¥4,800
TRACKING — KYOTO → OSLO
0123456789 +-×÷
Block 03 — Features6 cells
壱 — 01
Flat ink, zero shadow

Borders do the talking, light stays out.

弐 — 02
Poster grid first

Generous margins, strict 1.5px lines.

参 — 03
Vermilion on purpose

One accent, spent only where it shouts.

四 — 04
Tategaki ready

Vertical rails for kanji and captions.

五 — 05
Hanko signatures

Seals stamp approval, price and origin.

六 — 06
Motion like brushing

Wipes, draws and stamps — 300ms or less.

Block 04 — Editions3 tiers
Single
¥4,800
one print · unsigned
Choose
Collector — popular
¥9,600
three prints · signed
Choose
Atelier
¥24,000
full season · framed
Choose
Block 05 — Voices★★★★★ 4.9
★★★★★
"The vermilion hits like a temple bell. My wall finally has a pulse."
— R. Tanaka, Osaka
★★★★★
"White space done right. It feels like the poster can breathe."
— M. Okafor, London
★★★★★
"Bought one, came back for the season. Wrapping alone is art."
— J. Lindqvist, Stockholm
Block 06 — Questions
Asked at
the counter
六つの答え — six answers
How long does shipping take?

Domestic orders leave in 48 hours, flat in a kraft tube. International in 5–9 days, tracked.

Is the ink lightfast?
Can I return a print?
Block 07 — Proof numbers● live
Impressions today
312+18
Clean pulls
98.2%+1.1
Numbered run
300sold out
Stockists
12Kyoto—Osaka
Block 08 — First pressing list

New plates, before the edition sells out.

One letter a month. No noise.
Block 10 — Collector login
Welcome back.

Your folio kept its place on the rack.

New here? Claim a folio
Block 11 — CheckoutFolio (2)
Hinomaru 04 — A2, kozo¥4,800×
Wave study — B3, kraft¥3,200×
HINOMARU-10 ×Subtotal ¥8,000Pay →
Block 12 — Printer
Kyo Atelier
Verified studio — since 1987
300
Plates
42k
Collectors
0
Reprints
FollowCommission
Block 13 — Process
From sketch
to sun.
Fig. 02 — Vermilion pass
01 — Sketch
Pencil on hanshi, margins first.
02 — Carve
Cherry block, three days, one blade.
03 — Pull
Sumi key block, then the vermilion sun.
Block 14 — Stock ledgerCSV ↓+ Plate
PlateStockQtyStatus
Hinomaru 04Kozo · 250gsm120In print
Wave studyKraft · 180gsm80Drying
Crane over FujiMitsumata0Sold out
12… 12
Block 16 — Tonight only● 3 left
Evening viewing
Kiln & Paper — Talk 04
APR 18 · 18:00 · NAKAGYO
Claim seat →
№ 0482
Doors at dusk
Paper, tea, vermilion
Block 17 — Closing argument
Print like a poster, not a page.
One sun, two inks, generous margins. Everything else is noise.
ManifestoStart →
Block 18 — Write us
Commissions open for spring.
春の注文
Budget: ¥50k — ¥300kSend →
Block 19 — Signals
Added to your folioUndo
!
Ink running low
Vermilion covers 40 more impressions.
Just pulled
Edition № 212 is on the drying rack.
Block 20 — Press desk
Index 作品
Posters
Type specimens
About
312
Today
98%
Clean
40
Left
Drying3 / 5
Block 21 — Checkout steps
Cart
Wrap
03Post
Wrap in washi — free, always. Add a hanko?
BackContinue →
Block 20 — Seal wall
詩印
丸印
¥4,800
Approved 承認
Every seal is also a component — HankoSeal · HankoRound · PriceStamp
Block 23 — Ink trendSpring run · live
1,214
Pulls · 12 wks
+18
This week
98.2%
Clean

Pulls climb into summer

+18
Impressions · per week · 12 weeks
W01 · 42W12 · 156
F2 Hairline · Press ledger · 2026

Press run leads the season

Impressions · per plate · Spring run
Hinomaru 04312
Wave study208
Crane164
Pine96
Plum54
F1 Rung bars · Press ledger · 2026
Fig. 23 — Trend + rungsPress ledger · 2026
Block 24 — Edition shares300 numbered

Kozo takes half the run

Stock share · % of 300 · Spring
300NUMBERED RUN
  • Kozo52%
  • Kraft31%
  • Mitsumata17%
F4 Tick donut · Stock ledger · 2026

Three quarters pulled

68/100
1 cell = 1% · numbered run · Spring
Pulled · 62Fresh · 6Left · 32
G4 Waffle · Press ledger · 2026
Kozo · 156
Kraft · 93
Mitsu · 51
SHIUI 詩

Flat ink interfaces in the spirit of Hinomaru posters. Set in Shippori Mincho, Zen Kaku Gothic and Plex Mono.

Approved 承認
Index
Catalogue
Process
Stockists
Contact
Colophon
Paper #e5e3dc
Sumi #2a2926
Shu #e14d2a
Lines 1.5px · radius 0
© 2026 SHIUI PressKyoto — TokyoSet flat. No shadows.
Powered by ddark.dev
Paper #e5e3dc · Sumi #2a2926 · Shu #e14d2a · Shippori / Zen Kaku / Plex Mono