Brand Overview

CineGrid’s identity is bold, cinematic and minimal. Use generous white space, clear hierarchy with Montserrat for titles and numeric data, and Raleway for copy. Primary red drives calls-to-action; neutral surfaces keep content first.

Colors

Primary red energizes actions and highlights. Use tone steps for states and hover. Copy any value below.

Typography

Headlines and numbers use Montserrat (900/700). Body uses Raleway (400/500/600). Roboto is a neutral helper for UI.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

body { font-family: 'Raleway', sans-serif; }
h1,h2,h3 { font-family: 'Montserrat', sans-serif; font-weight: 900; }
.price,[class*=price],.amount{font-family:'Montserrat',sans-serif;font-weight:900;}

Spacing

Tight, functional spacing for dense UIs. Default stack: 8 / 16 / 20.

:root { --gap-small: 8px; --gap-medium: 16px; --gap-large: 20px; }

Elevation

Subtle depth for hierarchy. Prefer low-contrast shadows on dark backgrounds.

.card{ box-shadow: 0 2px 8px rgba(0,0,0,.18) }

Transparency & Glass

Use glass backgrounds for overlays and secondary panels. Avoid heavy contrast behind dense text.

.glass{ background: rgba(255,255,255,.60); backdrop-filter: blur(2px); border:1px solid rgba(255,255,255,.65); }

Components

Minimal, sharp components using brand tokens.

Resources

Download assets and design tokens.