UI 设计师 出完设计规范后,最好可以有一份前端使用的“调色盘”。不但会方便后期与开发进行样式调整,还可减少很多重复的代码。是提升协作效率的必备神技!

创建方法

  1. 创建一个CSS文件;
  2. 在 html{ } 中编辑好所有的样式规范并保存;【如:颜色样式:–color_textHead:#212027】;
  3. 在页面应用刚刚定义好的样式即可【如:使颜色调用 var(–color_textHead)】;

* 调色盘不仅可以定义颜色,还可以定义投影、边框、过度属性、间距等

我的调色盘

地址:http://demo.wubin.design/

    /*颜色*/
        /*主题*/
    --C1: #0057ff;
    --C2: #0046CF;
    --VIP: #ffd40c;
        /*彩色*/
    --blue: #5e72e4;
    --indigo: #5603ad;
    --purple: #8965e0;
    --pink: #f3a4b5;
    --red: #f5365c;
    --orange: #fb6340;
    --yellow: #ffd600;
    --green: #2dce89;
    --teal: #11cdef;
    --cyan: #2bffc6;
    --gray: #8898aa;
    --gray-dark: #32325d;
    --lighter: #e9ecef;
    --success: #2dce89;
    --info: #11cdef;
    --warning: #fb6340;
    --danger: #f5365c;
    --light: #adb5bd;
    --dark: #212529;
    --default: #172b4d;
    --black: #000;
    --white: #fff;
        /*白色皮肤*/
    --L-02: rgba(0, 0, 0, 0.02);
    --L-05: rgba(0, 0, 0, 0.05);
    --L-10: rgba(0, 0, 0, 0.1);
    --L-20: rgba(0, 0, 0, 0.2);
    --L-40: rgba(0, 0, 0, 0.4);
    --L-50: rgba(0, 0, 0, 0.5);
    --L-60: rgba(0, 0, 0, 0.6);
    --L-87: rgba(0, 0, 0, 0.87);
    --L-BG1: #F8F9FE;
    --L-BG2: #efefef;
        /*深色皮肤*/
    --D-02: rgba(255, 255, 255, 0.02);
    --D-05: rgba(255, 255, 255, 0.05);
    --D-10: rgba(255, 255, 255, 0.1);
    --D-20: rgba(255, 255, 255, 0.2);
    --D-40: rgba(255, 255, 255, 0.4);
    --D-50: rgba(255, 255, 255, 0.5);
    --D-60: rgba(255, 255, 255, 0.6);
    --D-87: rgba(255, 255, 255, 0.87);
    --D-BG1: #212121;
    --D-BG2: #333;
        /*文字*/
    --T1: #32325D;
    --T2: #8898AA;
    --T3: #DEE2E6;
        /*边框*/
    --border1: #ddd;
    --border2: #888;
    --border-type1: dotted;
    --border-width1: 1px;
    
    /*文字*/
       /*字体*/
    --ff1: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    --ff2: 'Anyway Type','Myriad Pro','PingFang SC','Microsoft YaHei',sans-serif;
        /*字号*/
    --h1: bold 48px/48px var(--ff2);
    --h2: bold 30px/46px var(--ff2);
    --h3: bold 26px/40px var(--ff2);
    --h4: bold 22px/34px var(--ff2);
    --h5: bold 18px/1.5 var(--ff2);
    --p: normal 16px/1.5 var(--ff1);
    --m: normal 14px/1.5 var(--ff1);
    --s: normal 12px/1.5 var(--ff1);
        /*黄金行高*/
    --lh-1: 1.618;
    --lh-2: 1.5;
       /*优化*/
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
    
    /*块块*/
    --px0: 0px;
    --px1: 1px;
    --px2: 2px;
    --px4: 4px;
    --px5: 5px;
    --px8: 8px;
    --px10: 10px;
    --px12: 12px;
    --px14: 14px;
    --px15: 15px;
    --px16: 16px;
    --px18: 18px;
    --px20: 20px;
    --px22: 22px;
    --px24: 24px;
    --px25: 25px;
    --px26: 26px;
    --px28: 28px;
    --px30: 30px;
    --px35: 35px;
    --px40: 40px;
    --px50: 50px;
    --px60: 60px;
    --px80: 80px;
    --px100: 100px;
    --radius1: 4px;
    --radius2: 8px;
    --radius3: 12px;  
    --margin1: 8px;
    --margin2: 15px;
    --margin3: 30px;
    --margin4: 40px;
    
    /*投影*/
    --shadow-1: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 0 2rem 0 rgba(136,152,170,.15);
    --shadow-3: 0px 0.673334px 2.02px rgba(0, 0, 0, 0.08), 0px 2.69334px 4.04px rgba(50, 50, 93, 0.11);
    --shadow-card: 0 0 2rem 0 rgba(136,152,170,.15);
    
    /*动画*/
    --curve: cubic-bezier(0,.3,.8,1);
    --duration: .12s;
    --transition: all var(--duration) var(--curve);
    transition: background-color .1s var(--curve);

调色盘参考

Apple

注重响应式设计的 Apple,它的调色盘只定义了视口宽度规范。说明视口宽度的定义真的很重要!(产品做的再花里胡哨,也比不上 Apple官网 给不同屏幕用户带来的统一性体验。)

官网:https://www.apple.com/

    --r-globalnav-viewport-large-min-width: 1024px;
    --r-globalnav-viewport-large-max-width: 1441px;
    --r-globalnav-viewport-large-query: (min-width: 1024px);

    --r-globalnav-viewport-medium-min-width: 768px;
    --r-globalnav-viewport-medium-max-width: 1023px;
    --r-globalnav-viewport-medium-query: (max-width: 1023px);

    --r-globalnav-viewport-small-min-width: 420px;
    --r-globalnav-viewport-small-max-width: 767px;
    --r-globalnav-viewport-small-query: (max-width: 767px);

    --r-globalnav-viewport-xsmall-min-width: 320px;
    --r-globalnav-viewport-xsmall-max-width: 419px;
    --r-globalnav-viewport-xsmall-query: (max-width: 419px);

Figma

官网:https://www.framer.com/

--fraction-color-border: #f5f5f5;
--fraction-color-borderHighlight: rgba(0,0,0,0.05);
--fraction-color-buttonBackground: #f3f3f3;
--fraction-color-buttonColor: #000;
--fraction-color-buttonDangerBackground: #f36;
--fraction-color-buttonDangerColor: #fff;
--fraction-color-buttonDangerFocusOutline: rgba(255,255,255,0.06);
--fraction-color-buttonDangerHoverBackground: #e7315f;
--fraction-color-buttonFocusOutline: rgba(0,0,0,0.04);
--fraction-color-buttonHoverBackground: #e3e3e3;
--fraction-color-buttonIconColor: #999;
--fraction-color-buttonIconHoverColor: #888;
--fraction-color-buttonPrimaryBackground: #09f;
--fraction-color-buttonPrimaryColor: #fff;
--fraction-color-buttonPrimaryFocusOutline: rgba(0,0,0,0.04);
--fraction-color-buttonPrimaryHoverBackground: #07f;
--fraction-color-buttonSecondaryBackground: #05f;
--fraction-color-buttonSecondaryColor: #fff;
--fraction-color-buttonSecondaryFocusOutline: rgba(0,0,0,0.04);
--fraction-color-buttonSecondaryHoverBackground: #04d;
--fraction-color-buttonSuccessBackground: #0c8;
--fraction-color-buttonSuccessColor: #fff;
--fraction-color-buttonSuccessFocusOutline: rgba(0,0,0,0.04);
--fraction-color-buttonSuccessHoverBackground: #00B37D;
--fraction-color-danger: #f36;
--fraction-color-dangerDark: #e7315f;
--fraction-color-footerBackground: #fff;
--fraction-color-footerCookiesLink: #666;
--fraction-color-footerCopyrightLink: #777;
--fraction-color-footerIcon: #888;
--fraction-color-footerIconHover: #09f;
--fraction-color-footerLink: #333;
--fraction-color-inputBackground: #f3f3f3;
--fraction-color-inputBackgroundTransparent: rgba(243,243,243,0);
--fraction-color-inputColor: #111;
--fraction-color-inputDangerColor: #f36;
--fraction-color-inputDangerFocusBorder: #f36;
--fraction-color-inputDisabledColor: #ccc;
--fraction-color-inputFocusBorder: #09f;
--fraction-color-inputHoverBackground: #f4f4f4;
--fraction-color-inputPlaceholderColor: #bababa;
--fraction-color-listActiveBackground: #f4f4f4;
--fraction-color-listBorder: #fdfdfd;
--fraction-color-listColor: #333;
--fraction-color-navBackground: #fff;
--fraction-color-navBorder: rgba(0,0,0,0.05);
--fraction-color-navColor: #111;
--fraction-color-overlayColor: rgba(0,0,0,.25);
--fraction-color-pageBackground: #fff;
--fraction-color-pageColor: #000;
--fraction-color-primary: #09f;
--fraction-color-primaryColor: #fff;
--fraction-color-primaryDark: #07f;
--fraction-color-primaryLight: #0af;
--fraction-color-searchBackground: #111;
--fraction-color-secondary: #f3f3f3;
--fraction-color-secondaryColor: #444;
--fraction-color-secondaryDark: #f5f5f5;
--fraction-color-secondaryLight: #555;
--fraction-color-selection: #fff;
--fraction-color-selectionBackground: rgba(0,170,255,0.99);
--fraction-color-selectionBackgroundFaint: rgba(0,170,255,0.4);
--fraction-color-sheetBackground: #fff;
--fraction-color-sheetColor: #111;
--fraction-color-sidebarLink: #111;
--fraction-color-success: #0c8;
--fraction-color-successDark: #00B37D;
--fraction-color-tertiary: #85f;
--fraction-color-textBody: #111;
--fraction-color-textDimmed: #999;
--fraction-color-textHeadline: #000;
--fraction-color-textLight: #555;
--fraction-color-toolbarIcon: #aaa;
--fraction-color-tooltipBackground: #aaa;
--fraction-color-translucent: rgba(255,255,255,.6);
--fraction-color-vibrant: rgba(255,255,255,.9);
--fraction-shadow-button: 0px 1px 2px 0px rgba(0,0,0,0.1),0px 2px 10px 0px rgba(0,0,0,0.08);
--fraction-shadow-buttonHover: 0px 1px 4px 0px rgba(0,0,0,0.08),0px 3px 16px 0px rgba(0,0,0,0.06);
--fraction-shadow-card: 0 6px 8px 0 rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.04);
--fraction-shadow-cardHover: 0 8px 12px 0 rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.04);
--fraction-shadow-sliderKnob: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 0.5px 0px 0px rgba(0,0,0,0.1);
--fraction-shadow-videoPlayer: 0px 8px 10px 0px rgba(0,0,0,0.1);

BootStrap

官网:https://getbootstrap.com/

--blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

Tesla 特斯拉

官网:https://www.tesla.com/

    --tds-animate--move: transform 900ms cubic-bezier(.75,0,0,1);
    --tds-animate--color: background-color 450ms cubic-bezier(.5,.25,.25,.75),color 450ms cubic-bezier(.5,.25,.25,.75),opacity 450ms cubic-bezier(.5,.25,.25,.75);
    --tds-animate--focus: border 250ms cubic-bezier(.5,.25,.25,.75),box-shadow 250ms cubic-bezier(.5,.25,.25,.75),color 250ms cubic-bezier(.5,.25,.25,.75),opacity 250ms cubic-bezier(.5,.25,.25,.75);
    --tds-animate-all--long: all 900ms cubic-bezier(.75,0,0,1),background-color 900ms cubic-bezier(.5,.25,.25,.75),color 900ms cubic-bezier(.5,.25,.25,.75),opacity 900ms cubic-bezier(.5,.25,.25,.75);
    --tds-border-style: solid;
    --tds-border-radius: 4px;
    --tds-border-radius--pill: 100px;
    --tds-border-radius--forms: 20px;
    --tds-border-width--hairline: 0.5px;
    --tds-border-width--small: 1px;
    --tds-border-width--medium: 2px;
    --tds-border-width--large: 3px;
    --tds-color--black: #000;
    --tds-color--grey10: #171a20;
    --tds-color--grey15: #222;
    --tds-color--grey20: #393c41;
    --tds-color--grey25: #444;
    --tds-color--grey30: #5c5e62;
    --tds-color--grey35: #757575;
    --tds-color--grey40: #a2a3a5;
    --tds-color--grey50: #d0d1d2;
    --tds-color--grey60: #eee;
    --tds-color--grey70: #f4f4f4;
    --tds-color--white: #fff;
    --tds-color--blue30: #3e6ae1;
    --tds-color--blue20: #3457b1;
    --tds-color--blue10: #2e4994;
    --tds-color--red10: #b74134;
    --tds-color--red20: #ed4e3b;
    --tds-color--green10: #12bb00;
    --tds-color--green20: #02e359;
    --tds-color--yellow: #fbb01b;
    --tds-font: system,sans-serif;
    --tds-font-size--10: 10px;
    --tds-font-size--20: 12px;
    --tds-font-size--30: 14px;
    --tds-font-size--40: 17px;
    --tds-font-size--50: 20px;
    --tds-font-size--55: 23px;
    --tds-font-size--60: 24px;
    --tds-font-size--70: 28px;
    --tds-font-size--75: 34px;
    --tds-font-size--80: 40px;
    --tds-font-chinese--simplified: "HeiT ASC Traditional Chinese";
    --tds-font-chinese--traditional: "M Hei PRC W45";
    --tds-font-mandarin: "M Hei PRC W45";
    --tds-font-cantonese: "M Hei HK";
    --tds-font-japanese: "AXIS Font Japanese W55";
    --tds-font-korean: "FB New Gothic";
    --tds-font-arabic: Swissra;
    --tds-font-latin: "Gotham Book";
    --tds-font-latin--extra-light: "Gotham Extra Light";
    --tds-font-latin--light: "Gotham Light";
    --tds-font-latin--medium: "Gotham Medium";
    --tds-font-latin--bold: "Gotham Bold";
    --tds-font-monospace: "Fira Code",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
    --tds-font-combined: "HeiT ASC Traditional Chinese","M Hei PRC W45","AXIS Font Japanese W55","FB New Gothic","Gotham Book",system,sans-serif;
    --tds-font-combined--extra-light: "HeiT ASC Traditional Chinese","M Hei PRC W45","AXIS Font Japanese W55","FB New Gothic","Gotham Extra Light",system,sans-serif;
    --tds-font-combined--light: "HeiT ASC Traditional Chinese","M Hei PRC W45","AXIS Font Japanese W55","FB New Gothic","Gotham Light",system,sans-serif;
    --tds-font-combined--medium: "HeiT ASC Traditional Chinese","M Hei PRC W45","AXIS Font Japanese W55","FB New Gothic","Gotham Medium",system,sans-serif;
    --tds-font-combined--bold: "HeiT ASC Traditional Chinese","M Hei PRC W45","AXIS Font Japanese W55","FB New Gothic","Gotham Bold",system,sans-serif;
    --tds-line-height--10: 18px;
    --tds-line-height--20: 20px;
    --tds-line-height--30: 21px;
    --tds-line-height--40: 23px;
    --tds-line-height--50: 24px;
    --tds-line-height--60: 28px;
    --tds-line-height--70: 36px;
    --tds-line-height--75: 45px;
    --tds-line-height--80: 48px;
    --tds-line-height--unitless: 1.414;
    --tds-locale-canada--english: i18n-en_CA;
    --tds-locale-canada--french: i18n-fr_CA;
    --tds-locale-mexico--spanish: i18n-es_MX;
    --tds-locale-us--english: i18n-en_US;
    --tds-locale-belgium--french: i18n-fr_BE;
    --tds-locale-belgium--dutch: i18n-nl_BE;
    --tds-locale-denmark--danish: i18n-da_DK;
    --tds-locale-germany--german: i18n-de_DE;
    --tds-locale-france--french: i18n-fr_FR;
    --tds-locale-great-britain: i18n-en_GB;
    --tds-locale-italy--italian: i18n-it_IT;
    --tds-locale-ireland: i18n-en_IE;
    --tds-locale-netherlands--dutch: i18n-nl_NL;
    --tds-locale-norway--norwegian: i18n-no_NO;
    --tds-locale-austria: i18n-de_AT;
    --tds-locale-switzerland--german: i18n-de_CH;
    --tds-locale-switzerland--french: i18n-fr_CH;
    --tds-locale-switzerland--italian: i18n-it_CH;
    --tds-locale-sweden: i18n-sv_SE;
    --tds-locale-other-europe: i18n-en_EU;
    --tds-locale-finland: i18n-fi_FI;
    --tds-locale-luxembourg--french: i18n-fr_LU;
    --tds-locale-luxembourg--german: i18n-de_LU;
    --tds-locale-portugal: i18n-pt_PT;
    --tds-locale-spain: i18n-es_ES;
    --tds-locale-australia: i18n-en_AU;
    --tds-locale-china: i18n-zh_CN;
    --tds-locale-hongkong--english: i18n-en_MO;
    --tds-locale-hongkong--chinese: i18n-zh_HK;
    --tds-locale-macau--english: i18n-en_MO;
    --tds-locale-macau--chinese: i18n-zh_MO;
    --tds-locale-japan: i18n-ja_JP;
    --tds-locale-new-zealand: i18n-en_NZ;
    --tds-locale-taiwan: i18n-zh_TW;
    --tds-locale-south-korea: i18n-ko_KR;
    --tds-locale-jordan--english: i18n-en_JO;
    --tds-locale-jordan--arabic: i18n-ar_JO;
    --tds-locale-uae--english: i18n-en_AE;
    --tds-locale-uae--arabic: i18n-ar_AE;
    --tds-locale-saudi-arabia--english: i18n-en_SA;
    --tds-locale-saudi-arabia--arabic: i18n-ar_SA;
    --tds-locale-south-africa: i18n-en_ZA;
    --tds-opacity--30: 0.3;
    --tds-opacity--50: 0.5;
    --tds-opacity--70: 0.7;
    --tds-opacity--100: 1;
    --tds-opacity--transparent: 0;
    --tds-region--north-america: superregion-north-america;
    --tds-region--europe: superregion-europe;
    --tds-region--asia-pacific: superregion-apac;
    --tds-region--middle-east: superregion-middle-east;
    --tds-size: 8px;
    --tds-size--half: 4px;
    --tds-size--1x: 8px;
    --tds-size--2x: 16px;
    --tds-size--3x: 24px;
    --tds-size--4x: 32px;
    --tds-size--5x: 40px;
    --tds-size--6x: 48px;
    --tds-size--7x: 56px;
    --tds-size--8x: 64px;
    --tds-size--9x: 72px;
    --tds-size--10x: 80px;
    --tds-size--11x: 88px;
    --tds-size--12x: 96px;
    --tds-size--13x: 104px;

Coda

官网:https://coda.io/?r=xe3nfzNGT3GnEnLgxj4Xeg

--font-size-smaller: 12px;
    --font-size-small: 13px;
    --font-size-normal: 14px;
    --font-size-deprecated-large: 15px;
    --font-size-large: 16px;
    --font-size-title: 18px;
    --font-size-hero: 30px;
    --font-size-code: 13.6px;
    --font-size-h0: 40px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h1-mobile: 28px;
    --font-size-h2-mobile: 22px;
    --font-size-h3-mobile: 18px;
    --font-line-height-standard: 18px;
    --font-line-height-large: 24px;
    --font-line-height-hero: 36px;
    --font-line-height-h0: 48px;
    --font-line-height-h1: 36px;
    --font-line-height-h2: 32px;
    --font-line-height-h3: 28px;
    --font-line-height-h1-mobile: 32px;
    --font-line-height-h2-mobile: 28px;
    --font-line-height-h3-mobile: 24px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-canvas-headings: 600;
    --font-margin-top-h0: 3px;
    --font-margin-bottom-h0: 1px;
    --font-margin-top-h1: 12px;
    --font-margin-bottom-h1: 24px;
    --font-margin-top-h2: 1px;
    --font-margin-bottom-h2: 15px;
    --font-margin-top-h3: 4.5px;
    --font-margin-bottom-h3: 7.5px;
    --font-margin-top-h1-mobile: 7.5px;
    --font-margin-bottom-h1-mobile: 16.5px;
    --font-margin-top-h2-mobile: 3.75px;
    --font-margin-bottom-h2-mobile: 8.25px;
    --font-margin-top-h3-mobile: 3.25px;
    --font-margin-bottom-h3-mobile: 8.75px;
    --font-margin-list: 8px;
    --font-margin-folded-lines-unit: 8px;
    --font-padding-horizontal-code: 24px;
    --font-padding-vertical-code: 16px;
    --font-padding-bottom-table-header: 6px;
    --font-indent-paragraph: 24px;
    --font-indent-quote: 24px;
    --font-letter-spacing-h0: -0.005em;
    --font-letter-spacing-h1: "normal";
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: var(--font-size-normal);
    line-height: var(--font-line-height-standard);
    font-weight: var(--font-weight-regular);
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    background: #fff;
    border: 0;
    color: #444;
    margin: 0;
    overflow-y: hidden;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip: ink;

The sign painting so big? Apple products will at any time those who make a person recognized apple’s products rather than is the apple logo.

把标志画那么大干吗?我们的产品要在任何时候都让人一眼认出是我们的产品而不是我们的标志。

乔布斯

Posted by:Bruce

Hi! I’m Bruce Wu UI/UX Design, Product Designer, Freelance👋 Some Availability For Projects. My superpower is to channel my interdisciplinary skill sets to create appealing and delightful experience for users in meaningful ways, to make people's lives easy and simple.