Design guidelines

These guidelines ensure that every touchpoint communicates our expertise, professionalism, and commitment to modern animal healthcare.

.

Core brand principles

Innovation: Our designs highlight cutting-edge advancements in diagnostics.

Clarity: Simple, approachable visuals and messaging build trust with our audience.

Professionalism: A consistent and polished appearance upholds our reputation for excellence.

Chapters

1. Logo usage

.

Logo Variants

Primary logo: Use the full Moichor logo with the wordmark in horizontal orientation for most applications in high-quality formats.

Clear space: Maintain at least .5x the height of the logo around all sides to ensure visual clarity.

Logo colors: D48081 (light pink) and CA5860 (dark pink)

.5x clear space all around

Download png > pdf >

Download png >

Download gif >

2. Color palette

.

D48081

Logo Pink 1
(Light)

262B49

Accent Color
(Deep Blue)

797979

Font Color
(Secondary)

D3D3D3

Font Color
(Secondary on Dark)

CA5860

Logo Pink 2
(Dark)

333333

Font Color
(Primary)

FFFFFF

Font Color
(Primary on Dark)

F6F6F6

Background Gray

ECECEC

Border Gray

3. Typography

.

Font

Inter

Inter is a modern, sans-serif font chosen for its versatility. It is highly legible across both digital screens and printed materials, making it an excellent choice for Moichor’s design system.

Explore and download the Inter font here:
https://rsms.me/inter/

.

Font size, weight, & color

Specifications for text styles in digital and print materials. See the charts:

Light mode:

  
      Style
      Digital Size
      Print Size
      Weight
      Color
Prim/Sec
    

  
      Display Headline
      48px
      36pt
      Bold
      #333333
 #797979
      
    

      Section Headline
      36px
      28pt
      Bold
      #333333
 #797979
      
    

      Subheading
      24px
      18pt
      Semi-Bold
      #333333
 #797979
      
    

      Body Text
      18px
      12pt
      Regular
      #333333
 #797979
      
    

      Secondary Text
      16px
      10pt
      Regular
      #333333
 #797979
      
    

      Button Text
      16px
      11pt
      Semi-Bold
      #333333
 #797979
      
    

      Captions
      14px
      9pt
      Regular
      #333333
 #797979
      
    

Dark mode:

  
      Style
      Digital Size
      Print Size
      Weight
      Color
Prim/Sec
    

  
      Display Headline
      48px
      36pt
      Bold
      
        #FFFFFF
 #D3D3D3
      
    

      Section Headline
      36px
      28pt
      Bold
      #FFFFFF
 #D3D3D3
      
    

      Subheading
      24px
      18pt
      Semi-Bold
      #FFFFFF
 #D3D3D3
      
    

      Body Text
      18px
      12pt
      Regular
      #FFFFFF
 #D3D3D3
      
    

      Secondary Text
      16px
      10pt
      Regular
      #FFFFFF
 #D3D3D3
      
    

      Button Text
      16px
      11pt
      Semi-Bold
      #FFFFFF
 #D3D3D3
      
    

      Captions
      14px
      9pt
      Regular
      #FFFFFF
 #D3D3D3
      
    

.

Capitalization for titles & headings

To ensure consistency, titles and headings follow sentence-style capitalization:

Capitalize only the first word and any proper nouns.
Avoid using a period at the end of titles.

Do: ”Typography guidelines for Moichor”

Don’t: ”Typography Guidelines for Moichor”

Do: ”How to use Pathview”

Don’t: ”How to Use Pathview.”

4. Illustrations & Icons

.

Style: Simple, clean line drawings.

Stroke color: Use #333333 (primary) and #797979 (secondary) for illustrations, and #D48081 (primary) and #CA5860 (secondary) for icons.

Imagery examples: Use playful, minimalistic line art (ex: animals, devices) to communicate complex ideas visually. Maintain consistency across line weight and minimal yet informative details.

5. Layout components & buttons

.

Containers

Colors: For background #F6F6F6, fill containers with solid #FFFFFF. For background #FFFFFF, fill solid #F6F6F6.

Border: Use 1px solid #ECECEC for all sides.

Corners: Rounded, 20px

Padding: Generous to create clean breathing space.

Rounded 20px
Border 1px ##CECECEC

.

Buttons

Primary: Border 2px #333333, text in #333333.

Secondary: Fill with #333333, text in #FFFFFF.

Explore example

6. Communication style

.

Our tone of voice reflects our commitment to friendly, modern, and professional communication. It should engage our audience—veterinarians and clinic professionals—while maintaining clarity, expertise, and empathy.

Examples

Friendly: “We’re here to support your clinic’s diagnostic needs every step of the way”

Modern: “Pathview brings AI-powered insights directly to your clinic for faster decision-making”

Professional: “Moichor’s solutions are designed to empower you with reliable, accurate diagnostics”

Do: Use approachable yet professional language: “Let us help you save time”

Don’t: Use overly casual phrases: “Hey there, want to try something cool?”

Do: Maintain empathy: “We understand the challenges clinics face”

Don’t: Use jargon-heavy statements: “Hematological complexities simplified”

Do: Focus on the benefits and clarity: “Results you can rely on, fast”

Don’t: Be overly technical or vague: “Diagnostic outputs with high accuracy”

Do: Keep it concise and direct: “See results in as little as 15 minutes”

Don’t: Overload with buzzwords: “Leverage advanced synergies to optimize diagnostics”