| name | checkpoint-brand-webui |
| description | Use when creating HTML reports, dashboards, portals, landing pages, report indexes, or CSS that should follow Check Point 2026 branding. Applies the Check Point brand palette, typography, enterprise layout, table/chart styling, and accessibility rules. |
| compatibility | opencode |
| license | MIT |
Mission
Make all generated web UI feel like an official Check Point corporate property: polished, minimal, enterprise-grade, and executive-ready.
Brand system
- Primary palette only:
- Berry
#EE0C5D
- Gravitas Grey
#41273C
- Clay
#F2F2F2
- White
#FFFFFF
- Black
#000000
- Secondary accents only when truly needed:
- Orange
#FF3312
- Purple
#741984
- Yellow
#FCB117
- Dark Berry
#B70D4E
- Berry is the default CTA/accent color.
- Gravitas Grey is for contrast blocks, headers, and serious emphasis.
- Clay and white should dominate backgrounds.
- Do not introduce off-palette colors, rainbow charts, neon tones, or decorative gradients.
Typography
- Use
font-family: "DIN Pro", Arial, Helvetica, sans-serif;
- Use clean sans-serif typography only.
- Keep body text left-aligned with generous spacing.
- Avoid decorative typography, excessive italics, justified text, or novelty fonts.
Layout and components
- Prefer spacious grid-based layouts with consistent spacing.
- Use subtle radii (
8px–16px), light borders, and very soft shadows only.
- Keep cards white or Clay with clean internal padding.
- Primary buttons: Berry background, white text, subtle hover darkening.
- Secondary buttons: white/Clay with Berry or Gravitas text and light borders.
- Tables must be clean, lightly separated, and easy to scan.
- Use icons only if they improve clarity; never use emoji as UI chrome.
Reports and dashboards
- Reports should feel customer-ready and executive-ready.
- Prefer white or Clay canvas backgrounds with a Gravitas Grey masthead or accent block.
- Use Berry as the dominant highlight color in badges, links, and actions.
- Charts must use the palette in this order when possible: Berry, Gravitas Grey, Purple, Orange, Yellow, neutral greys.
- Keep data visualizations minimal: no 3D, no neon, no clutter.
- Preserve a clear footer or callout note stating that the report was generated in a learning/lab environment, may contain AI-assisted analysis, and requires human validation before operational, legal, or production use.
- Present the disclaimer in a polished but clearly visible way; do not hide it in tiny text or low-contrast styling.
Accessibility and output rules
- Use semantic HTML and responsive structure by default.
- Maintain strong contrast, visible focus/hover states, readable font sizes, and clear hierarchy.
- Avoid large inline-style blocks when reusable CSS patterns will do.
- Do not use glassmorphism, cyberpunk styling, gamer aesthetics, brutalism, meme visuals, or playful startup visuals unless explicitly requested.
Final check
Before finalizing, reject any visual choice that would feel off-brand for Check Point corporate marketing, enterprise cybersecurity communications, or executive presentation material.
