FROG UI
Semantic CSS를 사용하여 일관되고 의미있게 화면을 구현합니다.
What is Frog?
Components
토큰 기반 Semantic 디자인
디자인 토큰과 자연어에 가까운 의미 있는 단어를 결합해 읽기 쉬운 시맨틱 디자인 언어를 제공합니다.
사용자 정의 스타일

사용자 지정 토큰으로 빌드된 하나의 통합 스타일 시스템을 제공합니다.

Button
Primary
Secondary
Color:Red
A
B
C

Text Style

다크 테마 지원
라이트·다크 테마를 기본 지원하여 상황에 맞는 대비와 분위기로 쉽게 전환할 수 있습니다.
Light Mode
프레임워크 독립 CSS
프레임워크에 독립된 CSS로 제공되어 Vue·React 헤드리스 UI와 결합해 자유롭게 확장할 수 있습니다.
BE-UI-REACTreact
BE-UI-VUEvue
UI 예제
Typography
ABC
가나다

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890 ,./(){}[]\|:;"'?

가나다라마바사

Heading

[H1] Frog UI System

[H2] Frog UI System

[H3] Frog UI System

[H4] Frog UI System

[H5] Frog UI System
Letter Spacing
Wider
Frog UI System
Wide
Frog UI System
Normal
Frog UI System
Narrow
Frog UI System
Narrower
Frog UI System
Font Weight
Light
Frog UI System
Regular
Frog UI System
Bold
Frog UI System
Bolder
Frog UI System
Colors
primary
secondary
success
danger
attention
importance
white
black
Grayscale
gray-5
gray-10
gray-15
gray-20
gray-30
gray-40
gray-50
gray-60
gray-70
gray-80
gray-90
gray-95
Grid System
Button
Input
Select box
option1
option2
option3
option4
option5
option6
option1
option2
option3
option4
option5
option6
List
Item 1
Item 2
Item 3
Tag
Tag
Primary
Secomdary
Red
blue
Yellow
Tag - Pointing
UP
Down
Left
Right
Tag - kbd
Space
Enter
Commend
ESC
Bedge
Switch
Checkbox
Contact Me