厳選・オープン・無料

Swiss Typefaces

大胆で表現力豊かなタイペースを、クリーンでギャラリーのようなプレゼンテーションで紹介するプレミアムタイプファウンドリーです。

typefoundry
Swiss Typefaces のスクリーンショット
↓ デザインシステムをダウンロード (29 MB)OpenDesign で開く

オリジナル: https://www.swisstypefaces.com

📦 パックの中身を見る →

01

デザイン DNA

タイポグラフィタイプファウンドリープレミアムデザインスイッズ

タイペースの技芸を扱うハイエンドのブティック。スイスの精密さと、表現力豊かなモダンな美学を融合させています。

02

カラー

#37f5b7Accent
#000000Ink
#707070Ink soft
#f5f5f5BG
#ffffffBG soft
#d1d1d1Muted
rgba(0, 0, 0, 0.1)Line

主に黒、白、明るいグレーからなる無彩色のパレットを採用し、タイペース自体と鮮やかなアクセントカラーに視覚的な注目を集めます。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

タイポグラフィが主要なビジュアル要素であり、スケールはドラマチックで表現力豊かです。 · UIとナビゲーションには明快なジオメトリック・サンセリフを使用し、明瞭さを保ちます。 · 大きな表示用テキストには主にライトウェイト（300）を使用し、洗練された見た目を実現します。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

大きなタイポグラフィ要素の周囲に、ギャラリーのような雰囲気と集中的なコンテンツ領域を生み出す、寛容で非対称なスペーシングを設けます。

05

サーフェス (角丸 / 影 / 罫線)

sm · 3px
md · 16px
lg · 20px
pill · 999px

構造的な区切りとしてクリーンな1pxの実線ボーダーを、一部の要素には左ボーダーのアクセントを使用します。

なし

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツが寛容なコンテナの中央に配置された、フルワイドのヒーロードリブンレイアウトです。タイポグラフィはコンテナの全幅にまたがることがよくあります。

07

モーションとインタラクション

120msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

UI要素に対する、繊細な不透明度と可視性のトランジション。 · インタラクティブフィードバックのための、ホバー時のトランジション変換。

インタラクティブ要素に対する、繊細なカラートランジションや不透明度の変化です。 · 主にカラーチェンジやわずかなトランジション変換を通じた、即座のビジュアルフィードバックです。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Swiss Typefaces — 桌面首屏（hero）
桌面首屏（hero）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Swiss Typefaces — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

これはプレミアムなタイプファウンドリーのウェブサイトです。クリーンでギャラリーのようなレイアウトと寛容な余白を採用し、表現力豊かでオーバーサイズのタイポグラフィを紹介しています。主要カラーは明るいグレー（#f5f5f5）の背景、ブラック（#000000）のテキスト、そしてCTA用の鮮やかなミントグリーン（#37f5b7）のアクセントです。フォントは主にクリーンなグロテスクおよびヒューマニスト・サンセリフ（Suisse IntlやEuclidファミリーなど）です。重要な禁止事項：1）UIにデコレーションフォントを使用しない。2）重いシャドウやグラデーションを適用しない。3）レイアウトを雑然とさせず、タイポグラフィに呼吸させる。

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

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

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

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