simonpaag/enforce-design-strategy

Design Strategy & Implementation Guide (CPHport.com)

This skill outlines the core design philosophy and concrete UI elements for CPHport.com. When creating new pages, components, or features, YOU MUST adhere to these guidelines to ensure a cohesive, premium, and functional experience.

1. Vibe, Tone & Target Audience

Theme: Maritime Industrial (A Mix of Classic & Utilitarian)

• Vibe: A balance between "Classic Maritime" and "Industrial & Utilitarian". It feels formal, trustworthy, and traditional, yet heavily geared towards data display and professional utility.
• Target Audience: Built for professionals needing quick facts, port operations data, and high-contrast readability, but retaining an authoritative oceanic feel.
• Key Traits: Dark mode focused, high-contrast text, structured layouts, and clear data visualization.

2. Typography

Theme: Geometric & Bold

• Primary Headings (h1 - h6): Use a geometric and bold font (e.g., Montserrat, Outfit, or Tailwind's standard sans with heavy font weights font-bold / font-black). Headings should be strong, wide, and command attention.
• Body Text: Clean and highly legible (e.g., Inter or standard system sans-serif font-sans).
• Data/Numbers: Use Monospace (e.g., font-mono) for tabular data, coordinates, vessel specs, and quick facts to align with the industrial/utilitarian vibe and ensure readability.

3. Color Palette

Theme: Deep Ocean meets Vibrant Cyan

• Base/Background: Deep Navy Blues (e.g., slate-900, slate-950). The UI should feel like the deep ocean.
• Primary Accent: Vibrant Cyan/Teal (e.g., cyan-400, cyan-500). Used for primary actions, active states, and highlighting key data points. Provides a fresh, water-related contrast against the dark navy.
• Neutrals: Crisp Whites (e.g., slate-50) for text readability, and cool grays (e.g., slate-800, slate-700) for card backgrounds and borders.

4. UI Elements Style

Theme: Subtle & Modern

• Corners: Slightly rounded (use Tailwind's rounded-lg or rounded-md as standard). Avoid overly pill-shaped buttons or sharp squares.
• Borders & Shadows: Very subtle borders (e.g., border border-slate-800). Keep shadows minimalistic or rely on border contrast in dark layouts.
• Hover States: Minimalistic and sleek. (e.g., subtle background color shift on buttons, thin cyan border highlight on hover for cards).
• Data presentation: Use structured tables, grids, and definition lists (<dl>) to display facts.

5. Implementations in code (Tailwind v4)

When building components, use these standard utility combinations:

• Primary Button: bg-cyan-500 text-slate-950 hover:bg-cyan-400 font-semibold rounded-lg px-4 py-2 transition-colors
• Secondary/Subtle Button: bg-slate-800 text-slate-200 hover:bg-slate-700 border border-slate-700 rounded-lg px-4 py-2 transition-colors
• Card Container: bg-slate-900 border border-slate-800 rounded-lg p-6 shadow-sm overflow-hidden
• Data Label/Value:
  • Label: text-xs text-slate-400 uppercase tracking-wider font-semibold
  • Value: text-slate-50 font-mono text-sm
• Page Background: bg-slate-950 text-slate-200

6. Layout & Spacing

• Use max-widths (e.g., max-w-7xl mx-auto) for main content.
• Use generous consistent spacing (e.g., gap-6 or gap-8 for grids, py-12 or py-16 for page sections).
• Use CSS Grid heavily for dashboards and data heavy views.

7. Micro-interactions

• Transitions: Fast and snappy (use transition-all duration-200 ease-in-out).
• Loading States: Prefer subtle pulse skeletons (animate-pulse bg-slate-800) over massive spinners for data.

Checklist for Agents

When generating UI for CPHport, the AI must verify:

• [ ] Is it using dark navy/slate backgrounds (slate-950, slate-900)?
• [ ] Are primary actions highlighted in vibrant cyan/teal (cyan-400, cyan-500)?
• [ ] Are headings bold and structured?
• [ ] Are critical data points explicitly styled with monospace (font-mono)?
• [ ] Are interactive elements and cards using rounded-lg with subtle thin borders (border-slate-800)?