iFile.cloud Brand Guidelines

Brand Mark

Our dynamic logo features a cloud with an upload arrow at its core, surrounded by orbital rings with connection points. This design represents:

☁️ Cloud Storage

Central cloud icon emphasizes secure file storage in the cloud

↑ File Upload

Arrow icon represents seamless file uploading and sharing

🌐 Global Network

Orbital rings symbolize worldwide connectivity and sync

✨ Innovation

Cyan-to-purple gradient conveys cutting-edge technology

Logo Variations

Four professional logo variations to ensure perfect implementation in any context. All logos feature transparent backgrounds and are optimized for both light and dark interfaces.

Primary Logo - Centered

Vertical lockup with icon and wordmark stacked. Perfect for square spaces, social media, and app icons.

↓ Download SVG

Dark Mode - Centered

Vertical lockup optimized for dark backgrounds. White text ensures perfect readability on dark interfaces.

↓ Download SVG

Horizontal - Light

Horizontal lockup for navigation bars, website headers, and email signatures on light backgrounds.

↓ Download SVG

Horizontal - Dark

Horizontal lockup for navigation bars and headers on dark backgrounds. Ideal for dark mode interfaces.

↓ Download SVG

Color Palette

Our color system features a vibrant cyan-to-purple gradient that represents innovation and trust. The deep navy blue in "ifile" provides stability, while the lighter gray in ".cloud" maintains readability.

Primary Colors

Primary Blue

#2d4cd8

rgb(45, 76, 216)

Primary Purple

#9914ff

rgb(153, 20, 255)

Accent Cyan

#32ffc3

rgb(50, 255, 195)

Accent Teal

#00bc9b

rgb(0, 188, 155)

Neutral Colors

Dark

#0a0f1e

rgb(10, 15, 30)

Gray 700

#374151

rgb(55, 65, 81)

Gray 500

#6b7280

rgb(107, 114, 128)

Gray 100

#f3f4f6

rgb(243, 244, 246)

Gradients

Primary Gradient

135deg, #2d4cd8 → #9914ff

Accent Gradient

135deg, #32ffc3 → #00bc9b

Typography

We use Inter, a modern, neutral typeface designed for excellent readability on screens. Its clean geometric forms work well at all sizes.

Font Stack

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

Display Heading

Size: 48px Weight: 800 Usage: Hero headlines

H1 Heading

Size: 36px Weight: 800 Usage: Page titles

H2 Heading

Size: 24px Weight: 700 Usage: Section headers

H3 Heading

Size: 18px Weight: 600 Usage: Subsections

Body text provides comfortable reading for all content. The slightly larger size and generous line height ensure excellent legibility.

Size: 17px Weight: 400 Usage: Body content

Small text for captions, labels, and secondary information.

Size: 15px Weight: 400 Usage: Captions, labels

UI Components

Consistent, accessible components that embody our brand values.

Buttons

Interactive States

Hover over buttons to see smooth transitions and elevation effects.

Developer Reference

Copy-paste code snippets for rapid implementation.

CSS Variables

styles.css

:root {
                        /* Primary Colors */
                        --color-primary-blue: #2d4cd8;
                        --color-primary-purple: #9914ff;
                        --color-accent-cyan: #32ffc3;
                        --color-accent-teal: #00bc9b;
  
                        /* Gradients */
                        --gradient-primary: linear-gradient(135deg, #2d4cd8 0%, #9914ff 100%);
                        --gradient-accent: linear-gradient(135deg, #32ffc3 0%, #00bc9b 100%);
  
                        /* Typography */
                        --font-sans: 'Inter', -apple-system, sans-serif;
}

/* Button Styles */
.btn-primary {
                        background: var(--gradient-primary);
                        color: white;
                        padding: 12px 24px;
                        border-radius: 8px;
                        font-weight: 600;
                        transition: all 0.3s ease;
}

.btn-primary:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 8px 20px rgba(45, 76, 216, 0.3);
}

Tailwind CSS Config

tailwind.config.js

module.exports = {
                        theme: {
                        extend: {
                        colors: {
                        primary: {
                        blue: '#2d4cd8',
                        purple: '#9914ff',
        },
                        accent: {
                        cyan: '#32ffc3',
                        teal: '#00bc9b',
        },
      },
                        backgroundImage: {
                        'gradient-primary': 'linear-gradient(135deg, #2d4cd8 0%, #9914ff 100%)',
                        'gradient-accent': 'linear-gradient(135deg, #32ffc3 0%, #00bc9b 100%)',
      }
    }
  }
}

React Component

Button.tsx

export const Button = ({ children, variant = 'primary' }) => {
                        const styles = {
                        primary: {
                        background: 'linear-gradient(135deg, #2d4cd8 0%, #9914ff 100%)',
                        color: 'white',
    },
                        secondary: {
                        background: 'white',
                        color: '#2d4cd8',
                        border: '2px solid #2d4cd8',
    },
  };

                        return (
    <button style={styles[variant]}>
      {children}
    </button>
  );
};