ブランドガイドライン

このページには、ExpTech Studio のロゴファイル、使い方、カラー、フォントをまとめています。英語名は ExpTech Studio（略称 ExpTech）、中国語名は探索科技です。

ロゴ

チップの図形に ExpTech Studio の文字を組み合わせたロゴです。明るい背景では透過版、暗い背景では白地版を使います。

ダークグレーの地が付いているため、明るい背景でも暗い背景でもはっきり見えます。このサイトのナビゲーションバー左上にあるのがこのアイコンです。

チップの図形のみで、背景は透過です。ブラウザのタブなど、小さなサイズで使います。下には実寸で表示しています。

明るい背景

favicon.ico32 × 32 px · ICO · 4.2 KB · 背景：透過ダウンロード

暗い背景

favicon.ico32 × 32 px · ICO · 4.2 KB · 背景：透過ダウンロード

各プレビューの下から、元ファイルをダウンロードできます。現在あるのはビットマップ（WebP、ICO）のみで、ベクターファイルはありません。ベクターファイルやほかのサイズが必要な場合は、お問い合わせください。

ロゴの周囲には、少なくとも x の余白を確保します。x は、ロゴの図と文字の高さ H の 20% です。横長ロゴの画像ファイルには、周囲に十分な余白がすでに含まれています。画像全体を使い、別に切り取らなければ、要件を満たします。

元の縦横比と色を保ち、効果を加えず、複雑な背景の上には置かないでください。現在、明るい色の文字のバージョンはありません。暗い背景では、白地版または正方形のアイコンを使ってください。

ブランドのメインカラーはバイオレットで、寒色寄りのニュートラルグレーと組み合わせます。ライトモードとダークモードで、それぞれ値があります。下の数値はウェブサイトのスタイルと同期しています。数値をクリックするとコピーできます。

≈ の付いた色は sRGB の色域外にあり、HEX は最も近い近似値です。正確な色が必要な場合は OKLCH を使ってください。

ウェブページでは CSS 変数（たとえば var(--primary)）を使い、色の値を直接書かないでください。ライトモードとダークモードが自動で切り替わります。文字と背景には十分なコントラストを確保し、WCAG のアクセシビリティ基準に合わせてください。

バイオレットのカラースケール--color-accent-*

ニュートラルグレーのカラースケール--color-gray-*

≈ の付いた色は sRGB の色域外にあり、HEX は最も近い近似値です。正確な色が必要な場合は OKLCH を使ってください。

Tailwind の accent-*（たとえば bg-accent-600）と gray-* は、この 2 組のカラースケールに対応します。

Aa200Aa300Aa400Aa500Aa600Aa700Aa800

繁体字中国語・英語のページ: Plus Jakarta Sans VariablePlus Jakarta SansPingFang TCNoto Sans TCMicrosoft JhengHeiui-sans-serifsystem-uisans-serif
日本語のページ: Plus Jakarta Sans VariablePlus Jakarta SansHiragino SansNoto Sans JPYu Gothicui-sans-serifsystem-uisans-serif
コード: ui-monospaceSFMono-RegularSF MonoMenloMonacoConsolasLiberation MonoCourier Newmonospace

ラテン文字は Plus Jakarta Sans（可変ウェイト 200–800）です。中国語と日本語は、各 OS に内蔵されたフォントを使います。コードはシステムの等幅フォントを使います。

ExpTech Studio のブランド資産は、次の用途に限って使用できます。

商用利用やその他の特別な許諾は、事前に連絡してください。

DiscordExpTech Studio

GitHubExpTechTW