Back

Design System

Invisible Works UI Components & Typography

Typography

Current Language: EN

Font Family: Inter

Hello, we are Invisible Works.

Hello, we are Invisible Works.

Hello, we are Invisible Works.

Hello, we are Invisible Works.

Hello, we are 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)

Hello, we are Invisible Works.

UnderlineReveal

Underline Effect

HighlightReveal

Highlight Effect

BlurFade

1
2
3
4

Skeleton Loading

Skeleton

SkeletonText

SkeletonCard

Section Components

DialWheel

3D rotating wheel component (dark background)

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

AccordionStep

Send materials for the website.

Choose one from 3 design options.

Education

Flow English Studio

And, Free until here .

Complete the website with chosen design.

TimelineBlur

Animated timeline with blur effect

Confusing process

Unnecessary steps

Too many decisions

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

See your website design

Color Palette

Soft Blue

#f2f8fc

Muted Aqua

#7fa8c9

Deep Aqua

#5a8ab0

Dark Gray

#1a1a1a

Modals

Contact Modal

Multi-step contact form modal