Design System Basic

Style Guide

Color

#0c71c3

Primary

#0abdd8

Secondary

#001e7a

Accent

#0c71c3

Link

#eeeeee

Warm Neutral

#cedee5

Cool Neutral

#333333

Text

#999999

Text Sub

#000000

Text Accent

#dddddd

Border

#eeeeee

Border Light

#000000

Background

#f8f8f8

Background Light

Typography Large

Slogan

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 50 / weight: bold / line-height: 1.3 

Title

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 34 / weight: bold / line-height: 1.3

Sub title

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 24 / weight: semi-bold / line-height: 1.3

Body

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 18 / weight: normal / line-height: 1.4

Small – List, Button, Link

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 16 / weight: normal / line-height: 1.4

Typography Regular

Slogan

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 36 / weight: bold / line-height: 1.3

Title

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 26 / weight: bold / line-height: 1.3

Sub title

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 20 / weight: semi-bold / line-height: 1.3

Body

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 16 / weight: normal / line-height: 1.5

Small – List, Button, Link

안녕하세요 심플솔루션입니다.
기본형 디자인시스템 샘플입니다.

size: 14 / weight: normal / line-height: 1.5

Object Style

테스트

테스트입니다

box shadow 0px 0px 12px 2px rgba(0, 0, 0, 0.1)

테스트

테스트입니다

border 1px / #ddd

테스트

테스트입니다

border radius 10px

Layout

PC regular : max-width 1080 / 1280 / 1580
PC full width : max-width 95%
Mobile 360

Row, Column : Divi layout 그대로 사용

Responsive Break Point

@media (max-width:980) // tablet – divi 에서 mobile 메뉴바 나오는 구간
@media (max-width:480) // mobile

보통은 @media (max-width:980) 1개 사용

Basic Custom CSS

Library

Button

Button Basic
자세히 보기
자세히 보기
자세히 보기
자세히 보기
자세히 보기
자세히 보기
자세히 보기
Button Inline
row 에 class 부여 ( button-inline )
자세히 보기
자세히 보기
Table
구분 세부내용 금액(단위 만원)
가맹비 브랜드 및 매뉴얼 사용, 사후관리 1000
교육비 개점, 서비스, 조리 등 교육 500
구분 세부내용 금액(단위 만원) 비고
가맹비 rowspan 1000 1000
교육비 500 500
교육비 교육비 colspan
교육비 교육비 금액
Card / Blurb

제목이 들어가는 부분

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다. 

제목이 들어가는 부분

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

제목이 들어가는 부분

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

제목이 들어가는 부분

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

제목이 들어가는 부분

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

내용이 들어가는 부분입니다.

더보기 →

내용이 들어가는 부분입니다.

더보기 →

제목들어가는 부분

내용이 들어가는 부분입니다. 내용이 들어가는 부분입니다. 내용이 들어가는 부분입니다.

더보기 →

Team Project

more →

제목들어가는 부분

내용이 들어가는 부분입니다. 내용이 들어가는 부분입니다. 내용이 들어가는 부분입니다.

Project 01

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

Project 01

내용이 들어가는 부분입니다. 이러쿵 저러쿵 이렇게 저렇게 내용이 들어갑니다. 내용이 들어가는 부분입니다.

더보기 →

List

  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here.
  • Your content goes here. Your content goes here.
  • Your content goes here.
  • Your content goes here.
  1. Your content goes here.
  2. Your content goes here.
  3. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
  4. Your content goes here.
  5. Your content goes here.
  1. Your content goes here.
  2. Your content goes here.
  3. Your content goes here. Your content goes here. Your content goes here. Your content goes here. Your content goes here.
  4. Your content goes here.
  5. Your content goes here.