Skip to content

Flat Design

Flat design 이란 쉽게 말하자면 여성들의 바닥이 평평한 신발을 플랫슈즈를 일컫듯이 디자인에도 입체감을 주는 디자인이 아니라 평평한 느낌을 주는 것들이 Flat Design이라고 보면 된다.

Sample

Flat_Design-module_diagram_example_1.png
Mmii_flat_icons_vol_1_by_stalker018-d67vr1s.jpg
Flat_Design-module_diagram_example_1.zip

MMII FLAT icons Vol.1

Color

Default palette

/*  Flat color palette downloaded from
 *  http://htmlcolorcodes.com/color-charts/
 *
 *  Check out our powerful color picker
 *  http://htmlcolorcodes.com/color-picker/
 *
 *  Want to learn more about colors in CSS?
 *  http://htmlcolorcodes.com/tutorials/
 *
 *  - - - - - - - - - - - - - - - - - - 
 *  Credits:
 *
 *  Original color palette by
 *  http://designmodo.github.io/Flat-UI/
 *
 *  - - - - - - - - - - - - - - - - - -
 *  How to use:
 *  
 *  Include this file with your stylesheets
 *  in the <head> of your HTML file:
 *
 *  <head>
 *    ...
 *    <link href="path/to/css/flat_colors.css" rel="stylesheet">
 *    ...
 *  </head>
 *  
 *  and in the <body> of your HTML you can style
 *  any element using a class:
 *  
 *  <body>
 *      ...
 *      <h1 class="turquoise">Your Colored Title</h1>
 *    ...
 *  </body>
 */

/* Teals */
.turquoise { color: #1abc9c; }
.green-sea { color: #16a085; }

/* Greens */
.emerald { color: #2ecc71; }
.nephritis { color: #27ae60; }

/* Blues */
.peter-river { color: #3498db; }
.belize-hole { color: #2980b9; }

/* Purples */
.amethyst { color: #9b59b6; }
.wisteria { color: #8e44ad; }

/* Blacks */
.wet-asphalt { color: #34495e; }
.midnight-blue { color: #2c3e50; }

/* Yellows */
.sunflower { color: #f1c40f; }
.orange { color: #f39c12; }

/* Oranges */
.carrot { color: #e67e22; }
.pumpkin { color: #d35400; }

/* Reds */
.alizarin { color: #e74c3c; }
.pomegranate { color: #c0392b; }

/* Whites */
.clouds { color: #ecf0f1; }
.silver { color: #bdc3c7; }

/* Grays */
.concrete { color: #95a5a6; }
.asbestos { color: #7f8c8d; }

/*  Want more? Get the full flat color palette at
 *  http://htmlcolorcodes.com/color-charts/
 */

Full colors

/*  Flat color palette (full) downloaded from
 *  http://htmlcolorcodes.com/color-charts/
 *
 *  Check out our powerful color picker
 *  http://htmlcolorcodes.com/color-picker/
 *
 *  Want to learn more about colors in SCSS?
 *  http://htmlcolorcodes.com/tutorials/
 *
 *  - - - - - - - - - - - - - - - - - - 
 *  Credits:
 *
 *  Original color palette by
 *  http://designmodo.github.io/Flat-UI/
 *
 *  - - - - - - - - - - - - - - - - - -
 *  How to use:
 *  
 *  Include this file with your stylesheets
 *  in the <head> of your HTML file:
 *
 *  <head>
 *    ...
 *    <link href="path/to/css/flat_colors_full.css" rel="stylesheet">
 *    ...
 *  </head>
 *  
 *  and in the body of your HTML you can style
 *  any element using a class:
 *  
 *  <body>
 *      ...
 *      <h1 class="turquoise-500">Your Colored Title</h1>
 *    ...
 *  </body>
 *
 *  - - - - - - - - - - - - - - - - - -
 *  Note:
 *
 *  .color and .color-500 are the same, simply there
 *  for your convenience.
 */

/* Turquoise */
.turquoise { color: #1abc9c; }
.turquoise-50 { color: #e8f8f5; }
.turquoise-100 { color: #d1f2eb; }
.turquoise-200 { color: #a3e4d7; }
.turquoise-300 { color: #76d7c4; }
.turquoise-400 { color: #48c9b0; }
.turquoise-500 { color: #1abc9c; }
.turquoise-600 { color: #17a589; }
.turquoise-700 { color: #148f77; }
.turquoise-800 { color: #117864; }
.turquoise-900 { color: #0e6251; }

/* Green Sea */
.green-sea { color: #16a085; }
.green-sea-50 { color: #e8f6f3; }
.green-sea-100 { color: #d0ece7; }
.green-sea-200 { color: #a2d9ce; }
.green-sea-300 { color: #73c6b6; }
.green-sea-400 { color: #45b39d; }
.green-sea-500 { color: #16a085; }
.green-sea-600 { color: #138d75; }
.green-sea-700 { color: #117a65; }
.green-sea-800 { color: #0e6655; }
.green-sea-900 { color: #0b5345; }

/* Emerald */
.emerald { color: #2ecc71; }
.emerald-50 { color: #eafaf1; }
.emerald-100 { color: #d5f5e3; }
.emerald-200 { color: #abebc6; }
.emerald-300 { color: #82e0aa; }
.emerald-400 { color: #58d68d; }
.emerald-500 { color: #2ecc71; }
.emerald-600 { color: #28b463; }
.emerald-700 { color: #239b56; }
.emerald-800 { color: #1d8348; }
.emerald-900 { color: #186a3b; }

/* Nephritis */
.nephritis { color: #27ae60; }
.nephritis-50 { color: #e9f7ef; }
.nephritis-100 { color: #d4efdf; }
.nephritis-200 { color: #a9dfbf; }
.nephritis-300 { color: #7dcea0; }
.nephritis-400 { color: #52be80; }
.nephritis-500 { color: #27ae60; }
.nephritis-600 { color: #229954; }
.nephritis-700 { color: #1e8449; }
.nephritis-800 { color: #196f3d; }
.nephritis-900 { color: #145a32; }

/* Peter River */
.peter-river { color: #3498db; }
.peter-river-50 { color: #ebf5fb; }
.peter-river-100 { color: #d6eaf8; }
.peter-river-200 { color: #aed6f1; }
.peter-river-300 { color: #85c1e9; }
.peter-river-400 { color: #5dade2; }
.peter-river-500 { color: #3498db; }
.peter-river-600 { color: #2e86c1; }
.peter-river-700 { color: #2874a6; }
.peter-river-800 { color: #21618c; }
.peter-river-900 { color: #1b4f72; }

/* Belize Hole */
.belize-hole { color: #2980b9; }
.belize-hole-50 { color: #eaf2f8; }
.belize-hole-100 { color: #d4e6f1; }
.belize-hole-200 { color: #a9cce3; }
.belize-hole-300 { color: #7fb3d5; }
.belize-hole-400 { color: #5499c7; }
.belize-hole-500 { color: #2980b9; }
.belize-hole-600 { color: #2471a3; }
.belize-hole-700 { color: #1f618d; }
.belize-hole-800 { color: #1a5276; }
.belize-hole-900 { color: #154360; }

/* Amethyst */
.amethyst { color: #9b59b6; }
.amethyst-50 { color: #f5eef8; }
.amethyst-100 { color: #ebdef0; }
.amethyst-200 { color: #d7bde2; }
.amethyst-300 { color: #c39bd3; }
.amethyst-400 { color: #af7ac5; }
.amethyst-500 { color: #9b59b6; }
.amethyst-600 { color: #884ea0; }
.amethyst-700 { color: #76448a; }
.amethyst-800 { color: #633974; }
.amethyst-900 { color: #512e5f; }

/* Wisteria */
.wisteria { color: #8e44ad; }
.wisteria-50 { color: #f4ecf7; }
.wisteria-100 { color: #e8daef; }
.wisteria-200 { color: #d2b4de; }
.wisteria-300 { color: #bb8fce; }
.wisteria-400 { color: #a569bd; }
.wisteria-500 { color: #8e44ad; }
.wisteria-600 { color: #7d3c98; }
.wisteria-700 { color: #6c3483; }
.wisteria-800 { color: #5b2c6f; }
.wisteria-900 { color: #4a235a; }

/* Wet Asphalt */
.wet-asphalt { color: #34495e; }
.wet-asphalt-50 { color: #ebedef; }
.wet-asphalt-100 { color: #d6dbdf; }
.wet-asphalt-200 { color: #aeb6bf; }
.wet-asphalt-300 { color: #85929e; }
.wet-asphalt-400 { color: #5d6d7e; }
.wet-asphalt-500 { color: #34495e; }
.wet-asphalt-600 { color: #2e4053; }
.wet-asphalt-700 { color: #283747; }
.wet-asphalt-800 { color: #212f3c; }
.wet-asphalt-900 { color: #1b2631; }

/* Midnight Blue */
.midnight-blue { color: #2c3e50; }
.midnight-blue-50 { color: #eaecee; }
.midnight-blue-100 { color: #d5d8dc; }
.midnight-blue-200 { color: #abb2b9; }
.midnight-blue-300 { color: #808b96; }
.midnight-blue-400 { color: #566573; }
.midnight-blue-500 { color: #2c3e50; }
.midnight-blue-600 { color: #273746; }
.midnight-blue-700 { color: #212f3d; }
.midnight-blue-800 { color: #1c2833; }
.midnight-blue-900 { color: #17202a; }

/* Sunflower */
.sunflower { color: #f1c40f; }
.sunflower-50 { color: #fef9e7; }
.sunflower-100 { color: #fcf3cf; }
.sunflower-200 { color: #f9e79f; }
.sunflower-300 { color: #f7dc6f; }
.sunflower-400 { color: #f4d03f; }
.sunflower-500 { color: #f1c40f; }
.sunflower-600 { color: #d4ac0d; }
.sunflower-700 { color: #b7950b; }
.sunflower-800 { color: #9a7d0a; }
.sunflower-900 { color: #7d6608; }

/* Orange */
.orange { color: #f39c12; }
.orange-50 { color: #fef5e7; }
.orange-100 { color: #fdebd0; }
.orange-200 { color: #fad7a0; }
.orange-300 { color: #f8c471; }
.orange-400 { color: #f5b041; }
.orange-500 { color: #f39c12; }
.orange-600 { color: #d68910; }
.orange-700 { color: #b9770e; }
.orange-800 { color: #9c640c; }
.orange-900 { color: #7e5109; }

/* Carrot */
.carrot { color: #e67e22; }
.carrot-50 { color: #fdf2e9; }
.carrot-100 { color: #fae5d3; }
.carrot-200 { color: #f5cba7; }
.carrot-300 { color: #f0b27a; }
.carrot-400 { color: #eb984e; }
.carrot-500 { color: #e67e22; }
.carrot-600 { color: #ca6f1e; }
.carrot-700 { color: #af601a; }
.carrot-800 { color: #935116; }
.carrot-900 { color: #784212; }

/* Pumpkin */
.pumpkin { color: #d35400; }
.pumpkin-50 { color: #fbeee6; }
.pumpkin-100 { color: #f6ddcc; }
.pumpkin-200 { color: #edbb99; }
.pumpkin-300 { color: #e59866; }
.pumpkin-400 { color: #dc7633; }
.pumpkin-500 { color: #d35400; }
.pumpkin-600 { color: #ba4a00; }
.pumpkin-700 { color: #a04000; }
.pumpkin-800 { color: #873600; }
.pumpkin-900 { color: #6e2c00; }

/* Alizarin */
.alizarin { color: #e74c3c; }
.alizarin-50 { color: #fdedec; }
.alizarin-100 { color: #fadbd8; }
.alizarin-200 { color: #f5b7b1; }
.alizarin-300 { color: #f1948a; }
.alizarin-400 { color: #ec7063; }
.alizarin-500 { color: #e74c3c; }
.alizarin-600 { color: #cb4335; }
.alizarin-700 { color: #b03a2e; }
.alizarin-800 { color: #943126; }
.alizarin-900 { color: #78281f; }

/* Pomegranate */
.pomegranate { color: #c0392b; }
.pomegranate-50 { color: #f9ebea; }
.pomegranate-100 { color: #f2d7d5; }
.pomegranate-200 { color: #e6b0aa; }
.pomegranate-300 { color: #d98880; }
.pomegranate-400 { color: #cd6155; }
.pomegranate-500 { color: #c0392b; }
.pomegranate-600 { color: #a93226; }
.pomegranate-700 { color: #922b21; }
.pomegranate-800 { color: #7b241c; }
.pomegranate-900 { color: #641e16; }

/* Clouds */
.clouds { color: #ecf0f1; }
.clouds-50 { color: #fdfefe; }
.clouds-100 { color: #fbfcfc; }
.clouds-200 { color: #f7f9f9; }
.clouds-300 { color: #f4f6f7; }
.clouds-400 { color: #f0f3f4; }
.clouds-500 { color: #ecf0f1; }
.clouds-600 { color: #d0d3d4; }
.clouds-700 { color: #b3b6b7; }
.clouds-800 { color: #979a9a; }
.clouds-900 { color: #7b7d7d; }

/* Silver */
.silver { color: #bdc3c7; }
.silver-50 { color: #f8f9f9; }
.silver-100 { color: #f2f3f4; }
.silver-200 { color: #e5e7e9; }
.silver-300 { color: #d7dbdd; }
.silver-400 { color: #cacfd2; }
.silver-500 { color: #bdc3c7; }
.silver-600 { color: #a6acaf; }
.silver-700 { color: #909497; }
.silver-800 { color: #797d7f; }
.silver-900 { color: #626567; }

/* Concrete */
.concrete { color: #95a5a6; }
.concrete-50 { color: #f4f6f6; }
.concrete-100 { color: #eaeded; }
.concrete-200 { color: #d5dbdb; }
.concrete-300 { color: #bfc9ca; }
.concrete-400 { color: #aab7b8; }
.concrete-500 { color: #95a5a6; }
.concrete-600 { color: #839192; }
.concrete-700 { color: #717d7e; }
.concrete-800 { color: #5f6a6a; }
.concrete-900 { color: #4d5656; }

/* Asbestos */
.asbestos { color: #7f8c8d; }
.asbestos-50 { color: #f2f4f4; }
.asbestos-100 { color: #e5e8e8; }
.asbestos-200 { color: #ccd1d1; }
.asbestos-300 { color: #b2babb; }
.asbestos-400 { color: #99a3a4; }
.asbestos-500 { color: #7f8c8d; }
.asbestos-600 { color: #707b7c; }
.asbestos-700 { color: #616a6b; }
.asbestos-800 { color: #515a5a; }
.asbestos-900 { color: #424949; }

/*  Want more? Check our our other color palettes at
 *  http://htmlcolorcodes.com/color-charts/
 */

See also

Favorite site

Bootstrap