Cytely Brand Guidelines

Cytely Brand GuidelinesA minimal and tight design system with clean lines, sharp typography, high contrast, and an editorial, gallery-like aesthetic.Logo AssetsAll logos are available as static SVGs at stable URLs. Pattern: /logo/{name}-{size}px.svg (sizes: 256, 512, 1024, 2048) or /logo/{name}.svg for the unsized vector master.

cytely-logo.svg (full wordmark, dark)

cytely-logo-inverted.svg (full wordmark, white)

cytely-icon.svg (icon mark, dark)

cytely-icon-inverted.svg (icon mark, white)

Example sized: /logo/cytely-logo-512px.svg

Color Palette

Primary: #0F0F0F

Background: #FFFFFF

Text Light: #757575

Accent: #FF6A50 — use sparingly as a graphic focal point

Typography

Primary Typeface: Gronland (Web Alternative: Manrope)

Body Typeface: Inter

LayoutGallery principle: generous white space, asymmetrical balance, thin 1px dividers.PhotographyHigh-contrast black and white. Candid moments of research and collaboration. Serious, thoughtful, professional.ComponentsSharp containers, soft actions. Interactive elements are soft; content containers are sharp and structural.CSS Template:root { --primary: #0F0F0F; --background: #FFFFFF; --text: #0F0F0F; --text-muted: #666666; --accent: #FF4444; --border: #E5E5E5; } body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--background); } h1, h2, h3, h4, h5, h6 { font-family: 'Manrope', sans-serif; font-weight: 600; letter-spacing: -0.02em; } .container { border: 1px solid var(--border); border-radius: 0px; /* Sharp containers */ } button, a { border-radius: 6px; /* Soft actions */ transition: all 0.2s ease; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--border); }