[ None Labs ]
Site Renewal UI Component Kit
Figma 공식 리뉴얼 디자인(8v1RPt6aeS1fQ5M0J3BW4x)에서 순수 UI 요소만을 추출한 디자인 시스템 & UI 구성 페이지입니다.
사용자 보안 및 개인정보 보호 요청에 따라 본사 상세 주소지, 이메일, 전화번호, 팀원 프로필을 안전하게 정제하였으며, 브랜드 로고, 네비게이션, 타이포그래피, 제품 카드, 다이어그램, 갤러리 및 푸터 규격을 1:1로 제공합니다.
Pure UI Elements
Privacy Sanitized
128 Vector SVGs
Figma 1:1 Deterministic Extract
1. 브랜드 & 헤더 네비게이션 (Brand & Header Components)
Ubuntu, Red Hat Display
1.1 Desktop Navigation Header Bar (Figma Node: 184:13, 184:14, 184:15)
Standard Top Bar (Height: 60px)
[ None Labs ]
1.2 Mobile Navigation Bar (Figma Node: 287:6, 287:22)
Width: 420px (Compact Mobile)
[ None Labs ]
1.3 Dual-Tone Code Logo </> (Figma Node: 184:9)
Ubuntu Bold 50px
</>
1.4 Page Title Watermark Banner (Figma Node: 201:98)
Height: 140px Preview
</></></></></></></></></>
About us
2. 타이포그래피 & 슬로건 컴포넌트 (Typography & Slogans)
Red Hat Display 50px / 42px / 24px / 18px
2.1 Hero Slogan (Figma Node: 184:8)
50px, Line-height: 66.15px
Convenience in
everyday life
2.2 Section Title & Description (Figma Node: 173:631)
42px & 18px
None Labs offers various
solutions for everyday life
None Labs is a software development and platform research company founded in 2018.
4. 제품 쇼케이스 카드 (Product Showcase Cards)
Hoverable Arrow Card Component5. CI/CD 파이프라인 아키텍처 다이어그램 (Pipeline Diagram)
Figma Node: 164:106 / How It WorksHow it works
Just three simple steps. No more complex pipeline settings.
✕
Build
○
Test
●
Deploy
○
Document
The image of how it works in general
6. 스크린샷 갤러리 카드 (Screenshot Gallery Cards)
Rounded 12px with Border Shadow (Figma 164:110 / 229:26)
8. 디자인 토큰 & 컬러 팔레트 매트릭스 (Design Tokens)
tokens.json 1:1 Matched
Primary Accent
#343434
Secondary Text
#686868
Muted / Code
#888888
Border / Logo
#DEDEDE
Surface Header/Footer
#E9E9E9
Legacy Surface
#D9D9D9
Page Background
#F5F5F5
Card Surface
#FFFFFF