Screenshot of Ichiki 109

Ichiki 109

109ichiki.com

The reference for Japanese illustrator portfolios — Astro v5 build, IBM Plex Mono + Hiragino + barcode font, off-white blue-tint background, percentage-progress preloader.

Design Portfolio Illustrator Portfolio niche

Design tokens

paperLight
nearBlack
black
white
midGrey
display
IBM Plex Mono
body
IBM Plex Mono
japanese
Hiragino Kaku Gothic ProN
barcode
Libre Barcode 128

Do / Don't

Reference it for

  • Astro v5 framework (Jiffi stack — direct transfer)
  • Off-white blue-tint background rgb(243, 243, 255) — distinctive cool paper
  • Near-black blue-tint text rgb(16, 16, 22) — matches the paper undertone
  • Three-font multi-script system: IBM Plex Mono (Latin) + Hiragino (Japanese) + Libre Barcode 128 (signatures)
  • Libre Barcode 128 for project IDs — Google Fonts open-source barcode font
  • Hiragino Kaku Gothic ProN fallback chain for Japanese content
  • Single weight 400 discipline
  • 9-step type scale (12-57px)

Do not copy

  • The "1:09" / "ichiki" illustrator signature
  • The Japanese illustration content
  • The Hiragino fallback unless brand supports Japanese
  • The Libre Barcode 128 unless brand has legitimate barcode use case (or aesthetic ambition)
  • The IBM Plex Mono for non-tech / non-illustration brands — Inter Mono is more neutral
  • The Astro CSS-Modules underscore-hash naming pattern (build-tool-specific, may conflict with other build chains)

Signature moves

cool-paper Astro mono canvas

an off-white blue-tint ground rgb(243,243,255) with near-black blue-tint text rgb(16,16,22), single weight 400 and a 3px workhorse radius (with a 2/3/4/6/50%/900px scale) reads as distinctive cool paper on an Astro v5 build.

multi-script mono plus barcode IDs

a three-font system of IBM Plex Mono (Latin) + Hiragino (Japanese) + Libre Barcode 128 (project IDs) handles multi-script content and gives signature barcode project numbers.

percentage-counter preloader with terminal blink

a preloader pairs a terminal cursor blink with a percentage-counter tick keyframe, on an easeOutQuart cubic-bezier(0.22,1,0.36,1) workhorse.

Related references

Screenshot of First Frame

First Frame

niche

Film Production

Paris production and post-production studio whose own site is the canonical example of full-bleed black + IBM Plex Mono micro-type + reel-as-hero — the cinematic-craft posture for a portfolio-led service business.
Screenshot of Gianluca Gradogna

Gianluca Gradogna

niche

Design Portfolio

a multidisciplinary designer's portfolio that floats a crisp white intro card over a dark, full-bleed photographic world, pairing a clean Neue Montreal grotesque with a high-contrast Times display serif and one slow in-out-sine colour fade.
Screenshot of Hugo Baron

Hugo Baron

niche

Design Portfolio

The reference for solo motion-design portfolios that lean on a single brand colour, a giant condensed display face, and a "loading-screen-as-hero" gimmick to read as confident and craft-forward without an agency budget.
Screenshot of Ingamana

Ingamana

niche

Creative Studio

a development-studio portfolio that runs as a near-silent black-on-white index, ABC Monument Grotesk set tiny (10-16px), captioned project tiles laid out like a contact sheet, and a single expo-out reveal curve doing all the motion work.