BlueDocs Brand Guide
The comprehensive guide to BlueDocs brand elements, design principles, and usage guidelines.
Logo
Primary Logo
Icon Only
Logo Spacing
Always maintain clear space around the logo. The minimum clear space is equal to the height of the "B" in BlueDocs.
Do's
Use the logo with proper clear space
Maintain the aspect ratio when resizing
Use the logo on appropriate backgrounds with proper contrast
Don'ts
Don't stretch or distort the logo
Don't change the logo colors
Don't add effects or modify the logo
Colors
Primary Colors
Blue Primary
Blue Medium
Blue Dark
Secondary Colors
Secondary Primary
Secondary Light
Secondary Dark
Background Colors
Background
Background Light
Shades & Tints
Text Colors
Headings
Title Text
Body Text
Body Text
Secondary Text
Typography
Primary Font: Cal Sans
Cal Sans
Used for main brand elements, logo, and key headlines.
Heading 1
Cal Sans H1
Heading 2
Cal Sans H2
Heading 3
Cal Sans H3
Secondary Font: Inter
Inter
Used for body text, buttons, and most UI elements.
Regular
Inter Regular
Medium
Inter Medium
Semibold
Inter Semibold
Bold
Inter Bold
Tertiary Font: Nunito Sans
Nunito Sans
Used for headings in content areas.
Bold
Nunito Sans Bold
Type Scale
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Typography Usage
Cal Sans
Used for:
- Brand name
- Main page headings
- Marketing headlines
- Feature names
Inter
Used for:
- Body text
- Navigation items
- Button text
- Form inputs
- Smaller UI elements
Shadows & Elevations
shadow-sm
Subtle shadow for cards and subtle elevation
className="shadow-sm"shadow
Default shadow for most elevated components
className="shadow"shadow-md
Medium shadow for more prominent elements
className="shadow-md"shadow-lg
Large shadow for popovers and dropdowns
className="shadow-lg"shadow-xl
Extra large shadow for modals and dialogs
className="shadow-xl"shadow-2xl
Maximum shadow for important dialogs
className="shadow-2xl"Usage Guidelines
Use shadows consistently to indicate elevation in the interface.
Larger shadows should be used for elements positioned higher in the stacking context.
Combine shadows with subtle borders for improved definition on light backgrounds.
Border Radius
rounded-sm
2px
rounded
4px
rounded-md
6px
rounded-lg
8px
rounded-xl
12px
rounded-2xl
16px
rounded-3xl
24px
rounded-full
9999px
Component Radius Guidelines
Cards
rounded-lgButtons
rounded-mdInputs
rounded-mdBadges
rounded-fullModals
rounded-lgAvatars
rounded-fullSpacing System
Spacing Scale
Section Spacing
Section Padding
py-16 md:py-24Standard vertical padding for page sections
Component Spacing
gap-6Standard gap between grid items
mb-4 md:mb-6Margin between stacked elements
Content Padding
p-4 md:p-6Standard inner padding for cards and containers
Layout Guidelines
Container
container px-4 mx-auto max-w-7xlStandard container with horizontal padding and maximum width
Grid Layout
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6Responsive grid layout with standard gap
Flex Layout
flex items-center justify-between gap-4Standard flexbox layout with items spacing
Components
Usage Guidelines
Do's & Don'ts
Do
- Maintain consistent spacing between UI elements
- Use the defined color palette for all UI elements
- Follow the typography hierarchy for consistent text styling
- Use proper contrast ratios for accessibility
- Maintain consistent border radius across related elements
Don't
- Mix different design systems or introduce inconsistent styling
- Use colors outside of the brand palette without approval
- Create custom components that don't follow brand guidelines
- Ignore proper spacing and alignment principles
- Use different fonts than those specified in the guidelines
Accessibility
All BlueDocs UI components should follow WCAG 2.1 AA standards for accessibility. Key guidelines to remember:
Color Contrast
Maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
Focus States
All interactive elements must have visible focus states.
Semantic HTML
Use proper HTML elements for their intended purpose.
Text Size
Body text should be at least 16px (1rem) for readability.
