Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
理想のカラーパレットをもとめて / color-palette-name-convention...
Search
hiloki
May 13, 2019
Design
3
240
理想のカラーパレットをもとめて / color-palette-name-convention-at-wic
WIC meetup(社内イベント) LT
hiloki
May 13, 2019
Tweet
Share
More Decks by hiloki
See All by hiloki
SPA/PWA時代のWebデザインのお作法 / Stateful Web Design
hiloki
10
3.3k
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
17k
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7.4k
Other Decks in Design
See All in Design
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
12
5.5k
スマートバンクのプロダクトデザイン
putchomsmartbank
6
2.3k
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
120
Shinjuku.rb #91 好きなもの紹介LT大会 "便利"や"役に立つ"とは別方面のRubyをつかったプログラミングがたのしい話
bash0c7
0
160
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
1
290
我做了一個詐騙網站...嗎?
crboy
1
130
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
300
アフォーダンスとシグニファイア
ryokanakai
0
250
Designing and Automating Component Specifications
nathanacurtis
3
370
Minuto de Aventura
olgastoryboard
0
130
3 Reasons Why I Got into Design
harukausui
1
140
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.6k
Featured
See All Featured
Building Adaptive Systems
keathley
36
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Typedesign – Prime Four
hannesfritz
39
2.3k
What's in a price? How to price your products and services
michaelherold
242
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Web Components: a chance to create the future
zenorocha
308
42k
A better future with KSS
kneath
235
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
BBQ
matthewcrist
83
9.2k
We Have a Design System, Now What?
morganepeng
48
7.1k
Infographics Made Easy
chrislema
239
18k
Building an army of robots
kneath
302
42k
Transcript
໋໊ฤ ΧϥʔύϨοτΛͱΊͯ ཧͷ WIC Meetup 2019.05.13
UXΤϯδχΞ͔ͩσβΠϯΤϯδχΞ͔ͩ ୩ थ CyberAgent Advanced Technology Studio
https://www.winticket.jp/
https://ameblo.jp/shiba-mamehiko/
None
None
90 ͕͖͔Ͳ͏͔ sec % 90 ৭͚ͩʹجͮ͘
Θ͔Γ໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
Θ͔Γ໊͍͢લΛఆٛ͢Δ ίϯτϥετΛߟྀ͢Δ ඞཁͳ৭ΛߜΓࠐΉ
None
blue_500
blue_500 blue_400 blue_600
azure_500 azure_400 azure_600
https://atlassian.design/guidelines/brand/color
Snorlax https://atlassian.design/guidelines/brand/color
Snorlax https://atlassian.design/guidelines/brand/color ΧϏ̋ϯ
primary_base primary_light primary_heavy
primary_base primary_light primary_heavy
Primary Button LABEL Primary Color
Primary Button LABEL Primary Color
azure_base azure_light azure_dark
azure_base azure_lighter_15 azure_darker_10
blue? azure_base? azure_dark_10?
$azure-base: #155AEE; $azure-lighter-15: #4D82F3; $azure-darker-10: #114CCA; $silver-lighter-20: #FCFDFD; $button_primary: $azure-base;
$button_primary_hover: $azure-lighter-15; $button_primary_active: $azure-darker-10; $button_primary_text: $silver-lighter-20; Sass
button-primary-base button-primary-hover button-primary-active button-primary-text button-primary-text button-primary-text ☺
button-primary-base button-primary-hover button-primary-active button-primary-text button-primary-text button-primary-text Minimum contrast 3.5 (AA18)
5.5 (AA) 7 (AAA)
@mixin button_primary_color { background-color: $button_primary; color: $button_primary_text; &:hover { background-color:
$button_primary_hover; } &:active { background-color: $button_primary_active; } } Sass
.button { @include button_primary_color; } Sass
.button { background-color: #155AEE; color: #FCFDFD; } .button:hover { background-color:
#4D82F3; } .button:active { background-color: #114CCA; } CSS
ίϯτϥετൺΛอͭΛ͢Δ ڞ௨ݴޠͱͯ͠ѻ໊͍͍͢લʹ͢Δ ύϨοτͰఆٛͨ͠৭Ҏ֎Θͳ͍
Thank you @hiloki @shiba_mamehiko