큐레이션 · 오픈 · 무료

Flecto

새로운 고객과 더 친환경적인 미래를 위한 가장 쉬운 방법.

SaaSProductivityApp UIGeometricRefined

Flecto 스크린샷

↓ 디자인 시스템 다운로드 (23 MB)OpenDesign 에서 열기

원본 사이트: https://flecto.io

📦 팩 내용 보기 →

01

디자인 DNA

렌탈 관리SaaSB2B효율성

렌탈 비즈니스를 위한 간소화된 물류 대시보드.

02

컬러

#56F09FAccent

#FFFBE8Ink

#004737BG

rgba(86,240,159,0.2)Line

시그니처 네온 그린 강조색을 사용한 고대비 다크 모드.

03

타이포그래피

geometric-sans · humanist-sans

display64px · 400
body16px · 400

헤드라인용 기하학적산세리프(geometric sans). · 본문용 휴머니스산세리프(humanist sans).

04

여백

4px

8px

16px

24px

32px

48px

64px

96px

4px 기본 단위

05

표면 (라운드 / 그림자 / 경계선)

sm · 10px

md · 19px

lg · 40px

pill · 999px

1px solid rgba(86,240,159,0.2)

rgba(0,0,0,0.12) 0px 3px 3.96px 0px · rgba(0,0,0,0.1) 0px 18px 18px 0px

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

대형 그래픽과 두드러진 CTA가 있는 중앙 정렬된 히어로 섹션.

07

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

인터랙티브 요소를 위한 부드러운 페이드인 및 스케일 전환.

인터랙티브 요소에 대한 섬세한 색상 변화 또는 스케일 변화. · 약간 축소되는 활성 상태.

08

컴포넌트

button 네온 그린 채우기 또는 외곽선이 적용된 알약 모양 버튼.
card 미세한 그림자와 둥근 모서리가 있는 플로팅 카드.
chip 카테고리를 위한 미니멀 칩.
input 깔끔하고 둥근 입력 필드.
hero 지배적인 다크 배경과 네온 그린 강조색이 사용된, 크고 중앙 정렬된 히어로 섹션.

09

보이스와 금지 목록

톤 전문적이고 효율적이며 미래지향적.
헤드라인 직관적이고 혜택 중심적.
CTA 행동 지향적이고 명확함.

흰색 배경을 사용하지 마세요 — 스크린샷은 대신 다크 그린(#004737) 배경을 보여줍니다.
세리프 서체를 사용하지 마세요 — 스크린샷은 대신 기하학적 및 휴머니스 산세리프 서체를 보여줍니다.
여러 주요 색상을 사용하지 마세요 — 스크린샷은 단일 네온 강조색이 적용된 단색 그린 팔레트를 보여줍니다.
날카로운 모서리를 사용하지 마세요 — 스크린샷은 대신 둥근 모서리(10px ~ 999px 반경)를 보여줍니다.
무거운 드롭 그림자를 사용하지 마세요 — 스크린샷은 대신 섬세하고 부드러운 그림자를 보여줍니다.
빽빽한 텍스트 블록을 사용하지 마세요 — 스크린샷은 대신 넉넉한 여백과 명확한 계층 구조를 보여줍니다.
피하기: 전문 용어
피하기: 공격적인 판매 언어
피하기: 지나치게 복잡한 문장

10

팩 안의 실제 스크린샷

Flecto — 桌面首屏（hero） — 桌面首屏（hero）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Flecto — 移动首屏 — 移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

이것은 Flecto라는 렌탈 관리 플랫폼을 위한 SaaS 랜딩 페이지입니다. 기본 다크 그린(#004737) 배경과 핵심 행동 및 강조를 위한 고채도 네온 그린(#56F09F) 강조색을 사용하는 다크 모드 미학을 적용했습니다. 서체는 헤드라인을 위해 깔끔하고 기하학적이며, 본문을 위해 휴머니스 산세리프로 전환하여 전문적이면서도 현대적인 느낌을 줍니다. 레이아웃은 중앙 정렬되고 여유로우며, 명확한 가치 제안과 두드러진 '데모 예약' 행동 유도(CTA)에 초점을 맞추고 있습니다. 주요 디자인 제약 사항으로는 밝은 배경, 세리프 서체, 날카로운 모서리 사용을 피하는 것이 포함되며, 이는 시각적 언어가 부드러운 반경과 어둡고 집중된 환경으로 정의되기 때문입니다. 전반적인 어조는 효율적이고 프리미엄하며 신뢰할 수 있습니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko