NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼

Design Specification — NAVER CLOUD PLATFORM 네이버 클라우드 플랫폼

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 (#14ADEA). All type is set in icon-portal!important. Detected font weights: 400, 500, 600, 700. Detected style signatures: rounded / pill-heavy.

Logo asset(s): https://xv-ncloud.pstatic.net/images/customerCase/seoul_fire_logo_hs_1781569413778.png · https://xv-ncloud.pstatic.net/images/customerCase/lg_logo_new_1734080933196.png

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(44deg,#00e4b4,#1d80d7)
• linear-gradient(225deg,#00e4cc,#2ea3d4 39% 0,#4680d8 61%,#753fe0)

Typography

Primary typeface: icon-portal!important — stack: icon-portal!important

Font stacks (most used first)

• sans-serif
• icon-portal!important
• Calibre,sans-serif
• 'icon-portal'
• 'icon-portal' !important
• 'swiper-icons'
• "cms-icon"
• icomoon!important
• icomoon
• icon-portal

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

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)

Shadows

Derived elevation

All detected shadows

• 0 1px 7px #00000017

Animation & Motion

Transitions

• all .3s
• all .2s ease-in-out
• opacity .3s
• all .2s

Easing curves

• var(--swiper-wrapper-transition-timing-function,initial)

Keyframes

@keyframes circleMove-8d7775fc { 0%{transform:rotate(0)}to{transform:rotate(359deg)} }
@keyframes fadeindown-be44c5e9 { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-be44c5e9 { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }
@keyframes fadein-be44c5e9 { 0%{opacity:0}to{opacity:1} }
@keyframes fadeindown-6b8ec58a { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-6b8ec58a { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }
@keyframes fadein-6b8ec58a { 0%{opacity:0}to{opacity:1} }
@keyframes fadeindown-d42f3b58 { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-d42f3b58 { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }
@keyframes fadein-d42f3b58 { 0%{opacity:0}to{opacity:1} }
@keyframes fadeindown-81360e43 { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-81360e43 { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }
@keyframes fadein-81360e43 { 0%{opacity:0}to{opacity:1} }
@keyframes fadeindown-afc4d136 { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-afc4d136 { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }
@keyframes fadein-afc4d136 { 0%{opacity:0}to{opacity:1} }
@keyframes fadeindown-ac49cd62 { 0%{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none} }
@keyframes fadeindownMobile-ac49cd62 { 0%{opacity:0;transform:translateY(10%)}to{opacity:1;transform:none} }

Animations

• .2s ease-in-out fadeindownMobile-be44c5e9
• .2s ease-in-out fadeindown-be44c5e9
• .2s ease-in-out fadeindownMobile-6b8ec58a
• .2s ease-in-out fadeindown-6b8ec58a
• .2s ease-in-out fadeindownMobile-d42f3b58
• .2s ease-in-out fadeindown-d42f3b58
• .2s ease-in-out fadeindownMobile-81360e43
• .2s ease-in-out fadeindown-81360e43
• .2s ease-in-out fadeindownMobile-afc4d136
• .2s ease-in-out fadeindown-afc4d136

CTA labels found on page

• Contact Us
• Console
• Languages
• Learn More
• See All Service List
• See All Solution List

Source Design Tokens (CSS custom properties)

:root {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-ring-offset-shadow: 0 0 transparent;
  --un-ring-shadow: 0 0 transparent;
  --un-shadow: 0 0 transparent;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: #fff;
  --un-ring-width: 0px;
  --un-ring-color: #93c5fd80;
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
}

Do's and Don'ts

Do

• Do reserve the accent #14ADEA 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): 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #117CE9;
  --color-accent: #14ADEA;
  --color-background: #FFFFFF;
  --color-surface: #F6F7F8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #DADADA;
  --color-border: #707070;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F6F7F8;
  --color-surface-container: #F0F0F0;
  --color-surface-container-high: #ECECEC;
  --color-surface-container-highest: #DDE6EA;
  --font-sans: icon-portal!important;
  --font-size-display: 50px;
  --font-size-headline-lg: 42px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-lg: 20px;
  --radius-pill: 50%;
  --shadow-md: 0 1px 7px #00000017;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-display: -.42px;
}