厳選・オープン・無料

Makr

抑制の効いたパレット、クリーンなタイポグラフィ、そして大規模な製品写真が特徴の、プレミアムバッグとグッズのための洗練されたeコマースインターフェースです。

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

オリジナル: https://makr.com

📦 パックの中身を見る →

01

デザイン DNA

CraftHeritageUtilitarianPremium Goods

素材の質感と控えめなデザインに焦点を当てた、ミニマリストで伝統に根ざしたアトリエです。

02

カラー

#1C1717Ink
#FFFFFFBG
#A9AFA9BG soft
rgba(28,23,23,1.0)Line

暗いインクと明るい背景の間のハイコントラスト、およびプロモーションセクションに控えめに使用されるミントグリーンアクセントです。

03

タイポグラフィ

grotesque-sans · neo-grotesque-sans · geometric-mono

すべてのサブラベルとプロモーションテキストに大文字を使用する · クリーンで均一な外観を保つため、すべてのテキスト要素にレギュラーウェイト（400）を維持する · 見出しには行間を詰め、本文には行間を開き、可読性を確保する

04

余白

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

一貫した間隔を提供する厳格な4pxベースのシステムで、より大きな倍数は主要なコンテンツブロックとマージンの定義に使用されます。

05

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

sm · 2px
md · 4px
lg · 8px
pill · 999px

入力欄と仕切り線には1px solid #1C1717

rgb(128, 128, 128) 0px 0px 5px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

視線を導くために、大きなフルワイド画像ブロックと十分なホワイトスペースに依存する、クリーンな縦スクロールレイアウトです。

07

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

100msmicro
150mssmall
200msmedium
cubic-bezier(0.55, 0.06, 0.68, 0.19)easing

インタラクティブステート向けの速いカラートランジション · サブUI要素向けの繊細な不透明度フェード

テキストリンクとインタラクティブ要素の繊細なカラートランジション · トランジション以外の視覚的なステート変化なしで即座にレスポンス

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Makr.comはバッグとグッズのためのプレミアムeコマースサイトです。本文フォントとしてネオ・グロテスクサンセリフ（Sohne）、ディスプレイフォントとしてより幾何学的なAkzidenz Groteskを使用した、洗練されたミニマリストな美学を採用しています。カラーパレットは厳格に中立的で、#FFFFFF、#1C1717、そして落ち着いたミントグリーン（#A9AFA9）が支配的です。レイアウトは広々としており、大規模な写真と十分なホワイトスペースに依存しています。重要な禁止事項：高彩度の色を避けること、装飾的なフォントを避けること、太いボーダーやドロップシャドウのような重いUI要素を避けること。全体的な雰囲気は、静かなラグジュリーと実用的なクラフトです。

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

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

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

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