厳選・オープン・無料

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

見出しには幾何学的なサンセリフ体。 · 本文にはヒューマニストサンセリフ体。

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

コンポーネント

09

文体と禁止事項

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）をアクセントカラーとして使用しています。タイポグラフィは見出しがクリーンで幾何学的、本文がヒューマニストサンセリフへと移行し、プロフェッショナルかつモダンな印象を生み出しています。レイアウトは中央揃えで心地よく空間が確保されており、明確な価値提案と顕著な「Book a Demo」CTAに焦点を当てています。重要なデザイン制約として、ライトな背景、セリフタイプ、シャープな角の使用は避けています。ビジュアル言語はソフトな丸みとダークで集中した環境によって定義されています。全体的なトーンは効率的、プレミアム、信頼に満ちたものです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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