Pentel Q ≡
lorem ipsum
lorem ipsum.
←   1 / 5   →
The Joy of Expression.
01
Colors
lorem ipsum dolor
Brand — lorem. #e60012 lorem“lorem”lorem ipsum dolor
Pentel Red
#ff0000
lorem / lorem ipsum / lorem ipsum dolor / VIEW
Deep Red
#a4000f
lorem ipsum dolor sit amet
Neutral
Text Primary
#212121
lorem / lorem. lorem ipsum dolor
Text Secondary
#888888
lorem / lorem ipsum / lorem ipsum
Surface
#f6f6f6
lorem ipsum dolor
Surface Tab
#eaeaea
lorem ipsum dolor / lorem ipsum
Surface Chip
#dddddd
lorem ipsum dolor sit
Accent — lorem ipsum dolor sit 4 lorem. lorem ipsum dolor sit amet consectetur
Sky
#b5ebff
1 lorem / 5 lorem…
Lemon
#ffe890
2 lorem / 6 lorem…
Lilac
#e5c7ff
3 lorem / 7 lorem…
Mint
#bbffbe
4 lorem / 8 lorem…
Scrim — lorem ipsum dolor sit amet
rgba(33, 33, 33, 0.4)
02
Typography
lorem ipsum dolor sit amet consectetur adipiscing
Japanese — Ryo Gothic PlusN. lorem ipsum 0.03em, lorem ipsum dolor
lorem ipsum dolor sit.
Ryo Gothic PlusN / 124px(lorem ipsum 72px lorem)/ 700 / line-height: 1.0 / letter-spacing:0.01emlorem ipsum dolor sit 1/3 lorem
8 lorem 1 lorem.
Ryo Gothic PlusN / 54px / 700 / line-height: 1.16 / letter-spacing: 0.03emlorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Ryo Gothic PlusN / 38px / 700 / line-height: 1.376 / letter-spacing: 0.03emHeading 1
lorem ipsum
Ryo Gothic PlusN / 26px / 700 / line-height: 1.23Heading 2
lorem ipsum dolor 8 lorem ipsum dolor
Ryo Gothic PlusN / 22px / 700 / line-height: 1.18lorem ipsum dolor / lorem
lorem — lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum line-height lorem ipsum dolor sit amet consectetur.
Ryo Gothic PlusN / 16px / 500 / line-height: 1.4 / letter-spacing: 0.03emlorem ipsum. lorem 1.7–2.0 lorem ipsum
lorem ipsum dolor :
Ryo Gothic PlusN / 15px / 700 / color: #ff0000lorem ipsum dolor, lorem ipsum dolor sit
lorem ipsum dolor — Section Label
Ryo Gothic PlusN / 12px / 500 / line-height: 2.2lorem ipsum dolor sit
lorem ipsum dolor — Micro
Ryo Gothic PlusN / 11px / 500 / line-height: 1.0 / color: #888888lorem ipsum
English — Paralucent. lorem normal, lorem font-size lorem ipsum
New Products
Paralucent / 44px / 900 / line-height: 0.8 / letter-spacing: normallorem ipsum dolor sit amet consectetur
Keywords
Paralucent / 28px / 900 / line-height: 1.0lorem
2025.07.30
Paralucent / 12px / 700 / line-height: 1.0lorem ipsum dolor sit amet consectetur
03
Magazine
lorem ipsum dolor sit amet consectetur adipiscing
lorem ipsum dolor
lorem ipsum dolor

lorem, lorem ipsum dolor sit amet consectetur.
AR lorem
lorem ipsum dolor

lorem ipsum dolor sit amet consectetur.
lorem
lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum dolor
lorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur.lorem ipsum Sky → Lemon → Lilac → Mint lorem ipsum dolor sit。
lorem ipsumborder-radius: 0, padding lorem44px 30px 104px lorem ipsum dolor.

04
Products

lorem ipsum dolor : lorem ipsum dolor sit amet consectetur

Category Pills — lorem border-radius: 20px
lorem ipsum lorem ipsum dolor lorem ipsum lorem lorem ipsum(lorem) lorem
Product Cards — lorem ipsum dolor
lorem ipsum
lorem ipsum dolor lorem Skyly Design
lorem ipsum dolor
lorem ipsum dolor 8 lorem ipsum dolor
lorem
lorem ipsum dolor 12 lorem
05
Buttons
lorem ipsum dolor sit. lorem ipsum 20px
Nav Pills — lorem ipsum dolor + weight 700, lorem ipsum #eaeaea + weight 500
lorem lorem ipsum lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
Nav Bar — lorem ipsum“lorem”lorem ipsum dolor sit

lorem ipsumborder-radius: 40px lorem.box-shadow lorem ipsumnone。

06
Forms
lorem ipsum dolor sit amet consectetur

"Helvetica Neue", Arial, Meiryo, sans-serif / 17px

lorem ipsum dolor sit #212121 lorem ipsum dolor

lorem ipsum dolor sit amet consectetur #ff0000

07
Layout
lorem ipsum dolor
Container1440px lorem / lorem 30px. lorem ipsum dolor 100vw
Spacing Scale8 / 17 / 30 / 44 / 104 / 160px
Article Grid4 lorem(lorem ipsum 4 lorem 1 lorem ipsum)
Card Padding44px 30px 104px — lorem ipsum dolor sit
Border Radiuslorem 20px / lorem ipsum 40px / lorem 0px
Elevationlorem ipsum dolor. lorem ipsum UI lorem ipsum dolor sit
Easing(lorem CSS lorem)--ease01: cubic-bezier(0.16, 1, 0.3, 1)(lorem ipsum)
--ease02: cubic-bezier(0.6, 0.25, 0, 1)(lorem ipsum dolor)
paltbody lorem ipsumfont-feature-settings: "palt". lorem ipsum normal