Design System · finasmanpower.com.ph
The visual language for the FINAS Manpower website – royal blue authority, one red action colour, gold reserved for the TAHANAN promise. Built from the FINAS logo, ready for four languages including right-to-left Arabic.
Royal blue and dark navy carry every page – trust, competence, and global authority. Red is the one action colour: Apply buttons, hire enquiries, live badges. Gold belongs to the TAHANAN story – stat numbers on navy, key-phrase underlines, eyebrow labels on dark grounds. Neither accent is ever a flood.
Archivo – a confident grotesque that echoes the bold FINAS wordmark – for headlines (700/800). Inter for body and UI (400/600/700), matching the FINAS document suite. Hierarchy comes from size and weight, never thin type. Non-Latin languages swap in Noto Sans per language, same scale.
Arabic runs fully right-to-left: the build uses CSS logical properties throughout, so <html dir="rtl"> mirrors the whole layout – nav, cards, arrows – with no extra CSS.
Every component serves one of two journeys – applicants looking for work abroad, or employers looking to hire. Large tap targets, firm corners, navy-tinted shadows.
Red is reserved for the page's primary action. Blue handles the employer path. Only one red button per view.
Lives in the top bar on every page. Native script for each label – never flags, never abbreviations for non-Latin scripts.
Process guide, open roles, and requirements – from application to airport assistance.
Browse job openingsEmployer procedure, industries we cater, and a dedicated partnership contact path.
Partner with FINASThree recurring devices, all drawn from the logo's triple arc – the route a worker travels from home to the world, and back.
A gold arc under one key phrase per page – echoing the gold arc of the logo. Reserved for the brand promise. Never on body copy, never more than twice per page.
Every worker is TAHANAN.
A dashed flight path between sections – blue origin dot, red destination dot. Manila to the world.
Whenever the page goes dark navy – stat bands, employer track, footer – numbers and eyebrows turn gold. It is the only place gold text appears.
2015 →The route-network hero is the one loud moment. Content sections stay quiet and steady – and every effect has a full reduced-motion fallback.
An ambient network of drifting route points connected by faint gold paths, on the navy gradient. Slow and organic – never distracting from the headline.
Sections rise and fade in on scroll – 24px travel, soft easing, staggered. Premium, not flashy.
Cards lift 4px with a navy-tinted shadow; buttons rise 2px; apply-arrows extend. Micro-feedback that confirms without demanding attention.
prefers-reduced-motion disables all of the above and shows content instantly. RTL flips every directional cue.