Design manual
Intro
This design manual serves as a comprehensive guide to unify how iNFINITE.cz and its derived products appear across all touchpoints - from our website and marketing materials to real-world presence, user interfaces of our applications, and to some extent, the design of our products. This consistent approach ensures that everything we create is instantly recognizable as distinctly iNFINITE.cz.
Logo
Our logo comes in four different variants. White is the primary to be used on dark backgrounds. Supplemental is black variant for uses on white backgrounds. Monochromatic white and black are used for colorful backgrounds.
White (Primary)
Our primary logo variant, designed for dark backgrounds. This is the preferred choice for most digital applications, including our website and dark-themed interfaces.
Black
Alternative version for light backgrounds. Use this variant when placing the logo on white or bright surfaces to maintain optimal contrast and visibility.
White Negative
Monochrome white version for use on colorful or gradient backgrounds where the primary variant might conflict with background colors.
Black Negative
Monochrome black version for use on light colorful backgrounds where the standard black logo might not provide enough contrast.
Usage Guidelines
- Maintain clear space around the logo equal to the height of the "I" character
- Never alter the logo's proportions or colors
- Minimum recommended size: 120px width for digital, 35mm for print
- Always use the appropriate variant based on the background to ensure optimal contrast
Logo with Subsection
When the logo needs to be accompanied by a subsection identifier, use the blue separator and Michroma font to maintain visual consistency with our design system. This approach is commonly used for department identification, equipment labeling, and operational contexts.
Subsection Guidelines
- Use Michroma font for all subsection text to maintain consistency
- Apply wide letter-spacing (6-8px) for improved readability and futuristic aesthetic
- Always include the blue separator (#0198D7) between logo and subsection text
- Keep subsection text uppercase and concise (1-3 words maximum)
- Text must fit on a single line - use for non-breaking spaces between words
- Use responsive font sizing to ensure text never wraps to multiple lines
- Maintain the same proportional relationship: logo width = separator width
- Suitable applications include: department identification, equipment tags, operational badges, and specialized documentation
Colors
Our color palette is built around a dark, grayscale foundation with strategic use of our primary blue accent to create a futuristic, high-tech aesthetic. This approach ensures high contrast, excellent readability, and a sense of technological sophistication.
Primary Accent
The cornerstone of our color system is our signature blue (#0198D7), representing clarity, innovation, and forward-thinking technology. This color is used sparingly for key elements such as accents, separators, and interactive components to draw attention and guide user focus.
Primary Blue
#0198D7
Complementary Palette
To enhance our UI and interactive elements, we use a complementary palette that builds upon our primary blue. These colors are selected for their harmony with the grayscale foundation and are primarily used for status indicators, notifications, and interactive states in user interfaces.
Success Green
#00D084
Error Red
#FF4D4D
Warning Yellow
#FFC107
Complementary Purple
#A855F7
Color States
For interactive elements, each color in our palette has variants for disabled and active/hover states to provide appropriate visual feedback. Disabled variants are mixed with gray for a muted appearance, while active/hover variants are brighter for emphasis.
Primary Blue
Base #0198D7
Disabled #4A7A8C
Active/Hover #00E5FF
Success Green
Base #00D084
Disabled #4A8C73
Active/Hover #00FFAA
Error Red
Base #FF4D4D
Disabled #8C4A4A
Active/Hover #FF3333
Warning Yellow
Base #FFC107
Disabled #8C7A4A
Active/Hover #FFFF00
Purple
Base #A855F7
Disabled #7A6B8C
Active/Hover #CC66FF
Grayscale Foundation
We primarily use dark backgrounds combined with various shades of grayscale for text and elements. This creates a moody, immersive environment that evokes mystery and advanced technology while reducing eye strain and providing an ideal canvas for our blue accents.
Usage Guidelines
- Use primary blue for accents, buttons, links, and key interactive elements
- Apply success green for positive feedback, confirmations, and completed actions
- Use error red for validation errors, failures, and critical alerts
- Employ warning yellow for cautions, pending states, and non-critical notifications
- Utilize complementary purple for special features, premium elements, or secondary accents
- Use disabled variants for non-interactive or inactive states
- Apply active/hover variants for interaction feedback on hover and active states
- Maintain dark backgrounds for all primary interfaces
- Employ grayscale tones for hierarchy: lighter grays for primary text, darker for backgrounds
- Avoid introducing additional colors without approval to maintain brand consistency
Typography
Our typography system is designed to evoke a sense of futuristic innovation while ensuring excellent readability across all mediums. We use a combination of fonts that provide contrast, hierarchy, and a high-tech aesthetic. All typography is optimized for our dark-themed interfaces, with light text on dark backgrounds for reduced eye strain.
Font Families
We employ three primary font families, each with specific use cases to maintain consistency and brand identity:
Michroma (Subtitles)
Design Manual
Outfit (Headings)
Section Heading
Inter (Body Text)
This is sample body text demonstrating readability and flow in paragraphs. It maintains a light weight for contrast with headings.
Usage Guidelines
- Use Michroma sparingly for subtitles, identifiers, and playful elements to maintain its impact
- Apply Outfit Extra Bold for all headings to create strong visual hierarchy
- Stick to Inter Light for body text to ensure readability; avoid heavier weights for paragraphs
- Maintain consistent sizing scale across all materials
- Use uppercase and wide letter-spacing in Michroma for futuristic emphasis
- Ensure sufficient contrast: light grays on dark backgrounds
- For responsive design, use clamp() for fluid sizing (e.g., clamp(1.2rem, 3vw, 2.4rem))
- Avoid mixing font families outside of defined roles
Box Component
The box component is a fundamental building block of our design system, representing a contained panel with distinct futuristic styling. It features decorated edges and corner accents that reinforce our technological identity.
Key Features
- Edge Brackets: Blue (#0198D7) corner brackets provide a distinct technological accent
- Corner Triangles: Additional triangular corner elements enhance the futuristic aesthetic
- Subtle Background: Semi-transparent white background (rgba(255, 255, 255, 0.02)) maintains readability while preserving depth
- Border System: Multi-layered border system with both solid and transparent elements for depth
Variants Showcase
The box component supports different variants for various contexts, including standard blue accents, monochromatic gray, and inset versions for specific backgrounds. Below are examples showing each variant with sample content and horizontal separators (sep-x).
Standard Box
Primary variant with blue accents. Ideal for main content panels.
Monochromatic
Subtle gray variant for secondary content. Uses shades of white/gray.
Inset Grayscale
For light backgrounds. Recessed look with black accents.
Inset White
For colorful backgrounds. White accents for contrast.
Usage Guidelines
- Use boxes to contain related content and create visual hierarchy
- Maintain adequate padding (typically 24px) inside boxes for content breathing room
- Incorporate horizontal separators (sep-x) for dividing content within boxes, as shown in examples
- For mobile responsiveness, corner decorations automatically hide below 768px viewport width
- Can be used for cards, panels, sections, or any contained content area
- Choose variant based on context:
- Standard blue for primary actions and key UI elements
- Monochromatic for secondary content or when subtle hierarchy is needed
- Inset grayscale for light/white backgrounds
- Inset white for colorful/gradient backgrounds
- Avoid mixing variants inconsistently; match to background for optimal contrast