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 overwhelm.

    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)

    Colour 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 behaviours 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.

Flexible Design System: 1. Online & Digital | 2. print | 3. motion

Brand Clarity Toolkit
Application: online (1)

Brand Clarity Toolkit
Application: Digital (1)

Brand Clarity Toolkit
Application: print (2)

Brand Clarity Toolkit
Application: motion (3)