Codepresso: Online Coding Test & Technical Assessment for Skill-based Hiring

Design Specification — Codepresso: Online Coding Test & Technical Assessment for Skill-based Hiring

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 (#6D92DE). All type is set in Pretendard,PretendardJP,sans-serif. Detected font weights: 400, 500, 600, 700. Detected style signatures: gradient-rich / aurora; ambient blurred glow background; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://codepresso.io/_nuxt/logo_blue.DDuFauW3.svg · https://codepresso.io/_nuxt/polycon_ISO.CK4StHQ0.webp

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

• conic-gradient(from 180deg at 50% 50%,#356dde,#356dde00 1turn)
• linear-gradient(180deg,#0a1b4a00,#1f58cb26)
• radial-gradient(ellipse at 50% 100%,#244190,#0a1b4a)
• linear-gradient(62deg,#e7effe 25.71%,#edddfb 139.48%)
• linear-gradient(0deg,#073894b3,#073894b3)
• linear-gradient(52deg,#cbdeffb8 9.49%,#1c59d3b8 98.89%)
• linear-gradient(76deg,#e7effe 39.04%,#e8ecfd 57.64%,#edddfb 150.43%)
• linear-gradient(180deg,#fff0,#8eb1f642 35.5%,#2867e229 69.5%,#dce7fc14 95%,#f5f8ff00)
• linear-gradient(90deg,#fff5ea,#fff3e2 50%,#fff5ea)
• linear-gradient(0deg,#e3e8f1,#9bb4ff)

> 3 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Pretendard — stack: Pretendard,PretendardJP,sans-serif

Font stacks (most used first)

• Pretendard,PretendardJP,sans-serif
• Poppins
• Pretendard
• PretendardJP
• JetBrains Mono
• JetBrains Mono,monospace
• SegoeUI
• Verdana,Pretendard,PretendardJP,sans-serif

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 4px 20px #040b1d33
• 0 6px 12px #092fa10a
• 0 4px 16px #1a61ea1f
• 0 4px 16px #1a61ea0a
• 0 4px 16px #040b1d0a
• 0 2px 6px #1a61ea0a
• 0 4px 12px #505f9929
• inset 0 0 0 1000px #fafbff
• 0 4px 20px #040b1d1a
• 0 0 6px #d0dffc

Layout

Container max-width: 1080px

Breakpoints

• 360px
• 480px
• 640px
• 767px
• 920px
• 1024px
• 1080px
• 1240px

Animation & Motion

Transitions

• all .2s ease-in-out
• background .1s ease-in-out
• all .1s ease-in-out
• opacity .2s ease-in-out
• transform .2s ease-in-out,opacity .2s ease-in-out
• all .3s ease-in-out
• none
• transform .6s ease,opacity .6s ease
• transform .2s ease-in-out
• opacity .5s ease-out

Easing curves

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

Keyframes

@keyframes lightblueLight { 0%{box-shadow:0 0 6px #d0dffc}to{box-shadow:0 0 12px #d0dffc} }
@keyframes spin { 0%{background:conic-gradient(from 180deg at 50% 50%,#356dde,#356dde00 1turn);transform:rotate(0)}50%{background:conic-gradient(from 180deg at 50% 50%,#356dde,#356dde00 1turn);transform:rotate(1turn)}75%{background:#356dde;transform:rotate(1turn)}to{background:#fff;transform:rotate(1turn)} }
@keyframes op { to{opacity:1} }
@keyframes boom { 0%{background-color:#fff;opacity:1;transform:scale(1)}25%{background-color:#de3737;opacity:1;transform:scale(1.2)}50%{background-color:#de3737;opacity:1;transform:scale(.95)}75%{background-color:#de3737;opacity:1;transform:scale(1.05)}to{background-color:#fff;opacity:1;transform:scale(1)} }
@keyframes changeColor { 0%{background:#de3737}25%{background-color:#fff}to{background:#de3737} }
@keyframes lectureLoadLeft { 0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1)} }
@keyframes lectureLoadRight { 0%{opacity:1;transform:scale(1) rotate(180deg)}50%{opacity:.4;transform:scale(.8) rotate(180deg)}to{opacity:1;transform:scale(1) rotate(180deg)} }
@keyframes lectureOp { 0%{opacity:1}50%{opacity:.7}to{opacity:1} }
@keyframes mulShdSpin { 0%,to{box-shadow:0 -2.6em #fff,1.8em -1.8em #fff3,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #ffffff80,-1.8em -1.8em #ffffffb3}12.5%{box-shadow:0 -2.6em #ffffffb3,1.8em -1.8em #fff,2.5em 0 #fff3,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #ffffff80}25%{box-shadow:0 -2.6em #ffffff80,1.8em -1.8em #ffffffb3,2.5em 0 #fff,1.75em 1.75em #fff3,0 2.5em #fff3,-1.8em 1.8em #fff3,-2.6em 0 #fff3,-1.8em -1.8em #fff3}37.5%{box-shadow:0 -2. }
@keyframes mulShdSpinBlue { 0%,to{box-shadow:0 -2.6em #6d92de,1.8em -1.8em #6d92de33,2.5em 0 #6d92de33,1.75em 1.75em #6d92de33,0 2.5em #6d92de33,-1.8em 1.8em #6d92de33,-2.6em 0 #6d92de80,-1.8em -1.8em #6d92deb3}12.5%{box-shadow:0 -2.6em #6d92deb3,1.8em -1.8em #6d92de,2.5em 0 #6d92de33,1.75em 1.75em #6d92de33,0 2.5em #6d92de33,-1.8em 1.8em #6d92de33,-2.6em 0 #6d92de33,-1.8em -1.8em #6d92de80}25%{box-shadow:0 -2.6em #6d92de80,1.8em -1.8em #6d92deb3,2.5em 0 #6d92de,1.75em 1.75em #6d92de33,0 2.5em #6d92de33,-1.8em 1.8em #6d92d }
@keyframes cardUp { 0%{bottom:0}to{bottom:8px} }
@keyframes disappear { 0%{opacity:1;transform:scale(1);z-index:1}65%{opacity:1;transform:scale(1);z-index:1}to{opacity:0;transform:scale(0);z-index:-100} }
@keyframes appear { 0%{opacity:1;transform:scale(0);z-index:-100}20%{opacity:1;transform:scale(1);z-index:1}to{opacity:1;transform:scale(1);z-index:1} }
@keyframes progressIndeterminate { 0%{transform:translate(-110%)}to{transform:translate(220%)} }
@keyframes softPulse { 0%,to{box-shadow:0 0 #325fd000;opacity:1}50%{box-shadow:0 0 20px 4px #325fd040;opacity:.7} }
@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}to{transform:rotate(1turn)} }

CTA labels found on page

• Inquire about AI Skill Assessment
• Assess Your AI Skills
• Assess Your AI Skills →
• Conduct Project-based assessments
• Make data-driven decisions
• Provide personalized L&D content
• Please select.
• Please select a service of interest.

Effects

• backdrop-filter: blur(6px)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --swiper-theme-color: #007aff;
  --swiper-navigation-size: 44px;
  --primary: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #6D92DE 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.
• Do align spacing to the 4px base unit derived from the page.

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: #FFFFFF;
  --color-accent: #6D92DE;
  --color-background: #FFFFFF;
  --color-surface: #FAFBFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #808BAA;
  --color-border: #D3D6E0;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EAECF3;
  --color-surface-container: #E7E9EF;
  --color-surface-container-high: #E3E5F1;
  --color-surface-container-highest: #D3D7E3;
  --font-sans: Pretendard,PretendardJP,sans-serif;
  --font-size-display: 76px;
  --font-size-headline-lg: 42px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 100%;
  --shadow-sm: 0 4px 20px #040b1d33;
  --shadow-md: 0 4px 16px #040b1d0a;
  --shadow-lg: 0 0 6px #d0dffc;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.1px;
  --container-max: 1080px;
}