The single source of truth for the MCVSIX marketing site — tokens, type, components and patterns extracted from the approved reference homepage.
Every value is a CSS custom property in src/styles/tokens.css.
--mcv-ink-900Headings, statsExtracted--mcv-ink-800Card titles, footer headingsExtracted--mcv-ink-700Strong body copyExtracted--mcv-ink-600Muted body copyAdjusted for AA--mcv-ink-500Article titles, linksExtracted--mcv-primary-600Primary buttonsExtracted--mcv-primary-700Hover / pressedExtracted--mcv-primary-800Form submitExtracted--mcv-mint-400Arrow discs, badgesExtracted--mcv-mint-500Accent hoverIntroduced--mcv-sky-0CardsExtracted--mcv-sky-50Page backgroundExtracted--mcv-sky-100Bands (stats, quote)Extracted--mcv-sky-200Hero corners, photo panelsExtracted--mcv-sky-400Hero depthExtracted--mcv-sky-500Hero left glowExtracted--mcv-steel-500Feature card gradientExtracted--mcv-steel-600Gradient base (white text)Adjusted for AA--mcv-steel-iconForm icon squaresExtracted--mcv-steel-tagBlog tag chipsAdjusted for AA--mcv-danger-inkErrorsIntroduced--mcv-success-inkSuccess messagesIntroducedArchivo (display, variable width) + Inter (text). Fluid sizes clamp between 320px and 1440px.
.t-displayArchivo 800 · clamp(52→92px) · lh .92 · uppercaseEquip your lab
.t-h1Archivo 800 · clamp(36→64px) · uppercaseDiagnostic imaging
.t-h2Archivo 800 · clamp(30→50px) · uppercaseExplore our equipment
.t-h3Archivo 600 · clamp(22→28px)Request A Quote
.t-h4Archivo 600 · 22pxHematology Machines
.t-leadInter 400 · 18px · lh 1.6From a single analyzer to a complete turnkey laboratory.
.t-bodyInter 400 · 16px · lh 1.55We supply, install and support diagnostic equipment across the Philippines.
.t-smallInter 400–500 · 14pxSemi- and fully-automated analyzers for clinical chemistry.
4px base spacing scale, container 1266px with fluid 16–24px gutters, section rhythm clamp(64→120px).
--mcv-stack-14px--mcv-stack-28px--mcv-stack-312px--mcv-stack-416px--mcv-stack-524px--mcv-stack-632px--mcv-stack-748px--mcv-stack-864px--mcv-r-xs8px · Tags, hero badge--mcv-r-sm12px · Fields, chips--mcv-r-md20px · Category cards, photo panels--mcv-r-lg28px · Hero cards, images--mcv-r-xl36px · Footer card, CTA band--mcv-r-arch999px · Pills, portrait arch--mcv-shadow-cardResting cards--mcv-shadow-floatPrimary buttons, chips--mcv-shadow-softLarge media--mcv-shadow-hoverHover / dropdownsProduct, article and category cards share one anatomy: rounded shell, sky media panel, display-font title.
Based on Mindray's continuous innovation in hematology field, BC-5000 is especially tailored to assist diagnostic labs who need full CBC + 5-part results, with relatively low daily sample volume, restricted lab space and tight budget.
Clinical applications, transducers, imaging modes, connectivity and room planning — what to settle before you compare models.
flaskdropletsatomtest-tubesheart-pulseshield-plusmicroscopebonewaveformscanSteel icon square + soft field fill from the reference appointment form. Labels are always programmatic; errors are announced and linked with aria-describedby.
Enter a valid email address.
Minimum 10 characters.
Arch-cropped portraits, product photos multiplied onto sky panels, transparent cutouts with a soft navy drop shadow on steel cards.
Layouts are derived from the desktop reference — same visual language at every width, no separate mobile style.
| Viewport | Behaviour |
|---|---|
| 1920 / 1440 / 1280 | Reference layout. Content width 1266px; 3-column hero rhythm; 4-column grids. |
| ≤ 1100 | Hero becomes copy on top + portrait/product arches side by side; chips flow inline; nav collapses to drawer at ≤ 1080. |
| ≤ 960 / 768 | Two-column grids, bento stacks to image + two cards, footer columns 2×2. |
| ≤ 640 / 390 / 320 | Single column, 16px gutters, header CTA moves into the drawer, carousel cards 250/300px. |
Ask about equipment, pricing, or lab setup — we’re here to help.