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
260
理想のカラーパレットをもとめて / 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
8.1k
Other Decks in Design
See All in Design
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
Echoes Boomerang
artcloudyu
PRO
0
250
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
290
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.5k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
470
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.7k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
sugiyama_sukedachi
0
140
オープンデータを利用して色々なものを作った話
hjmkth
1
120
アクセシビリティに取り組むメリット
magi1125
1
190
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
AI時代に淘汰されないデザインのしごと
akinen
1
140
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Speed Design
sergeychernyshev
32
1k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Writing Fast Ruby
sferik
628
62k
Why Our Code Smells
bkeepers
PRO
336
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
86
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Thoughts on Productivity
jonyablonski
69
4.7k
Statistics for Hackers
jakevdp
799
220k
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