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
250
理想のカラーパレットをもとめて / 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.4k
私はいかにしてUXエンジニアになったのか / ux_engineer_meetup
hiloki
4
17k
理想のカラーパレットをもとめて / color-palette-name-convention
hiloki
2
7.8k
Other Decks in Design
See All in Design
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
550
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
730
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
0
110
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
190
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.3k
セブンデックス カルチャーブック
sevendex
0
4k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
590
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
aokashi
0
220
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
910
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Building an army of robots
kneath
303
45k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Language of Interfaces
destraynor
156
24k
Become a Pro
speakerdeck
PRO
26
5.2k
GraphQLとの向き合い方2022年版
quramy
44
14k
Bash Introduction
62gerente
611
210k
Docker and Python
trallard
44
3.3k
Designing Experiences People Love
moore
140
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Writing Fast Ruby
sferik
628
61k
Unsuck your backbone
ammeep
669
57k
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