サン防災

日文

https://sunbousai.jp/

第一屏是整片等角視角的城鎮插畫，淡藍、淡綠、米白配橘紅色的消防車。標題用很粗的黑體，卡片是圓角加薄荷綠的實心位移陰影，右上角一顆橘紅色聯絡按鈕。

產業: 建築・不動產
網站類型: 企業官網
主色系: 紅; 橘; 綠
配色印象: 暖色系; 清爽・透明感
設計風格: 活潑・普普; 圓角; 插畫

顏色

primary
#E43200
orange
#FFA843
on-primary
#FFFFFF
ink
#1A1A1A
text
#484848
olive
#4E681B
leaf
#87CC5A
mint
#B4E5CC
mint-surface
#D8EAD9
sky
#EEFBFF
balloon-blue
#5BAFC1
beige
#FFFAF0
beige-dark
#F2EDE2
placeholder
#BBBBBB
surface
#FFFFFF
primary-hover
#FF4D0C
beige-focus
#FFF6E6

字級

page-title-en · BBH Bartle · 86px
The quick brown fox 敏捷的狐狸
display-en · BBH Bartle · 120px
The quick brown fox 敏捷的狐狸
headline-xl · Zen Kaku Gothic New · 54px
The quick brown fox 敏捷的狐狸
section-title · Zen Kaku Gothic New · 52px
The quick brown fox 敏捷的狐狸
article-title · Zen Kaku Gothic New · 43px
The quick brown fox 敏捷的狐狸
tagline · Zen Kaku Gothic New · 27px
The quick brown fox 敏捷的狐狸
page-title-ja · Zen Kaku Gothic New · 24px
The quick brown fox 敏捷的狐狸
card-title · Zen Kaku Gothic New · 21px
The quick brown fox 敏捷的狐狸
label-en · Instrument Sans · 12px
The quick brown fox 敏捷的狐狸
heading-en · Instrument Sans · 41px
The quick brown fox 敏捷的狐狸
lead · Zen Kaku Gothic New · 19px
The quick brown fox 敏捷的狐狸
input-text · Zen Kaku Gothic New · 17px
The quick brown fox 敏捷的狐狸
body-md · Zen Kaku Gothic New · 16px
The quick brown fox 敏捷的狐狸
breadcrumb · Zen Kaku Gothic New · 16px
The quick brown fox 敏捷的狐狸
nav-label · Zen Kaku Gothic New · 14px
The quick brown fox 敏捷的狐狸
tag · Zen Kaku Gothic New · 14px
The quick brown fox 敏捷的狐狸

圓角

sm
4px
md
8px
lg
14px
xl
16px
xxl
24px
pill
250px
full
9999px

間距

xs
8px
sm
15px
md
25px
lg
48px
xl
96px
page-margin
25px
form-width
701px

元件