Rhino Rails Brand Kit

Logo Assets

Rhino Rails’ visual identity is anchored by its distinctive logo suite, designed to maintain brand consistency across all platforms and touch-points.

Primary Logo

The primary logo should be used in most marketing materials and is the preferred choice for website headers, official documents, and promotional materials where space permits.

Secondary Logo

Rhino Rails Secondary Logo

The secondary logo is designed for social media profiles, email signatures, and contexts where a more condensed format is required.

Icon Assets

Standard Icon

This icon serves as our favicon and can be used for app icons, small-format applications, and other instances where the full logo would be too detailed.

Dark Mode Icon

Rhino Rails Dark Icon

Specifically optimized for dark backgrounds and Safari pinned tabs, this icon maintains visibility and brand recognition in dark mode interfaces.

Brand Colors

Our color palette has been carefully selected to convey reliability, strength, and innovation while ensuring optimal accessibility and visual harmony.

Primary Palette

Color Name	Hex Code	RGB	Usage
Primary	`#1b1b1b`	rgb(27, 27, 27)	Main brand color, text, headers
Secondary	`#fbbf24`	rgb(251, 191, 36)	Accents, call-to-action elements
Light	`#f9fafb`	rgb(249, 250, 251)	Backgrounds, negative space
Dark	`#1f2937`	rgb(31, 41, 55)	Secondary text, footers

Functional Colors

Color Name	Hex Code	RGB	Usage
Success	`#0e7235`	rgb(14, 114, 53)	Confirmation messages, positive indicators
Danger	`#800000`	rgb(128, 0, 0)	Error states, critical warnings
Warning	`#e4a11b`	rgb(228, 161, 27)	Caution indicators, notices
Info	`#54b4d3`	rgb(84, 180, 211)	Informational messages, help text

Typography

Rhino Rails employs the Roboto font family for its exceptional readability across devices and clean, modern aesthetic.

Font Hierarchy

Headlines: Roboto Bold (700)
Subheadings: Roboto Medium (500)
Body Copy: Roboto Regular (400)
Captions/Small Text: Roboto Light (300)
Code/Technical: Roboto Mono
UI Elements: Roboto Flex (variable)
Special Displays: Roboto Slab (for emphasized content)

Implementation

/* Example CSS implementation with Tailwind classes */
h1,
h2,
h3,
h4,
h5,
h6 {
    @apply font-bold text-primary;
}

body {
    @apply font-normal text-dark;
}

code,
pre {
    font-family: 'Roboto Mono', monospace;
}

.special-heading {
    font-family: 'Roboto Slab', serif;
}

Design Elements

Spacing System

Rhino Rails adopts a 4px-based grid system for consistent spacing throughout the interface:

Extra Small: 4px (0.25rem)
Small: 8px (0.5rem)
Medium: 16px (1rem)
Large: 24px (1.5rem)
Extra Large: 32px (2rem)
2XL: 48px (3rem)
3XL: 64px (4rem)

Border Radius

None: 0px
Small: 4px (0.25rem)
Medium: 8px (0.5rem)
Large: 12px (0.75rem)
Full: 9999px (for circular elements)

UI Components

Buttons

// Primary Button
<button className="bg-secondary text-primary font-medium py-2 px-4 rounded-md hover:bg-yellow-500 transition-colors" data-ripple-light="true">
  Primary Action
</button>

// Secondary Button
<button className="bg-transparent border border-primary text-primary font-medium py-2 px-4 rounded-md hover:bg-primary hover:text-light transition-colors">
  Secondary Action
</button>

// Tertiary Button
<button className="text-primary underline font-medium hover:text-secondary transition-colors">
  Tertiary Action
</button>

Cards

<div className='rounded-lg border border-gray-200 bg-light p-4 shadow-md'>
    <h3 className='mb-2 text-xl font-bold text-primary'>Card Title</h3>
    <p className='mb-4 text-dark'>Card content goes here with information relevant to the context.</p>
    <button className='font-medium text-secondary transition-colors hover:text-yellow-600'>Call to action →</button>
</div>

Image Style Guidelines

Product Photography:
- Clean, white background (RGB 249, 250, 251)
- Consistent lighting from top-left
- 1200 x 1200px minimum resolution for zoom functionality
- 3:2 aspect ratio for category pages
Lifestyle Photography:
- Natural lighting preferred
- Warm, slightly de-saturated treatment
- Featuring real-world applications of products
- 16:9 aspect ratio for banners
Icons & Illustrations:
- Line weight: 2px stroke
- Rounded caps and joins
- Primary & secondary brand colors only
- Minimal style with essential details only

Voice & Tone

Brand Personality

Expert: Knowledgeable without being condescending
Reliable: Consistent, dependable, trustworthy
Efficient: Direct communication that respects the reader’s time
Solution-oriented: Focused on outcomes and problem-solving

Writing Guidelines

Headlines: Brief, benefit-focused, active voice
Body Copy: Clear, concise, technically accurate
CTAs: Begin with verbs, create urgency, set clear expectations
Product Descriptions: Feature-benefit format, technical specifications in structured lists
Error Messages: Clear explanation of issue with actionable resolution steps

Code Implementation Guidelines

Tailwind Implementation

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: '#1b1b1b',
                secondary: '#fbbf24',
                success: '#0e7235',
                danger: '#800000',
                warning: '#e4a11b',
                info: '#54b4d3',
                light: '#f9fafb',
                dark: '#1f2937',
            },
            fontFamily: {
                sans: ['Roboto', 'sans-serif'],
                mono: ['Roboto Mono', 'monospace'],
                slab: ['Roboto Slab', 'serif'],
                flex: ['Roboto Flex', 'sans-serif'],
            },
        },
    },
    // Other configuration options
};

BigCommerce Stencil Theme Variables

$color-primary: #1b1b1b;
$color-secondary: #fbbf24;
$color-success: #0e7235;
$color-danger: #800000;
$color-warning: #e4a11b;
$color-info: #54b4d3;
$color-light: #f9fafb;
$color-dark: #1f2937;

// scss/settings/typography.scss
$font-family-base: 'Roboto', sans-serif;
$font-family-monospace: 'Roboto Mono', monospace;
$font-family-special: 'Roboto Slab', serif;
$font-family-ui: 'Roboto Flex', sans-serif;

$font-size-base: 1rem;
$line-height-base: 1.5;
$font-weight-normal: 400;
$font-weight-bold: 700;

Accessibility Guidelines

All Rhino Rails digital assets must comply with WCAG 2.1 AA standards, including:

Color Contrast: Minimum 4.5:1 ratio for normal text, 3:1 for large text
Focus States: Visible focus indicators for keyboard navigation
Alt Text: Descriptive alt text for all non-decorative images
Semantic HTML: Proper heading hierarchy and landmark regions
Responsive Design: Fully functional from 320px to 1920px viewport widths

Downloads & Resources

Contact Information

For questions regarding proper brand usage or to request additional assets, please contact:

Brand Team: brand@rhinorails.com Marketing Department: marketing@rhinorails.com Design Support: design@rhinorails.com

Last Updated: March 10, 2025 Version: 2.3.1