Welcome to the definitive guide for representing Creative Imaging Services. This resource documents the visual and interactive system used to build our brand across web, print, and presentations. From logos and typography to interface patterns and accessibility standards, every section is designed to help maintain a consistent, premium experience in any environment.

This guide is not just a collection of assets. It is a lightweight design system intended to show how our identity behaves in real use. As the CRTV website evolves, this document will continue to serve as the source of truth for the decisions that shape our interface language.

Creative Imaging Services approaches design as a balance of clarity, performance, and expression. Our work should feel premium without becoming excessive, expressive without sacrificing usability, and technically polished without losing warmth.

On the web, this means favoring strong hierarchy, deliberate spacing, accessible contrast, and interface patterns that feel modern and responsive. Every visual choice should support readability, trust, and momentum.

Core Principles:

• Consistency First: Reusable patterns create stronger brands and more maintainable products.
• Design for Performance: Interfaces should feel fast, intentional, and lightweight.
• Accessibility by Default: Contrast, readability, and keyboard-friendly behaviors are part of the design language.
• Restraint as a Feature: Interactive moments should feel purposeful, not distracting.

The Creative logo is designed to encapsulate the essence of the brand through two distinct but interconnected components: the Logomark and the Logotype. Each plays a crucial role in brand recognition and representation, tailored to fit various uses while maintaining a cohesive brand identity.

Explore the adaptability of our "Brushstroke" logomark and logotype against different backgrounds and in various contexts. This tool helps visualize how our logos look under multiple conditions, ensuring versatility without compromising on brand recognition.

Our primary logomark is the cornerstone of our visual identity and should be prominently displayed in most brand communications. It is critical for conveying the authenticity and essence of our brand. The Logomark is a symbolic representation of the brand, used for instances where space is limited or where the brand identity needs to be recognized instantly without the use of text. It typically features distinctive graphical elements or icons that are easily identifiable and can stand alone without the accompanying text. The logomark is particularly effective in social media avatars, app icons, and other mediums where a concise visual representation is essential.

Guidelines:

• Standard Application: Follow the clear space and alignment guidelines to maximize visibility and impact. The logo should always be surrounded by sufficient whitespace, defined as the height of the 'C' in the logotype.

• Size Specifications: Never scale the logo to less than 30px in digital media or 0.5 inches in print to ensure legibility and integrity.

• Incorrect Usage: Avoid altering the logo's colors, skewing proportions, or adding any effects that may distort the logo.

The Logotype is the textual component of the brand logo. It consists of the brand's name in a specific and custom-designed typeface. This part of the logo emphasizes the brand name through stylized text that complements the logomark, enhancing the overall aesthetic and brand recognition.

Our logotype comes in primary, secondary, and tertiary forms, each tailored for specific communications and mediums to enhance brand flexibility without diluting identity.

Used in all official documents and primary brand communications where the Creative Imaging Services brand is established and the "Imaging Services" tagline is inferred.

Usage Examples and Best Practices

Do: Ensure the logo is clearly visible against the background. Use contrast effectively.

Don't: Overlap the logo with other graphical elements or text that may impede readability.

Our secondary logos provide flexibility for different contexts and mediums. Each variation respects the core identity of our brand while adapting to specific uses.

Secondary Logotype: Suitable for co-branded materials where the primary logo does not fit seamlessly, or when "Imaging Services" must be included specifically.

Tertiary Logotype: Ideal for informal or internal communications, subdomains, and for specifically calling out the website separately from the brand as a whole.

In order to support a large variety of background materials, some style variations have been provided on each of the logotypes (as well as the logomarks, to match.)

Stroke

For appropriate situations, like matching other vendor icons or page styling, a stroked or outlined version of our logomark and logotypes is available for use.

Stroke and Fill

For dark backgrounds with dark fills, this variant allows for a constant white stroke so that a secondary color can be applied as a fill.

Full Color

A variant with a splash of our primary color to make it pop. This a duo-tone design and the SVG code accepts the currentColor property on the parts of the image that can be black, white, or gray while retaining brand pink in the rest of the type.

In our brand communication, considerations must be made for readability and accessibility but also for setting a tone and creating an emotional impact.

Typography on the web also establishes rhythm, hierarchy, and confidence. It should guide the viewer naturally from headline to supporting copy to action without requiring excess decoration.

The foundations of our design language define the rules that support every visual and interactive decision. These core elements establish consistency across layouts, components, and experiences.

A consistent spacing rhythm helps create structure, reduce visual noise, and improve scannability. Section spacing, content spacing, and internal component padding should feel deliberate and predictable across the entire site.

Guidelines:

• Use generous whitespace to separate major sections and create visual breathing room.
• Maintain consistent horizontal padding within content containers.
• Favor repeatable spacing steps over one-off adjustments whenever possible.

Motion should reinforce hierarchy and responsiveness, not compete with content. Hover states, transitions, and reveals should feel quick, smooth, and intentional.

Guidelines:

• Use motion to clarify interaction and improve feedback.
• Keep transitions subtle and avoid unnecessary delay.
• Ensure animations do not reduce readability or disrupt navigation.

Preview font variations in the tool below to see samples of our typefaces in various widths and colors.

Our typefaces are a cornerstone of our visual identity, contributing to the legibility and personality of our communications.

The primary typeface should be used to convey most of the textual information in communications. It is designed to be versatile and readable across sizes and mediums.

Guidelines:

• Style and Weight: Choose weights between 400 (Regular) and 700 (Bold) for body text and headlines, respectively.

• Best Practices: Maintain line spacing of 120%-150% depending on the size and weight to enhance readability and aesthetic appeal.

The quick brown fox jumped over the lazy dog.

Our secondary typeface provides a backup option when the primary typeface is unavailable for use, in certain e-mail clients and web browsers and other contexts where a fallback is required and can't be specified, a similar system font may be used.

The quick brown fox jumped over the lazy dog.

Our tertiary typefaces, such as Platypi shown above, complement the primary typeface, providing variety and emphasis where needed without overshadowing the primary typeface.

Guidelines:

• Use the tertiary typeface for pull quotes, captions, or to highlight important snippets of information.

• Never use more than two different typefaces in the same document to avoid visual clutter.

• A fallback system serif font may be used if the font will not load.

Colors are crucial for maintaining the visual coherence of our brand across different platforms and materials.

Our color system is designed to support both expressive branding and functional interface design. In digital environments, color should communicate hierarchy, interactivity, and emphasis while maintaining strong accessibility standards.

In addition to visual foundations, our digital brand language is supported by a growing set of reusable interface components. These patterns help ensure a polished, consistent experience across pages while making future development more scalable.

Buttons define action hierarchy throughout the site and should remain visually consistent across all experiences. Our standard web system is built around three primary button roles: a primary call to action, a secondary supporting action, and a more minimal tertiary or ghost treatment.

Guidelines:

• Use the most visually prominent button for the highest-priority action in a section.
• Maintain consistent spacing, padding, and corner radius across variants.
• Ensure hover, focus, disabled, and active states feel cohesive within the same system.

The CRTV button system is built around a consistent typographic rhythm, generous corner radius, subtle lift on interaction, and a clear action hierarchy. Primary buttons should feel confident and high-conviction, while secondary and outline treatments support the surrounding flow without competing for attention.

Cards are used to group related content, create visual structure, and introduce emphasis without relying on heavy borders or excessive decoration. A well-designed card should feel flexible enough for features, portfolio entries, and supporting information.

Badges and labels provide concise emphasis for categories, status, featured content, and supporting metadata. They should be subtle, legible, and visually aligned with the rest of the interface language.

Icons should support comprehension and rhythm without replacing clear language. Across the CRTV site, icons are most effective when they reinforce category, technology, or interaction rather than acting as decoration alone.

Reusable patterns help translate individual components into complete page sections. These structures make the system easier to apply consistently while supporting both conversion and content clarity.

Hero sections should combine a strong headline, concise supporting copy, and a clear primary action. They establish the tone of the page and should create immediate confidence without overwhelming the viewer.

Feature grids allow us to present multiple ideas in a structured, scannable format. They work best when each item is concise, visually balanced, and connected to a clear value proposition.

Logo clouds and technology clusters reinforce trust, capability, and alignment with modern tools. They should be used with restraint and supported by concise copy that clarifies their purpose.

Call to action sections should create clear momentum and guide the viewer toward the next step. Strong hierarchy, contrast, and spacing are essential for helping users recognize the intended path forward.

Use our interactive tool to see our real time color converter library to see the care and effort used to provide the most accurate reproductions.

Our primary colors define our brand personality and should be used prominently in all our brand materials.

Guidelines:

Color Specifications: Adhere strictly to the HEX, RGB, and CMYK codes provided in the guide.

Usage: Balance color usage to avoid overwhelming the visual presentation and maintain accessibility standards, particularly in contrast ratios.

These system colors provide additional flexibility and variety while complementing our primary palette.

Ensuring color usage meets accessibility standards for inclusivity and text contrast was a top priority in the development of the CRTV Shop App. Apple's System UI colors help to accomplish this and are primarily used whenever possible to retain excellent readability in dark or light mode.

In our high fidelity print materials where color accuracy is critical, such as marketing brochures and official merchandise, colors may be adjusted in order to provide an accessible and visually appealing design. This may include some margin of error when converting color values.

The Copic color palette is based on the Copic marker system, which is a brand of refillable markers and related products made in Japan. Copic markers are highly favored among artists, designers, and hobbyists, especially those involved in illustration, design, and manga art. They are appreciated for their high quality, reliability, and the vibrant, consistent colors they produce. The color system integrates with Copic's library to produce fantastically accurate reproductions in a variety of media formats in both print and web use.

Our technology stack is curated to support robust and scalable solutions that adhere to modern development standards.

The CRTV interface system is designed to adapt gracefully across mobile, tablet, and desktop environments. Layouts should remain readable, interactive elements should remain easy to target, and content hierarchy should stay intact regardless of screen size.

Dark mode support, keyboard accessibility, readable type sizing, and thoughtful contrast are all part of this standard. Accessibility is not treated as an afterthought, but as a baseline expectation for every digital experience.

Download all necessary brand assets to ensure that every piece of content you create aligns with our brand guidelines. These resources are intended to streamline the design process and ensure consistency across all materials.

Ensure that all designs meet accessibility standards to cater to all users without discrimination. Utilize tools to check color contrast, readability, and navigational ease to maintain an inclusive brand presence.

By adhering to these detailed guidelines, stakeholders from various disciplines can confidently apply our brand assets, preserving the integrity and intention behind our brand's visual identity.

For further inquiries or special requests regarding our brand guide, please reach out to our brand team here.