Style combination · Contrasts
International Typographic Style × Vocaloid Fan Illustration
Impersonal grid and neutral type against one beloved, endlessly redrawn character.
Mix them and make something International Typographic Style Vocaloid Fan Illustration
01
What each style brings
Each part of the design comes from the style with the stronger say in it, and each style gives at least two.
International Typographic Style Vocaloid Fan Illustration (Hatsune Miku Culture)
- Type from International Typographic Style
- Colour from International Typographic Style
- Form from Vocaloid Fan Illustration
- Composition from International Typographic Style
- Surface from Vocaloid Fan Illustration
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · Vocaloid Fan Illustration
A fan illustration culture around one licensed character, Hatsune Miku, whose turquoise twin tails and synthesizer-sleeve motifs are redrawn for songs, videos and covers. The design is CC BY-NC (per Wikipedia) and fan use runs under Crypton's Piapro Character License, so the character stays licensed property, with commercial use needing Crypton's permission; that openness invited the volume of fan work, while the recurring cyan, pink and interface motifs come from the character design. Unlike vtuber-graphics, an avatar for one streamer, it is a shared character many fans redraw.
Shippori Mincho; Vocaloid Fan Illustration used Rounded and geometric sans-serifs for song titles and Hand-lettered titles in fan cover art
03
The colours
The ground and leading colours come from International Typographic Style, with a counter-accent from Vocaloid Fan Illustration. The ink reads on the ground at 4.5:1 or more.
International Typographic Style Vocaloid Fan Illustration (Hatsune Miku Culture)
-
#f2f0e9ground · 36% -
#111111ink · 14% -
#e1251baccent · 18% -
#ff6fa5accent · 14% -
#1f4e9caccent · 10% -
#39c5bbaccent · 8%
As CSS
:root {
--ground: #f2f0e9;
--ink: #111111;
--accent-1: #e1251b;
--accent-2: #ff6fa5;
--accent-3: #1f4e9c;
--accent-4: #39c5bb;
--font-display: "Inter Tight", sans-serif;
--font-text: "Shippori Mincho", serif;
}04
The two styles
05
More combinations
With International Typographic Style
- Art Nouveau Contrasts · Ornamental curves against an orthogonal grid make a strong deliberate tension.
- Brutalist Web Design Pairs well · Strip the grid to raw HTML defaults to get a rawer, contemporary take on Swiss honesty.
- Psychedelic Poster Contrasts · Its exact opposite on legibility; borrow one swirling element to break a too-cold Swiss layout.
- Japanese Postwar Modernism Pairs well · Add Japanese restraint and emblematic colour fields to the grid for warmth without losing order.
- American Traditional Tattoo Flash Contrasts · Rational grid and sans-serif against sentimental, hand-lettered emblems: one flash motif on a Swiss layout makes a sharp contrast.
- Graffiti & Hip-Hop Graphics Contrasts · Put a single tag or throw-up over a strict Swiss grid to stage the clash between institutional order and a street voice.
- Pop Art Graphics Contrasts · Set one loud appropriated Pop image inside a strict grid with a neutral grotesque so the irony reads as deliberate rather than chaotic.
- Italian Painted Film Poster (Rome Studios) Contrasts · Grid, restraint and photographic objectivity are the opposite of a crowded painted montage.
With Vocaloid Fan Illustration
- VTuber Avatar and Stream Graphics Pairs well · Both use a shared, character-led look; add stream overlays and avatar frames.
- Synthwave / Outrun Pairs well · Neon gradients and night grounds carry the electronic-music mood into a wider scene.
- Lo-fi Anime Aesthetic Pairs well · Swap the neon and cyan for a warm dusk palette to get a calmer, painterly sibling.