Your Reliable Real Estate Developer in Cebu - Primary Homes Inc.

Design Specification — Your Reliable Real Estate Developer in Cebu - Primary Homes Inc.

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 (#FF4343). All type is set in 'Montserrat'. Detected font weights: 300, 400, 500, 600, 700, 900. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy.

Logo asset(s): https://primaryhomes.com/uploads/media/logo@2x.png · https://primaryhomes.com/uploads/media/silingan-logo.svg

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

• linear-gradient(bottom, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent)
• linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent)
• linear-gradient(top, #fffaf0, #ffffff)
• linear-gradient(to bottom, #fffaf0, #ffffff)
• linear-gradient(45deg, black 0%, rgba(0, 0, 0, 0.95) 31%, rgba(0, 0, 0, 0.93) 32%, rgba(195, 195, 195, 0) 84%, rgba(255, 255, 255, 0) 100%)
• linear-gradient(135deg, floralwhite 0%, rgba(255, 250, 240, 0.485032) 100%)
• linear-gradient(315deg, floralwhite 0%, rgba(255, 250, 240, 0.485032) 100%)
• linear-gradient(top, rgba(165, 175, 68, 0) 17%, #a5af44 30%, #a5af44 82%, #a5af44)
• linear-gradient(to bottom, rgba(165, 175, 68, 0) 17%, #a5af44 30%, #a5af44 82%, #a5af44)
• linear-gradient(left, #ffffff, #ffffff 31%, rgba(165, 175, 68, 0))

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

Typography

Primary typeface: Montserrat — stack: 'Montserrat'

Font stacks (most used first)

• 'Montserrat'
• "MyriadPro", Helvetica, Arial, sans-serif
• "HarabaraHand", Helvetica, Arial, sans-serif
• 'Didact Gothic'
• "TrajanPro", Helvetica, Arial, sans-serif
• 'MyriadPro'
• 'TrajanPro'
• "icomoon" !important
• 'LatoBold'
• 'icomoon'

Web font sources

• fonts.googleapis.com/css?family=Didact+Gothic&display=swap
• fonts.googleapis.com/css?family=Montserrat:400,600,700,900&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 900

Line heights (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 3px 6px 0 rgba(0, 0, 0, 0.16)
• 0 1px 2px rgba(0, 0, 0, 0.1) inset
• 0 3px 6px 0 rgba(0, 0, 0, 0.1)
• 0 6px 6px 0 rgba(0, 0, 0, 0.16)
• 0 -3px 6px 0 rgba(0, 0, 0, 0.1)
• -3px 0px 6px 0 rgba(0, 0, 0, 0.16)
• unset
• 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white

Layout

Container max-width: 767px

Breakpoints

• 376px
• 480px
• 640px
• 767px
• 991px
• 1024px
• 1200px
• 1280px

Animation & Motion

Transitions

• opacity 0.25s ease, visibility 0s ease 0.25s
• opacity 0.25s ease 0s, visibility 0s ease 0s
• color 0.2s
• height 500ms ease-in-out
• opacity 400ms ease
• all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1)
• padding 0.4s cubic-bezier(0.645, 0.045, 0.355, 1)
• transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s ease
• opacity 0.2s ease, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1)
• transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s ease, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1)
• all 0.4s
• transform 0.5s ease

Easing curves

• cubic-bezier(0.47, 0, 0.74, 0.71)
• cubic-bezier(0.22, 0.61, 0.36, 1)
• cubic-bezier(0, 0, 0.25, 1)
• cubic-bezier(0.645, 0.045, 0.355, 1)
• cubic-bezier(0.86, 0, 0.07, 1)

Keyframes

@keyframes a { to {-webkit-transform: rotate(1turn);transform: rotate(1turn);} }
@keyframes fadeOut { 0% {opacity: 1;}100% {opacity: 0;} }
@keyframes wave { from {-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);}to {-webkit-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);} }
@keyframes fadeIn { 0% {opacity: 0;}100% {opacity: 1;} }
@keyframes fadeInDown { 0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);} }
@keyframes fadeInLeft { 0% {opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);} }
@keyframes fadeInLeftBig { 0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);} }
@keyframes fadeInRight { 0% {opacity: 0;-webkit-transform: translateX(20px);-ms-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);} }
@keyframes fadeInRightBig { 0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);} }
@keyframes fadeInUp { 0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);} }

Animations

• a 1s linear infinite

CTA labels found on page

• Schedule Tour
• Search
• Contact Us
• Visit Royal Palms Bohol
• Visit Royal Oceancrest Mactan 2

Source Design Tokens (CSS custom properties)

:root {
  --thumbs: :before, .fancybox-button.fancybox-button--zoom::before, .fancybox-button.fancybox-button--close::before;
  --close: before;
  --zoom: before;
  --arrow_left: :before;
  --arrow_right: :before;
  --desk: hover, .menu-dropdown .container .dp-close--desk:active;
  --home: hover, .fixedlinks .mobilelinks--home:active, .fixedlinks .mobilelinks--contact:hover, .fixedlinks .mobilelinks--contact:active;
  --schedule: hover, .fixedlinks .mobilelinks--schedule:active;
  --search: hover, .fixedlinks .mobilelinks--search:active;
  --secondary: hover, .button--primary:hover;
  --primary: hover;
  --red: :before;
  --green: :before, .card-item--pr .progress__bar--green::after;
  --special: :before;
  --reverse-white: :before;
  --reverse-yellow: :before;
  --white: :after;
}

Do's and Don'ts

Do

• Do reserve the accent #FF4343 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): 300, 400, 500, 600, 700, 900.

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: #248A60;
  --color-accent: #FF4343;
  --color-background: #FFFFFF;
  --color-surface: #FFFAF0;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #A5AF44;
  --color-border: #616161;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F7F7F7;
  --color-surface-container: #F5F5F5;
  --color-surface-container-high: #F2F2F2;
  --color-surface-container-highest: #EEEEEE;
  --font-sans: 'Montserrat';
  --font-size-display: 48px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 20px;
  --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: 10px;
  --radius-lg: 25px;
  --radius-pill: 50%;
  --shadow-sm: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  --shadow-md: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: -3px 0px 6px 0 rgba(0, 0, 0, 0.16);
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 80px;
  --container-max: 767px;
}