// isPreviewEnvironment関数と同じロジック const hostname = window.location.hostname; const isPreview = hostname.indexOf('--') !== -1 && hostname.indexOf('.web.app') !== -1; if (!isPreview) { document.write('<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5W4PSGD&gtm_auth=X5MVZAPO4YKenADeussYCw&gtm_preview=env-1&gtm_cookies_win=x" height="0" width="0" style="display:none;visibility:hidden"></iframe>'); }

Pawlinq Global Brand

Path: /en-global/pawlinq/css-sample

Colors

Primitives (All)

black

var(--color-black)

white

var(--color-white)

gray-1

var(--color-gray-1)

gray-2

var(--color-gray-2)

gray-3

var(--color-gray-3)

gray-4

var(--color-gray-4)

gray-5

var(--color-gray-5)

brand-original

var(--color-brand-original)

catlog-yellow-high

var(--color-catlog-yellow-high)

catlog-yellow-low

var(--color-catlog-yellow-low)

pawlinq-charcoal

var(--color-pawlinq-charcoal)

pawlinq-brown

var(--color-pawlinq-brown)

pawlinq-glassgreen

var(--color-pawlinq-glassgreen)

pawlinq-skyblue

var(--color-pawlinq-skyblue)

pawlinq-offwhite

var(--color-pawlinq-offwhite)

pawlinq-salmonpink

var(--color-pawlinq-salmonpink)

yellow-high

var(--color-yellow-high)

yellow-low

var(--color-yellow-low)

red-high

var(--color-red-high)

red-low

var(--color-red-low)

blue-high

var(--color-blue-high)

blue-low

var(--color-blue-low)

green-high

var(--color-green-high)

green-low

var(--color-green-low)

Semantics

Text Primary

var(--color-text-primary)

Text Secondary

var(--color-text-secondary)

Text Link

var(--color-text-link)

Text Error

var(--color-text-error)

Brand Primary

var(--color-brand-primary)

Background Sub

var(--bg-sub)

Button Primary

var(--color-button-primary-bg)

Border Default

var(--border-default)

Border Divider

var(--border-divider)

Border Error

var(--border-error)

Typography (en)

Heading 1 (size26)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Heading 2 (size22)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Heading 3 (size18)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Heading 4 (size15)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Heading 5/6 (size14)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Body (size15)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Body Small (size14)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Caption (size12)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Caption Small (size10)

Catlog: The next generation of pet care. We help you and your cat stay together for as long as possible.

Font Weights

Weight 100font-weight: 100

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 200font-weight: 200

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 300font-weight: 300

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 400font-weight: 400

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 500font-weight: 500

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 600font-weight: 600

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 700font-weight: 700

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 800font-weight: 800

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

Weight 900font-weight: 900

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

normalfont-weight: normal

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

boldfont-weight: bold

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

bolderfont-weight: bolder

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

lighterfont-weight: lighter

The quick brown fox jumps over the lazy dog

Catlogは、猫様の生活をテクノロジーで見守ります。

UI Components

Buttons

Standard

Primary Secondary Border Plane (Text)

Brand / Campaign

Brand Email LP Blue LP Red Nekonohi Demo

Line Integration

Line Line Border

Sizes

Medium (Default)Small

Fixed Width (e.g. 240px)

External Links

External Primary External Secondary

States

Form Inputs

TextField

With Label

With Error

This is an error message

Password

Select

With Label

With ErrorSelection is required

Checkbox

Unchecked

Checked

Label Left Position

Data Display

Price

JPY (Default)

¥5,800

JPY (Bold, Large)

¥12,800

USD

US$49.99

With Tax (JPY)

¥2,178

Deleted

¥9,800

Title (Heading Component)

Heading 1 Title

Heading 2 Title

Heading 3 Title

Heading 3 Center

Spacing Scale

sp-4

var(--spacing-4)

sp-8

var(--spacing-8)

sp-16

var(--spacing-16)

sp-24

var(--spacing-24)

sp-32

var(--spacing-32)

sp-40

var(--spacing-40)

sp-64

var(--spacing-64)

sp-80

var(--spacing-80)

sp-120

var(--spacing-120)

Platform Checks (Mobile/OS Specific)

Device Information

User Agent

Server Side

Window Size

-

Device Pixel Ratio

-

Safe Area Insets

Visualizes env(safe-area-inset-*).
On devices with a notch (e.g., iPhone), you should see colored bars at the edges.
If you don't see them (height/width is 0), safe area insets are not applied.

Safe Area Top

Safe Area Bottom

Left

Right

Safe Area Container

If top/bottom bars overlap this text,
safe-area is NOT handled properly.

Viewport Units (100vh vs 100dvh)

Compare 100vh (often ignores address bar) vs 100dvh (dynamic, accounts for address bar).

100vhMight be hidden by address bar on mobile

100dvhShould fit visible area

Store / Checkout Components

Alerts

これは Alert コンポーネントです (Standard)

marginTop=0 指定

Labels

OFF20% OFF

特別価格

特別価格

Store Typography

PageTitle (Center Default)

PageTitle (H2 Center)

PageTitle (Left H3)

Form Elements (Store)

Radio Button UncheckedRadio Button CheckedRadio Left Position