/DESIGN-SYSTEM
Design System
Canonical tokens for the RNN brand. Every surface in the site pulls from the same Tailwind v4 @theme block defined in styles/colors_and_type.css. For reusable React components with interactive playgrounds, see /components.
COLORS
BRAND
RNN Red
#E92419
RNN Ink
#313131
RNN Cream
#F7F4F2
ACCENTS
Red Tint
#FD6D28
Orange
#D97A3A
Yellow
#F7D125
Purple
#9747FF
NEUTRALS
Ink Soft
#3D3D3C
Graphite
#5D5E5C
Stone
#898987
Fog
#D1D1D0
Mist
#E7E7E6
Cream Warm
#FEF8F8
TYPOGRAPHY
Families · `@theme` font tokens
font-display
Power Grotesk
Local · /public/fonts
Headings & display. Page titles, masthead, hero headlines.
Ramen News Network 0123
font-sans
Inter Tight
Google Fonts
Body copy, nav, CTAs, UI labels.
The quick brown fox jumps over the lazy dog.
font-mono
Aeonik Fono
Local · /public/fonts
Every eyebrow, tag, timestamp, author, section label.
/ANIME · 1H AGO · DARYL HARDING
font-serif
Instrument Serif
Google Fonts
Editorial longread titling + italic pull-quote accents.
Spoiler Alert — a quieter serif voice.
Size scale · Tailwind v4 `text-*`
Intrinsic size + line-height per utility
text-8xl
Display / XL
6rem / 1
Display / XL
text-7xl
Display / L
4.5rem / 1
Display / L
text-6xl
Display / M
3.75rem / 1
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-5xl
Display / S
3rem / 1
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-4xl
Heading / XL
2.25rem / 1.111
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-3xl
Heading / L
1.875rem / 1.2
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-2xl
Heading / M
1.5rem / 1.333
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-xl
Heading / S
1.25rem / 1.4
Mappa launches chronological merch campaign for JJK — every arc, in order, beginning with the Shibuya Incident.
text-lg
Paragraph / L
1.125rem / 1.556
Jujutsu Kaisen is a Japanese manga series written and illustrated by Gege Akutami. It has been serialized in Shueisha's shōnen manga magazine Weekly Shōnen Jump since March 2018, with its chapters collected in 26 tankōbon volumes as of April 2024.
text-base
Paragraph / M
1rem / 1.5
Jujutsu Kaisen is a Japanese manga series written and illustrated by Gege Akutami. It has been serialized in Shueisha's shōnen manga magazine Weekly Shōnen Jump since March 2018, with its chapters collected in 26 tankōbon volumes as of April 2024.
text-sm
Paragraph / S
0.875rem / 1.429
Jujutsu Kaisen is a Japanese manga series written and illustrated by Gege Akutami. It has been serialized in Shueisha's shōnen manga magazine Weekly Shōnen Jump since March 2018, with its chapters collected in 26 tankōbon volumes as of April 2024.
text-xs
Label / XS
0.75rem / 1.333
Label / XS
SHADOWS & BEVELS
Bevelled chrome · active nav tabs
TRENDING · ACTIVE
REGISTER
NAV · PAPER
Drop shadow · overlays & buttons
OVERLAY PANEL
Radii — aggressively flat