Upgrade to Pro — share decks privately, control downloads, hide ads and more …

理想のカラーパレットをもとめて / color-palette-name-convention-at-wic

hiloki
May 13, 2019

理想のカラーパレットをもとめて / color-palette-name-convention-at-wic

WIC meetup(社内イベント) LT

hiloki

May 13, 2019
Tweet

More Decks by hiloki

Other Decks in Design

Transcript

  1. ໋໊ฤ
    ΧϥʔύϨοτΛ΋ͱΊͯ
    ཧ૝ͷ
    WIC Meetup 2019.05.13

    View Slide

  2. UXΤϯδχΞ͔ͩσβΠϯΤϯδχΞ͔ͩ
    ୩ ୓थ
    CyberAgent Advanced Technology Studio

    View Slide

  3. https://www.winticket.jp/

    View Slide

  4. https://ameblo.jp/shiba-mamehiko/

    View Slide

  5. View Slide

  6. View Slide

  7. 90
    ੡඼͕޷͖͔Ͳ͏͔
    sec
    %
    90
    ৭͚ͩʹجͮ͘

    View Slide

  8. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ
    ίϯτϥετΛߟྀ͢Δ
    ඞཁͳ৭ΛߜΓࠐΉ

    View Slide

  9. Θ͔Γ΍໊͍͢લΛఆٛ͢Δ
    ίϯτϥετΛߟྀ͢Δ
    ඞཁͳ৭ΛߜΓࠐΉ

    View Slide

  10. View Slide

  11. blue_500

    View Slide

  12. blue_500
    blue_400
    blue_600

    View Slide

  13. azure_500
    azure_400
    azure_600

    View Slide

  14. https://atlassian.design/guidelines/brand/color

    View Slide

  15. Snorlax
    https://atlassian.design/guidelines/brand/color

    View Slide

  16. Snorlax
    https://atlassian.design/guidelines/brand/color
    ΧϏ̋ϯ

    View Slide

  17. primary_base
    primary_light
    primary_heavy

    View Slide

  18. primary_base
    primary_light
    primary_heavy

    View Slide

  19. Primary Button
    LABEL Primary Color

    View Slide

  20. Primary Button
    LABEL Primary Color

    View Slide

  21. azure_base
    azure_light
    azure_dark

    View Slide

  22. azure_base
    azure_lighter_15
    azure_darker_10

    View Slide


  23. blue? azure_base? azure_dark_10?

    View Slide

  24. $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

    View Slide

  25. button-primary-base
    button-primary-hover
    button-primary-active
    button-primary-text
    button-primary-text
    button-primary-text

    View Slide

  26. 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)

    View Slide

  27. @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

    View Slide

  28. .button {
    @include button_primary_color;
    }
    Sass

    View Slide

  29. .button {
    background-color: #155AEE;
    color: #FCFDFD;
    }
    .button:hover {
    background-color: #4D82F3;
    }
    .button:active {
    background-color: #114CCA;
    }
    CSS

    View Slide

  30. ίϯτϥετൺΛอͭ޻෉Λ͢Δ
    ڞ௨ݴޠͱͯ͠ѻ͍΍໊͍͢લʹ͢Δ
    ύϨοτͰఆٛͨ͠৭Ҏ֎͸࢖Θͳ͍

    View Slide

  31. Thank you
    @hiloki
    @shiba_mamehiko

    View Slide