Brand system

The VNIS Education brand

A brand system is only worth anything if it is the thing actually running. Every colour, type size and component on this page is pulled straight from the vnis.edu.vn design system - not a screenshot, not a description.

What we stand for

What VNIS Education represents

The right direction

Helping students and parents choose a path that fits their real ability, goals and circumstances - including when the honest answer is “not yet”.

The right connections

Linking students, recruitment partners and institutions through verifiable information and a clear process.

For the long run

Support before, during and after the application - the relationship does not end on enrolment day.

Logotype

The logotype and how to use it

The logotype pairs the VNIS wordmark and a stylised graduation cap with the word Education. Keep the proportions, and keep clear space of at least the height of the letter V on all four sides.

On light backgrounds

On dark backgrounds

Use the reversed version on dark backgrounds; do not place the original on a dark field and raise its brightness.

✓ Do

Keep the proportions and clear space
Use the high-resolution original file
Place it on a background with enough contrast
Use the reversed version on dark backgrounds

✕ Do not

Stretch, squash or rotate it
Recolour the logotype
Place it on a busy image that breaks the letterforms
Add shadows, outlines or effects

Colour

Three brand colours

Each swatch below is painted with the very token running on the site. The hex is printed alongside so it can be copied into Figma, print files or partner documents.

#063F8F

VNIS Blue

--navy-800

The primary colour. Used for headings, the logotype and anywhere the brand needs to read as trustworthy and professional.

#D7A642

VNIS Gold

--gold-500

The accent colour. Used for the primary call to action and details that should catch the eye - it works because it is used sparingly.

#4F6488

Academic Slate

--text-muted

The intermediate tone for secondary text, captions and labels. Dark enough to stay comfortable on white.

The full scale

The derived steps keep the lightness of the previous system and shift only hue and saturation to the brand - so every contrast relationship in the layout still holds.

navy-950#021A3B

navy-900#032453

navy-800#063F8F

navy-700#07449B

navy-600#0857C6

navy-400#5398F8

navy-300#ADCEFC

navy-100#D9E8FD

gold-600#C29029

gold-500#D7A642

gold-400#DFB767

gold-200#EBD29E

Measured contrast

Four pairs that genuinely appear on the site, computed with the WCAG 2.1 formula. The AA threshold is 4.5 for body text and 3.0 for large text or interface components.

9,93:1

VNIS Blue on white

✓ passes AA

15,20:1

White on navy-900

✓ passes AA

7,81:1

Button text on VNIS Gold

✓ passes AA

6,03:1

Academic Slate on white

✓ passes AA

Typography

The type scale

One system sans-serif family, using weight and size for hierarchy rather than switching typefaces. The specimen below renders with the site's own classes.

h-lg

Study abroad in the right direction

h-md

Choose a country, an institution, a path

lead

The lead paragraph, one step larger than body copy, keeping the opening airy and easy to enter.

body

Body copy. Measured line length so the eye never has to travel too far across the page.

Components

Interface components

The buttons, chips and cards below are the site's real components, not mock-ups.

Get free adviceExplore destinations

Read articles

ScholarshipsStudent visasCosts

Need the official brand files?

Partners and press can get in touch for the original logo pack and usage guidance.

Contact VNIS