アメリカンリバー財団

スタイルガイド

このページでは、現在のスタイルと標準について概説します。 アメリカンリバー財団 ウェブサイトをご覧ください。

色

当サイトのブランドカラーの概要です。
色と色合い
OHPフィルム
主要な
プライマリー
ウルトラライト
光
M
暗いです
ウルトラダーク
カンプ
二次
二次
ウルトラライト
光
M
暗いです
ウルトラダーク
カンプ
重点
アクセント
ウルトラライト
光
M
暗いです
ウルトラダーク
カンプ
ベース
ベース（Base）
ウルトラライト
光
M
暗いです
ウルトラダーク
カンプ
シェード
シェード
ウルトラライト
光
M
暗いです
ウルトラダーク
主要な
トランス10
トランス20
トランス40
トランス60
トランス80
トランス90
二次
トランス10
トランス20
トランス40
トランス60
トランス80
トランス90
重点
トランス10
トランス20
トランス40
トランス60
トランス80
トランス90
ベース
トランス10
トランス20
トランス40
トランス60
トランス80
トランス90
シェード
トランス10
トランス20
トランス40
トランス60
トランス80
トランス90

タイポグラフィ

以下は、このサイトのレスポンシブ タイポグラフィのサイズとウェイトの概要です。 これらは、基本サイズと数学的スケールから計算されます。
見出し
H1 (--xxl)

見出し 1 通常

見出し 1 中

見出し 1 太字

H2 (--xl)

見出し 2 通常

見出し 2 中

見出し 2 太字

H3 (--l)

見出し 3 通常

見出し中

見出し 3 太字

H4(--m)

見出し 4 通常

見出し 4 中

見出し 4 太字

H5 (--秒)
見出し 5 通常
見出し中
見出し 5 太字
H6 (--xs)
見出し 6 通常
見出し 6 中
見出し 6 太字
本文
本文 (--m)
テキスト m レギュラー
テキスト m 中
テキスト m 太字
小さなテキスト (--s)
テキスト s レギュラー
テキスト s ミディアム
テキストの太字
超小型テキスト (--xs)
テキスト xs レギュラー
テキスト xs 中
テキスト xs 太字
例

見出し 1 (H1)

これは大きなテキストです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

見出し 2 (H2)

Lorem ipsum dolan amet、consectetur adipiscing elit、Eidmod time incididunt ut labid、dolore magna aliqua。 最小限に抑えて、練習や練習をしなければなりません。

見出し 3 (H3)

Lorem ipsum dolan amet、consectetur adipiscing elit、Eidmod time incididunt ut labid、dolore magna aliqua。 最小限に抑えて、練習や練習をしなければなりません。

見出し 4 (H4)

Lorem ipsum dolan amet、consectetur adipiscing elit、Eidmod time incididunt ut labid、dolore magna aliqua。 最小限に抑えて、練習や練習をしなければなりません。
見出し 5 (H5)
Lorem ipsum dolan amet、consectetur adipiscing elit、Eidmod time incididunt ut labid、dolore magna aliqua。 最小限に抑えて、練習や練習をしなければなりません。
見出し 6 (H6)
Lorem ipsum dolan amet、consectetur adipiscing elit、Eidmod time incididunt ut labid、dolore magna aliqua。 最小限に抑えて、練習や練習をしなければなりません。

ボタン

黒と白を含むすべてのカラー セットで、ソリッド ボタンとアウトライン ボタンを使用できます。
明るい背景のボタン
プライマリー
一次概要
二次二次アウトライン
アクセント
アクセント アウトラインベース（Base）
拠点概要
暗い背景のボタン
プライマリー
一次概要
二次二次アウトライン
アクセント
アクセント アウトラインホワイト
白い輪郭
ボタンスケール
ボタン XS
btn--プライマリ / btn--xs
ボタンS
btn--プライマリ / btn--xs
ボタンM
btn--プライマリ / btn--m
ボタンL
btn--プライマリ / btn--l
ボタン XL
btn--プライマリ / btn--xl
ボタン XXL
btn--primary / btn--xxl

幅

要素の幅を制御するために使用できる値は XNUMX つあります。 それらは自動的に応答します。
--幅-xs
--幅-s
--幅-m
--幅-l
--幅-xl
--幅-xxl

セクションパディング

セクションのパディングは応答性が高く、コア間隔システムの乗数に基づいています。
なし
XS
S
M
L
XL
XXL

間隔

基本サイズと数学的スケールから計算された XNUMX つのレベルのレスポンシブ スペーシングがあります。 これにより、マージン、パディング、およびギャップがすべて完全に一致します。
--space-xs
--スペース-s
--スペースm
--スペースl
--スペース-xl
--スペース-xxl

要素のパディング

パディングとして視覚化された XNUMX つのレベルの間隔を次に示します。

カード

XSパディング付きのカードです。 その内容は端にかなり近いです。

カード

これは S パディング付きのカードです。 少しタイトなパディングがあります。

カード

これは M パディング付きのカードです。 標準的な呼吸室があります。

カード

Lパディング付きのカードです。 余分な呼吸スペースがあります。

カード

これはXLパディング付きのカードです。 それはかなりの呼吸の余地があります。

カード

これはXXLパディング付きのカードです。 密閉された空間での使用は避けてください。

影

XNUMX つのマルチレイヤー ボックス シャドウから選択できます。
ボックスシャドウ M
ボックスシャドウ L
ボックスシャドウ XL

境界半径

基本サイズと数学的スケールから計算された XNUMX つの境界半径値があります。
丸み XS
丸みのあるS
丸みのあるM
丸みのあるL
丸みのあるXL
丸みを帯びたXXL