Cenote Brand System

Usage Rules

• Keep images full-bleed — avoid boxed or framed photo treatments
• Maintain the teal-blue color temperature — warm filters break brand cohesion
• Use dark overlays when text is placed over photography
• Avoid stock imagery with people — Cenote is infrastructure, not consumer

// fadeIn helper — used for all section entrances
function fadeIn(delay: number) {
  return {
    initial:    { opacity: 0, y: 20 },
    animate:    { opacity: 1, y: 0 },
    transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1], delay },
  }
}

// Staggered siblings — increment delay by 0.15s per element
<motion.div {...fadeIn(0.0)}>First element</motion.div>
<motion.div {...fadeIn(0.15)}>Second element</motion.div>
<motion.div {...fadeIn(0.3)}>Third element</motion.div>

Usage Rules

• Use strokeWidth={1.5} — never filled or bold variants
• Default size 20px in body, 16px in compact contexts
• Color: text-white/60 default, text-white on hover/active
• Pair with a text label whenever possible — icons alone are ambiguous
• Don't mix Lucide with icons from other libraries
• Don't use icons decoratively — each icon must carry meaning