Rosso
日文
近黑的深藍底，中央是紅色發光線條的 3D 動畫。英文用像素風的等寬字，常用括號包起來，上方一條半透明暗紅色的導覽膠囊，看起來像終端機畫面。
顏色
primary
#A60306
nav-surface
#530205
background
#00061B
haze-blue
#0F3861
text
#F1F1FF
indicator
#DDCACA
primary-glow
#D32B52
background-black
#000000
text-warm
#EFE2E2
accent-lime
#BFFF00
accent-cyan
#39E8FF
form-panel
#EFE2E2
form-ink
#191919
form-muted
#808080
input-surface
#FFFFFF
error
#A60306
error-surface
#D99FA0
字級
display · Geist · 70px
The quick brown fox 敏捷的狐狸
display-mono · Departure Mono · 60px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
giant-mono · Geist Mono · 300px
The quick brown fox 敏捷的狐狸
page-title · Noto Sans JP · 32px
The quick brown fox 敏捷的狐狸
headline-mono · Departure Mono · 28px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
article-heading · Noto Sans JP · 24px
The quick brown fox 敏捷的狐狸
tagline · Tektur · 18px
The quick brown fox 敏捷的狐狸
link-mono · Departure Mono · 16px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
nav-mono · Departure Mono · 14px
Google Fonts 上沒有這個字型，用瀏覽器預設的字型顯示
The quick brown fox 敏捷的狐狸
article-body · Noto Sans JP · 14px
The quick brown fox 敏捷的狐狸
label-mono · Geist Mono · 12px
The quick brown fox 敏捷的狐狸
body-md · Noto Sans JP · 13px
The quick brown fox 敏捷的狐狸
form-label · Noto Sans JP · 13px
The quick brown fox 敏捷的狐狸
error-text · Noto Sans JP · 12px
The quick brown fox 敏捷的狐狸
caption · Noto Sans JP · 11px
The quick brown fox 敏捷的狐狸
圓角
none
0px
sm
5px
full
9999px
間距
xs
8px
sm
16px
md
24px
lg
40px
xl
80px
frame-inset
40px
pagination-top
100px
元件
- page
- page-red
- nav-capsule
- contact-button
- contact-button-hover
- contact-button-focus
- submit-button
- hero-title
- hero-rotating-word
- service-label
- giant-wordmark
- view-details-link
- solution-card
- category-filter
- news-item
- pagination
- article-title
- article-subheading
- form-panel
- input-field
- input-field-error
- error-message
- select-field
- required-tag
- code-gutter
- scroll-indicator
- hero-glow
- hero-haze
- hover-highlight
- tagline-text