Back

Design System

Invisible Works UI Components & Typography

Typography

Current Language: KO

Font Family: Pretendard

안녕하세요, Invisible Works입니다.

안녕하세요, Invisible Works입니다.

안녕하세요, Invisible Works입니다.

안녕하세요, Invisible Works입니다.

안녕하세요, Invisible Works입니다.

Language Font Guide

  • Korean (KO): Pretendard Variable - 한국어 UI에 최적화된 산세리프
  • English (EN): Inter - Clean and modern sans-serif for English
  • Chinese Simplified (ZH-CN): Noto Sans SC - 简体中文专用无衬线字体
  • Chinese Traditional (ZH-TW): Noto Sans TC - 繁體中文專用無襯線字體

Basic Components

Glass Buttons

Special Buttons

Badges

AccentOutlineProcessPortfolio

Inputs

필수 입력 값입니다
내용을 입력해주세요

Dividers

Line

Dots

Cards

Hover Card

This card has hover effect

Static Card

This card is static (no hover)

Animation Components

Text Effects

RevealText (fade)

안녕하세요, Invisible Works입니다.

UnderlineReveal

밑줄 효과

HighlightReveal

하이라이트 효과

BlurFade

1
2
3
4

Skeleton Loading

Skeleton

SkeletonText

SkeletonCard

Section Components

DialWheel

3D rotating wheel component (dark background)

→
배포
관리
도메인
호스팅
SSL인증

AccordionStep

홈페이지에 들어갈 자료를 전달합니다.

디자인 시안 3종 중 하나를 선택합니다.

교육

Flow English Studio

그리고, 여기까지 무료 입니다.

선택한 디자인으로 홈페이지를 완성합니다.

TimelineBlur

Animated timeline with blur effect

복잡하게 느껴진 진행

필요한지 모르겠던 단계들

결정할 게 너무 많았던 과정

Marquee

Infinite scrolling content

Design
Development
Strategy
Branding
Marketing
Design
Development
Strategy
Branding
Marketing
Design
Development
Strategy
Branding
Marketing
Design
Development
Strategy
Branding
Marketing

CTASection

내 홈페이지 디자인 보러 가기

Color Palette

Soft Blue

#f2f8fc

Muted Aqua

#7fa8c9

Deep Aqua

#5a8ab0

Dark Gray

#1a1a1a

Modals

Contact Modal

Multi-step contact form modal