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-at-wic
Search
hiloki
May 13, 2019
Design
3
230
理想のカラーパレットをもとめて / 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.1k
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
16k
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7k
Other Decks in Design
See All in Design
B/43プラスカードができるまで
putchomsmartbank
0
430
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
410
UIをもたらすコンテクストの考察
securecat
8
2.4k
The Fight
euralisw
0
100
今日から始めるDesignOpsのヒント
isaikaori
1
390
ウェブディレクターを救うBacklog
wattlaa
0
250
Design Leadership in Challenging Times
morganepeng
3
280
Portfolio 2023.07.28
helemarudesu
0
550
🇫🇷 Dogmes et Design Systems, comment faire autrement
morganepeng
0
190
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
0
800
UXデザイナーというものが アジャイルに入ってみた!
muture
2
2k
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
470
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Optimizing for Happiness
mojombo
369
69k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Writing Fast Ruby
sferik
619
59k
Designing the Hi-DPI Web
ddemaree
275
33k
It's Worth the Effort
3n
180
27k
Building Applications with DynamoDB
mza
88
5.6k
Into the Great Unknown - MozCon
thekraken
10
830
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Gamification - CAS2011
davidbonilla
76
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
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