CSR
what you see is what you get.
-
Design System:
Modular Grid
For digital & online applications, a ‘Modular Grid’ system has been developed to assist with applying imagery and text layouts. The Modular Grid design system is formed directly from the CSR logo. A grid system has been formed by dividing the logo into 16 equal squares which extend to form a structured grid.
Design System:
Brand Device
The Modular Grid system forms a unique CSR brand device, that when applied references a multitude of layers that make a home. It’s about capturing the texture, quality, people and what is underneath and unseen that create this unique brand device. It establishes CSR as the starting point for each and every home.
CSR Toolbox:
UI Kit -
The CSR's tone of voice defines who they are!
It’s how they present themselves and want their partners and customers to perceive them.
It’s the personality and sentiment behind every word they use.The CSR brand voice is an authentic and an owned style of writing that reflects everything CSR stands for.
-
1. Online & Digital: The Online & Digital application guidelines ensure that all digital touchpoints, from websites to mobile apps, align with our brand’s visual language. This system offers detailed standards for responsive web design, app interfaces, and digital products, ensuring consistency in user experiences across devices. Components include:
Modular and scalable UI patterns
Interactive elements like buttons, forms, and navigation
Accessibility standards to ensure inclusivity
Brand-approved colour palettes, typography, and iconography
Breakpoints for a seamless responsive experience
This section also includes guidance on using animations, transitions, and micro-interactions to enhance the digital experience without overwhelming users.
2. Print: the Print guidelines are tailored to maintain our brand’s essence across all printed mediums, ensuring high-quality, cohesive design in physical formats. This system covers:
Layout grids and spacing for optimal readability
Typography usage for print (e.g., font sizes, leading, kerning)
Color profiles and Pantone references for accurate print reproduction
Logo usage and placement across marketing collateral, brochures, posters, and packaging
Image quality standards and how to incorporate brand photography and illustrations
These guidelines guarantee that every print project, from business cards to large-format banners, consistently reflects the brand’s values and aesthetics.
3. Motion: The Motion application type integrates animation and video into the brand’s visual ecosystem, offering guidelines on how to bring static designs to life. This system includes:
Animation principles that reflect the brand’s tone, pacing, and style
Motion behaviors for transitions, logo animations, and UI interactions
Typography in motion, including readability in dynamic contexts
Colour and lighting considerations for video production
Templates for video end frames, lower thirds, and title cards
By following these guidelines, motion designers can create engaging and cohesive branded content that resonates across social media, digital ads, and in-app animations.
