Learn. Earn. Advance. ✦ Your next chapter starts with a skill.
The netph.courses design system · v1.1

One identity.
Every learning moment.

The foundations for a confident, accessible learning brand. Built for screens, credentials, and the people taking their next step.

01 / Our signature

A mark of forward motion.

The lowercase n and the ascending plane represent progress through learning. Keep the symbol and wordmark clear, flat, and proportional.

Primary · light backgrounds

App icon variant · dark backgrounds

Clear space: leave at least half the symbol’s width around the logo. Minimum horizontal logo width: 160px. Keep gradients, shadows, and embossing out of the core logo.

The symbol is a native vector asset (assets/mark.svg) — a turquoise n with an ascending white plane, echoing the visual brand board.

02 / Color palette

Fresh energy. Clear purpose.

White leads the layout. Turquoise signals the brand; deep teal grounds the content. Click any swatch to copy its hex code.

Use white text on Ocean buttons. Use Deep Teal text on Turquoise, Ice, and Sunshine. Reserve yellow for achievement and small highlights.
03 / Typography

Meet Inter.

Direct, familiar, and readable. Use 700–750 for headings, 600–700 for UI labels, and 400 for body copy. Arial is the offline fallback.

Aa Bb 123

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

Skills for your next step.

Heading / 44px / 750

Practical courses. Meaningful progress.

Body / 16px / 400
04 / Interface essentials

Made to move people forward.

Clear actions, restrained borders, and generous spacing keep the learning experience focused.

✓Achievement accent
Voice: practical, encouraging, and specific. Say “Build a campaign plan” rather than promise guaranteed success.
05 / Achievement

Progress worth showing.

Completion badges celebrate learning. They clearly identify the course, issuer, and completion criteria — and pair with a certificate that carries a verification ID.

NETPH.COURSES · SAMPLE CREDENTIAL
NetPH symbolCOMPLETED

Digital Marketing
Foundations

Certificate of Completion

Illustrative badge · No accreditation implied
06 / For the build

The brand, in code.

Use the same tokens across marketing pages, course experiences, and credential templates.

:root {
  --color-brand: #08C8C8;
  --color-text: #103B3D;
  --color-action: #087F83;
  --color-surface: #E9FAF8;
  --color-accent: #FFD447;
  --font-family: Inter, Arial, sans-serif;
  --radius-button: 8px;
  --radius-card: 12px;
}
Download tokens.css ↓