NOVASELL

最適も、最強も、最速で。

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

詳しく見る DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Novasell Green
#00fa27
--color--green / ブランドカラー
Black
#000000
--color--black / 背景・テキスト
White
#ffffff
--color--white / テキスト・背景
Neutral
Near Black
#101112
ヘッダーリンク
Dark Grey
#222426
--dark-grey-for-button-text
Davys Grey
#7e8085
--mono--dimgrey / プレースホルダー
Davys Grey BG
#525459
--davys-grey-for-bg
Silver
#cdcfd4
--silver-for-disable / 無効・ボーダー
White Grey
#f1f5f9
--mono--white-grey / 背景
Light Grey BG
#e9eef3
--white-grey-for-bg
Semantic
Error Red
#e4250e
--rederror-for-error-text-form
Green Link
#00aa14
--novasell-green-for-button-text-link
02 / Typography

タイポグラフィ階層

gazzetta-variable (Display) -- Roboto ExtraBold 代替
NOVASELL
Hero Max: 486px (縮小表示) / 800 / line-height: 0.5 / color: #00fa27背景装飾テキスト
FREE ANALYSIS
Hero XL: 390px (縮小表示) / 400 / line-height: 0.8 / letter-spacing: -7.8pxヒーロー見出し
OUR SERVICES
Section: 160px (縮小表示) / 400 / line-height: 0.75 / letter-spacing: normalセクション見出し
AI MARKETINGFORCE
Product: 100px / 400 / line-height: 0.75 / letter-spacing: normalプロダクト名
Subsection Title
Subsection: 62px / 700 / line-height: 1.0英語サブタイトル
neue-haas-grotesk-display (Label) -- Roboto 代替
CONTACT
Heading: 70px / 700 / line-height: 1.0 / letter-spacing: -1.75pxセクション見出し
English body text for descriptions and supplementary content.
Body EN: 18px / 500 / line-height: 0.78 / letter-spacing: -0.216px英文説明
ANALYTICS REPORTS
Label: 12px / 700 / line-height: 1.0 / color: #00fa27ラベル
AI-powered marketing automation platform
Caption EN: 11px / 600 / line-height: 1.64 / letter-spacing: -0.209px / color: #00fa27英語キャプション
Zen Kaku Gothic New (和文)
実施中
Display JP: 106px / 700 / line-height: 1.0 / letter-spacing: -7.95px日本語Display
最適も、最強も、最速で。
Hero Copy: 40px / 700 / line-height: 1.2 / letter-spacing: -0.24px / color: #00fa27キャッチコピー
AI マーケティングの新時代
Heading JP: 40px / 700 / line-height: 1.2 / color: #000日本語見出し
テレビ CM の効果を AI で最大化
Sub Heading: 32px / 700 / line-height: 1.2 / letter-spacing: -0.32px中見出し
データドリブンなクリエイティブ制作
Sub Heading S: 28px / 700 / line-height: 1.4 / letter-spacing: -0.56px小見出し
Novasell は、テレビ CM を中心とした AI マーケティングを提供するラクスルグループのエージェンシーです。独自の分析基盤により、最適なクリエイティブと出稿戦略を導き出します。
Body: 20px / 700 / line-height: 1.8 / letter-spacing: 1px本文
ボディテキストのデフォルトサイズ。16px / weight 700 / line-height 1.75。
Body (default): 16px / 700 / line-height: 1.75body デフォルト
ナビゲーション / CTA ラベル
Nav Link / CTA Label: 12px / 700 / line-height: 1.2ナビ・ボタン
03 / Product

サービス紹介の組版サンプル

OUR SERVICES

最適も、最強も、最速で。

Novasell は、テレビ CM の効果を最大化する AI マーケティングエージェンシーです。独自のアルゴリズムとクリエイティブ制作力で、あなたのブランドを次のステージへ。

AI が導く最適解

放映枠の選定からクリエイティブの最適化まで、すべてをデータドリブンに。人の判断と AI の分析を掛け合わせ、これまでにないスピードと精度を実現します。ABCabc 123

AI-POWERED MARKETING AUTOMATION
NOVASELL AI
分析、制作、運用。すべてを一気通貫で。
04 / Buttons

ボタンバリエーション

資料請求
Primary (黒)
お問い合わせ
Secondary (白)
無料分析を始める
Green CTA
送信済み
Disabled
詳しくはこちら
Text Link
Dark background
無料分析
Green on Dark
詳しく見る
Outline on Dark
05 / Cards

カードコンポーネント

ANALYTICS REPORTS

テレビ CM 効果分析

独自の AI アルゴリズムで放映効果をリアルタイムに計測。最適な出稿戦略を導き出します。

CREATIVE

AI クリエイティブ制作

データに基づいたクリエイティブを高速に制作。効果の出る CM を、最速で。

OPERATION

運用最適化

放映枠の選定から効果検証まで、マーケティングの全工程を一気通貫でサポートします。

06 / Forms

フォーム要素

デフォルト -- border: #cdcfd4, radius: 4px
フォーカス -- border: #00fa27 (Novasell Green)
正しい電話番号を入力してください
エラー -- border: #e4250e (Error Red)
07 / Elevation

Depth & Elevation

Flat (default)
影なし。フラットデザイン。ボーダーのみ
Dark Contrast
黒背景 + ネオングリーンで奥行きを表現
Green Surface
グリーン背景による強調
CSS Custom Properties にシャドウ定義なし。奥行きは色のコントラストで表現。
カスタムイージング: --ease-01: cubic-bezier(0.32, 0.48, 0, 1)
08 / Layout

レイアウト

Base Viewport --base-vw: 1440px
ビューポートベースのレイアウト。テキストサイズも vw 単位で可変する可能性あり。
1セクション = 1メッセージの大胆な構成。セクション間に大きな余白。
Design Principles
FLAT DESIGN
影やグラデーションは不使用
ALL BOLD
全テキスト font-weight: 700
NEON GREEN
#00fa27 をブランドカラーに
TIGHT TRACKING
大きいほど負の letter-spacing