マイルドライナーのもと | ゼブラ株式会社

Design Specification — マイルドライナーのもと | ゼブラ株式会社

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#DF7BA2). All type is set in 'Zen Kaku Gothic New'. Detected font weights: 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://www.zebra.co.jp/sp/mildliner_no_moto/assets/images/common/logo_zebra.svg · https://www.zebra.co.jp/sp/mildliner_no_moto/assets/images/common/logo_product.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(to right, 0%, 25%,#fff 50%,#4e4e4e 75%)
• linear-gradient(to right, 0%, 25%,#fff 50%, 75%, 100%)
• linear-gradient(95deg,transparent,transparent 25%,#fff,75%,#fff)
• linear-gradient(to right,#fff 20%,#4799c8 45%,#df7ba2 55%,#fff 80%)
• linear-gradient(to top,rgba(255,255,255,.75),#fff 60%)
• linear-gradient(to bottom,#f9f9f9 50%,#4e4e4e 50%)

Typography

Primary typeface: Zen Kaku Gothic New — stack: 'Zen Kaku Gothic New'

Font stacks (most used first)

• 'Zen Kaku Gothic New'
• utile-display,Zen Kaku Gothic New,sans-serif
• "utile-display"
• myicon
• monospace,monospace
• inherit

Web font sources

• fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 1328px

Grid columns (largest detected grid): 12

Breakpoints

• 767.98px
• 768px
• 1023.98px
• 1024px
• 1280px

Animation & Motion

Transitions

• .8s ease-out 0s
• scale .4s cubic-bezier(.306,.968,.632,1) 0s
• opacity .8s ease-out 0s
• rotate .4s ease-out 0s
• color 1s ease-out 0s
• all .8s ease-out 0s
• visibility 1.6s ease-out 0s
• translate .8s ease-in-out 0s
• border-radius .4s ease-in-out .4s
• all .4s ease-out 0s
• border-radius .4s ease-out 0s
• opacity .8s cubic-bezier(.645,.045,.355,1)

Easing curves

• cubic-bezier(.306,.968,.632,1)
• cubic-bezier(.306,.968,.632,1)
• cubic-bezier(.26,1,.48,1)
• cubic-bezier(.645,.045,.355,1)
• cubic-bezier(.26,1,.48,1)

Keyframes

@keyframes modal-bg-in { 0%{opacity:0}to{opacity:1} }
@keyframes modal-bg-out { 0%{opacity:1}to{opacity:0} }
@keyframes modal-area-in { 0%{translate:100% 0}to{translate:0 0} }
@keyframes modal-area-out { 0%{translate:0 0}to{translate:100% 0} }
@keyframes modal-circle-in { 0%{border-radius:50%}to{border-radius:0} }
@keyframes modal-circle-out { 0%{border-radius:0}to{border-radius:50%} }
@keyframes modal-contents-in { 0%{opacity:0}to{opacity:1} }
@keyframes modal-contents-out { 0%{opacity:1}to{opacity:0} }
@keyframes modal-cross-in { 0%{scale:0}to{scale:1} }
@keyframes modal-cross-out { 0%{scale:1}to{scale:0} }
@keyframes link { 0%{transform-origin:top center;translate:0 0}49%{translate:0 -100%}50%{opacity:0;transform-origin:bottom center;translate:0 100%}51%{opacity:1;translate:0 100%}to{translate:0 0} }
@keyframes link-underline { 0%{transform:scale(1);transform-origin:center right}35%{transform:scaleX(0);transform-origin:center right}36%{transform:scaleX(0);transform-origin:center left}to{transform:scale(1);transform-origin:center left} }
@keyframes prev { 0%{transform-origin:center right;translate:0 0}49%{translate:-100% 0}50%{opacity:0;transform-origin:center left;translate:100% 0}51%{opacity:1;translate:100% 0}to{translate:0 0} }
@keyframes next { 0%{transform-origin:center right;translate:0 0}49%{translate:100% 0}50%{opacity:0;transform-origin:center left;translate:-100% 0}51%{opacity:1;translate:-100% 0}to{translate:0 0} }
@keyframes mask { 0%{-webkit-mask-position:200% 200%;mask-position:200% 200%}to{-webkit-mask-position:0 0;mask-position:0 0} }

Animations

• modal-cross-in .4s cubic-bezier(.306,.968,.632,1) .8s both
• modal-cross-out .4s cubic-bezier(.306,.968,.632,1) both
• modal-bg-in .8s cubic-bezier(.26,1,.48,1) backwards
• modal-bg-out .8s cubic-bezier(.26,1,.48,1) backwards
• modal-area-in .8s ease-in-out backwards
• modal-area-out .8s ease-in-out backwards
• modal-circle-in .4s ease-in-out .4s both
• modal-circle-out .4s ease-in-out .4s both
• modal-contents-in .8s cubic-bezier(.26,1,.48,1) .8s backwards
• modal-contents-out .8s cubic-bezier(.26,1,.48,1) backwards

CTA labels found on page

• Online Store
• ちょい足しマイルド
• ガラスペンマイルド
• How to Movie

Source Design Tokens (CSS custom properties)

:root {
  --btn: nth-child(1);
}

Do's and Don'ts

Do

• Do reserve the accent #DF7BA2 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 200, 300, 400, 500, 600, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #4799C8;
  --color-accent: #DF7BA2;
  --color-background: #FFFFFF;
  --color-surface: #F9F9F9;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #4E4E4E;
  --color-border: #F9F9F9;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9F9F9;
  --color-surface-container: #EDEDED;
  --font-sans: 'Zen Kaku Gothic New';
  --font-size-display: 76.8px;
  --font-size-headline-lg: 38.4px;
  --font-size-headline-md: 29.9px;
  --font-size-title-lg: 22.4px;
  --font-size-body-lg: 17.6px;
  --font-size-body-md: 16px;
  --radius-md: 6.4px;
  --radius-lg: 25.6px;
  --radius-pill: 50%;
  --space-xs: 6.4px;
  --space-sm: 9.6px;
  --space-md: 19.2px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-label: .06em;
  --container-max: 1328px;
}