Guidelines on how to implement the Day & Night Service visual brand system for cross media applications.
Tagline
Premium positioning (high-end events, brand activation). Team excellence (seasoned, charming, composed staff). Experience delivery (turning service into memorable moments). Reliability with style (the execution partner behind the scenes).
# Logo Wordmark: 'DAY & NIGHT SERVICE' as outlined white text (on-dark) or black text (on-light). Mark: the ampersand with pink→purple gradient fill (on-dark) or flat black fill (on-light). Mono variants use white or black fill without gradient. No vertical variants exist — the wordmark is horizontal only. Logo always appears on solid backgrounds, never on images.
The mono variants are for monotone output: black-and-white print, a single-colour t-shirt stencil, engraving or embossing, or anywhere the full-colour logo cannot be reproduced.
The logo always appears on solid backgrounds. Never over imagery. Mark and wordmark stay on the same baseline whenever they are paired. Mono variants are used when the surface forbids the color treatment.
The ampersand (&) is the sole decorative shape. It IS the brand mark. Rendered with the pink-to-purple gradient (linear-gradient 180deg, #C53B70 → #481C5F). Used as favicon, custom cursor state, and sparse decorative element.
The core palette. Every swatch is copy-on-click — click the chip to grab the hex.
Each part of the circle represents how much of this colour should roughly be used in the system. Creativity is encouraged for special use-cases (promo, posters, etc.) but clean branded work should respect it.
Used as a central fade at any size, to fill dark voids creatively without occupying a true page element.
# Typography Outfit for all display, navigation, and button text — always uppercase for titles. Inter for body copy and form labels at 600 weight. Quattrocento as serif fallback. Antialiased rendering. Responsive scale from 13px (cards) through 4rem (hero titles).
# Spacing Section gaps use viewport units on the actual site (8vh–20vh spacers, 12vh being the most common), which translates to roughly 50–80px at typical viewports. Container max-width 1920px with 60px side padding (40px mobile). Form grid gaps are 10px between fields, 49px between form sections. Page top padding is 12rem (192px) across all breakpoints.
There is no elevation system. Depth comes from negative space, hairline borders, glass overlays, and a single accent glow reserved for moments of brand declaration.
shadow.style: none, confirmed by the brand file.
rgba(197, 59, 112, 0.25) 0 0 40px# Buttons All buttons use 0px border-radius (sharp corners). Primary is filled brand-black with white text. Secondary is hollow: no fill, 2px white ring inset, hover adds 10% white overlay. Pills are the contact form toggle chips: inactive = hollow (same as secondary), active = white fill with black text. Typography (font, size, weight, uppercase) comes from token.button.* in typography.md. Icon buttons disabled.
Toggle chips for filters and contact-form selections. Active state flips fill and text. There is no halfway hover.
No icon library. Custom outline SVGs at 1.5px stroke, rendered at three sizes. Icons inherit text color by default.
# Motion Page entry uses ease-out cubic-bezier (0.35s), exit uses ease-in (0.25s). Button hovers at 0.3s ease. Cookie banner at 0.35s with custom cubic-bezier. GSAP scroll-scrub is linear (scrub: 1.2). Cursor tracking at 0.05s linear. Glacial tier reserved for the glitch loop (3s infinite).
Motion is layered: CSS keyframes for entry and glitch, GSAP for scroll-driven hero, CSS transitions for interactive states. The glitch effect on headings is the most recognizable brand motion signature. Page transitions use the View Transitions API with staggered children.
Words rise into place with a brief translate + opacity entry; siblings stagger by 70ms so the line builds left-to-right rather than landing all at once.
Menu underlines scale in from the right on hover, then unwind from the left on release. The asymmetric transform-origin is what makes it read as a deliberate gesture rather than a default browser hover.
Hero copy and imagery decouple from scroll via GSAP with `scrub: 1.2`. The lag keeps the animation feeling weighted to the scrubbed input rather than tied 1:1 to wheel deltas.
A 14-px dot with a pulsing concentric ring. Used for live indicators, "online" badges, and any place a static green dot would feel inert.
The signature motion. Two pseudo-elements offset in opposite directions over a 3-second loop, with mixed accent + highlight tones screening against the base. Reserved for a single emphasis word per page.
The disciplines this brand keeps. Distilled into the layout role doc by the Appostle scraper. What every page, modal, and surface is held against.
Surfaces are either the pink-to-purple brand gradient or a light field. Gradient sections are where the brand registers — landings, hero blocks, signature moments. Light sections carry long-form content and anything that needs to be readable at a glance. Brand-black #1C1B1C is reserved for type, inverted pills, and tightly scoped UI moments. Never the default canvas.
There is no elevation system. Depth lives in 1px borders, color contrast, and the deliberate use of negative space. A single accent glow (pink, 25% opacity, 40px blur) is the only exception, reserved for emphasis.
Centered heroes are banned. Use left-aligned text with offset counterweights, split columns, or large vertical voids. The grid is invisible but always present underneath.
Section gaps land between 50px and 80px at viewport breakpoints, and page top-padding is 12rem across all breakpoints. Sections breathe. Content earns its room.
Pink #C53B70 is the accent. It appears on CTAs, links, focus rings, and the ampersand mark. Almost nowhere else. Purple #8765AF is a support tone, used inside the gradient rather than as a flat fill.
The pink → purple gradient (180deg, #C53B70 → #8765AF → #E2E0DB) is the brand's signature surface. It carries the background on hero sections and brand-forward moments. The shorter accent gradient (#C53B70 → #481C5F) is reserved for the ampersand mark.
When in doubt, the & mark with the brand gradient is the brand. It works as favicon, cursor state, decorative element. Never rotated.
Need help implementing this brand?
