# Home
Source URL: https://design.unisco.com/
# UNIS Design System Home
## Overview
**Title:** UNIS Brand Guidelines Home
**URL:** [https://design.unisco.com/](https://design.unisco.com/)
**Category:** Design System / Brand Guidelines
---
## Purpose
The UNIS design system site centralizes brand guidance, reusable UI components, and protected internal workflows for design-adjacent requests.
It helps teams find:
- Official brand standards
- Downloadable logo and color guidance
- Reusable component blocks and registry JSON
- Protected request flows for business cards and internal collateral
---
## Main Public Sections
### Brand Guidelines
- [Introduction](/guidelines/introduction)
- [Logos](/guidelines/logos)
- [Brand Colors](/guidelines/brand-colors)
- [Typography](/guidelines/typography)
- [Photography](/guidelines/photography)
- [Component Blocks](/guidelines/component-blocks)
- [Shadcn Colors](/guidelines/shadcn-colors)
- [Document Templates](/guidelines/document-templates)
### Component and Design Resources
- [Component Registry](/component)
- [UNIS Block Components](/blocks)
### Workflow and Support Pages
- [Careers](/careers)
- [Login](/login)
- [Business Card Guidelines](/guidelines/business) (sign-in required)
- [Email Design](/guidelines/email-design) (sign-in required)
- [Email Signature](/guidelines/email-signature) (sign-in required)
---
## API and Agent Discovery
- Human-readable API documentation: [https://design.unisco.com/docs/api](https://design.unisco.com/docs/api)
- OpenAPI description: [https://design.unisco.com/openapi.json](https://design.unisco.com/openapi.json)
- API catalog: [https://design.unisco.com/.well-known/api-catalog](https://design.unisco.com/.well-known/api-catalog)
- Agent skills index: [https://design.unisco.com/.well-known/agent-skills/index.json](https://design.unisco.com/.well-known/agent-skills/index.json)
- MCP server card: [https://design.unisco.com/.well-known/mcp/server-card.json](https://design.unisco.com/.well-known/mcp/server-card.json)
---
## Notes for Agents
- Prefer llms.txt or negotiated markdown representations when available.
- Public guideline text is published under `/llms/*.txt`.
- Protected guideline routes still require authentication for the page response.
---
# Business Card Request
Source URL: https://design.unisco.com/business-card-request
# Business Card Request — Rules & Examples
**Page:** [design.unisco.com/business-card-request](https://design.unisco.com/business-card-request)
**Purpose:** What to enter in each field of the request form, and how it gets printed.
**See also:** [Business Card Guidelines](/ai/business.md) for paper, typography, and layout standards.
Copy any example below straight into the form.
---
## Before you start
**You need to be signed in.** This form collects contact details and a
shipping address, so it is restricted to signed-in staff.
Cards take **5–7 business days** once your request reaches the print shop,
**plus shipping time**. Cards cannot be produced faster than this, and the
timeline does not compress for anyone.
### What counts as a business day?
**Monday through Friday.** Saturdays, Sundays, and company-observed holidays do
not count — the print shop is closed on those days.
Holidays we observe:
- New Year's Day
- Memorial Day
- Independence Day
- Labor Day
- Thanksgiving Day
- Day after Thanksgiving
- Christmas Day
Example: sent to the print shop on a Thursday, 5 business days lands on the
following Thursday — not Tuesday.
Every UNIS card uses **one set template**. Your name, title, numbers, and
address change; the layout, typeface, logo placement, and paper stock do not.
You review a preview of your own card before submitting. Once you confirm it is
correct, it goes to print. No proof is emailed to you afterwards and there is no
round of revisions, so read it carefully.
---
## What the card shows
The front carries your details; the back is the UNIS wordmark and tagline.
```
Jane Doe
Operations Manager
jane.doe@unisco.com
unis Cell 714.555.1234 Ext 204
Tel 714.555.9090
6800 Valley View St
Buena Park, CA 90620
www.unisco.com
```
---
## Required fields
These four are required. Everything else is optional or has a sensible default.
| Field | Rule |
| --- | --- |
| First name | Required |
| Middle name | Optional |
| Last name | Required |
| Printed name | First + middle + last must fit 23 characters, spaces included |
| Job title | Required, 23 characters max |
| Work email | Required, must be `@unisco.com` |
---
## Printed name length
**The whole printed name must fit 23 characters, including the spaces.** That is
first, middle and last together — the card has one name line.
```
Jett Whitaker 13 ok
Jett W Whitaker 15 ok
Bartholomew Wellington 22 ok
Bartholomew Q Wellington 24 too long -> Bartholomew Wellington (22)
```
A counter above the name fields shows your running total.
Middle name is optional. Use an initial if the full name will not fit.
Printed exactly as entered, so check your spelling. Capitalisation is corrected
automatically, including after hyphens and apostrophes.
| You type | Printed |
| --- | --- |
| `jane doe` | Jane Doe |
| `o'brien-reyes` | O'Brien-Reyes |
| `MARISOL OKONKWO` | Marisol Okonkwo |
---
## Job title
**Limit: 23 characters.** That is the only restriction — the card has one title
line, and 23 characters is what fits on it. A live counter shows your count.
Anything within the limit is accepted, including slashes, ampersands, and
commas.
```
Operations Manager (18)
VP Sales & Marketing (20)
Manager / Director (18)
Sr. Logistics Analyst (21)
```
Too long — shorten or abbreviate:
```
Senior Director of Operations and Logistics (43) -> Sr. Director, Ops
Executive Vice President of Supply Chain (40) -> EVP, Supply Chain
```
---
## Work email
Only **@unisco.com** addresses are accepted. Personal and outside addresses
(Gmail, Outlook, a client's domain, another company's domain) cannot be printed
on a UNIS card. The `@unisco.com` part is fixed by the form — you only enter
what goes before it.
Type it yourself — nothing is guessed from your name, because plenty of
addresses do not follow `first.last` (Rob M may be `rm@unisco.com`). It is
forced to lowercase, and pasting a full address is fine — the form trims
everything from the @ onwards.
Allowed: lowercase letters, numbers, dots, hyphens.
| Enter | Printed |
| --- | --- |
| `jane.doe` | jane.doe@unisco.com |
| `m.okonkwo` | m.okonkwo@unisco.com |
| `jane-doe2` | jane-doe2@unisco.com |
Not accepted:
```
jane.doe@gmail.com -> enter only "jane.doe"
Jane.Doe -> lowercase only
jane doe -> no spaces; use a dot
```
---
## Phone numbers
Add up to **four** numbers. Each has a type, a number, and an optional
extension. Use **work numbers only** — these are printed on the card and cannot
be personal lines.
**Types:** `Cell` · `Tel` · `Fax`
### Format: `000.000.0000`
Dots only — no dashes, spaces, parentheses, or country codes. The form
reformats as you type, so you can paste any style.
| You paste | Printed |
| --- | --- |
| `(714) 555-1234` | 714.555.1234 |
| `714-555-1234` | 714.555.1234 |
| `1-800-555-1212` | 800.555.1212 |
**1-800 numbers drop the leading 1** — this happens automatically.
### Extensions use `Ext`
Enter digits only in the extension box. The card renders it after the number:
```
Cell 714.555.1234 Ext 204
Tel 714.555.9090
Fax 800.555.1212
```
---
## Facility
Pick your facility from the list — searchable by street, city, state, or ZIP.
Its address is what gets printed on the card.
Not listed? **"Other — not listed"** is the first entry in the dropdown, and
there is a link under the picker that jumps straight to the address fields.
A typed street address prints on one line, so it is capped at **24 characters** — a counter sits above the field. Abbreviate to fit:
`Suite 200` becomes `Ste 200`, `Boulevard` becomes `Blvd`. Addresses picked
from the facility list are already known to fit, so the cap only applies when
you type your own. (This is the count of characters that fit one line.)
### Address format
```
[Street Address incl. suite]
[City], [ST] [ZIP]
```
Example:
```
6800 Valley View St
Buena Park, CA 90620
```
- Include the suite or unit in the street line: `4400 Harbor Blvd, Suite 210`
- Two-letter state abbreviation, selected from a dropdown
- Five-digit ZIP (`90620`). ZIP+4 (`90620-1234`) is **not** accepted
- No commas in the street line — it prints on its own, so they are not needed.
A dash or a space works if you need a separator
---
## Quantity
**500** or **1,000**. Defaults to 500. Ordering for several people means one
submission each — this form is the only way in, so there is no bulk upload.
---
## Delivery
**Pick up at HQ is the default.** Only choose shipping if you cannot collect
them — it adds transit time on top of production.
**Ship to an address** — defaults to shipping to the address printed on your
card. Uncheck that to send them somewhere else, then enter the destination.
**Pick up at HQ** — held for collection at:
```
UNIS HQ Office
6800 Valley View St
Buena Park, CA 90620
Available during business hours, 9:00 AM – 5:00 PM
```
---
## Submitting
1. Fill in the form. The preview beside it updates as you type.
2. Click **Submit request**.
3. Confirm you understand the 5–7 business day timeline.
4. Review the card preview and tick the box confirming your details are correct.
5. Submit. You get a confirmation email now, and a second one when your order
reaches the print shop.
---
## Checklist
- [ ] First name, last name, job title, and work email filled in
- [ ] Name spelled and capitalised correctly
- [ ] Job title within 23 characters
- [ ] Email is an `@unisco.com` address
- [ ] Any work phone numbers formatted `000.000.0000` — numbers are optional,
and a card can carry none
- [ ] Extensions entered as digits only
- [ ] Correct facility selected, or a complete custom address entered
- [ ] Quantity chosen
- [ ] Delivery method and destination correct
- [ ] Preview checked line by line before confirming
---
## Questions
**Can I use my personal email?**
No. Only `@unisco.com` addresses can be printed.
**My title does not fit in 23 characters.**
Then shorten it (`Sr. Director, Ops`). 23 characters is a physical limit, not a
preference.
**How many numbers can I add?**
Up to four, in any mix of Cell, Tel and Fax. Those are the only three types —
there is no toll-free option.
**Can I change the layout, font, or logo?**
No. The template is fixed. Only the content changes.
**My facility is not in the list.**
Choose "Other — not listed" and enter the address.
**I need cards sooner than 5–7 business days.**
Nope. 5–7 business days plus shipping is 5–7 business days plus shipping. It
does not compress for anyone.
**I made a mistake after submitting.**
Nope. Once you submit, it is submitted. The review step is where mistakes get
caught — the card you tick the box on is the card that gets printed.
**Can I add a custom unicorn to the front of my card?**
No. The template does not have a unicorn slot. It does not have a dragon slot
either. [Don't make me tap the sign.](https://youtu.be/7ZfqdrI5HgI)
**What about a subtle gradient? My headshot? A QR code shaped like my initials?**
Also no. The card is the card.
[Don't make me triple tap the sign.](https://youtu.be/7ZfqdrI5HgI)
**Stop the presses! I need to make changes. Can you call the print shop?**
No. We cannot call the print shop, and the presses do not stop. Once you submit,
it is submitted — which is the whole reason you confirm the preview first.
[It goes about like this.](https://youtu.be/ccByiRfEHJk)
---
*Part of the UNIS Brand Guidelines. Full standards at
[design.unisco.com](https://design.unisco.com).*
---
# Guidelines Introduction
Source URL: https://design.unisco.com/guidelines/introduction
# Introduction - UNIS Brand Guidelines
## Overview
**Title:** Brand Guidelines Introduction | UNIS
**Description:** Introduction to UNIS brand guidelines, covering core principles and brand identity standards.
**Page URL:** `/guidelines/introduction`
**Category:** Brand Guidelines
---
## Introduction
This document serves as a reference for maintaining a consistent and compelling brand identity for our leading fulfillment company. By adhering to these guidelines, we create a cohesive and memorable brand experience that reflects our core values and commitment to excellence.
By following these standards, the brand can present a cohesive and professional image, build trust with the audience, and strengthen brand recognition over time. Whether creating digital content, print materials, or co-branded partnerships, the guidelines ensure every touchpoint reflects the brand's values and personality accurately.
---
## Purpose of Brand Guidelines
Brand guidelines serve as the foundation for all visual and verbal communications across the UNIS brand. They provide:
### Consistency
- Unified visual identity across all platforms
- Consistent brand messaging and voice
- Standardized design elements and layouts
- Coherent brand experience at every touchpoint
### Recognition
- Memorable brand presence
- Distinctive visual identity
- Strong brand recall
- Professional appearance
### Trust
- Reliable and professional image
- Quality assurance in communications
- Credibility with stakeholders
- Long-term brand equity
### Efficiency
- Streamlined design process
- Ready-to-use templates and assets
- Clear guidelines for decision-making
- Reduced time and cost in production
---
## What's Inside?
This packet covers our logo, typography, color palette, components, icons and photography. By applying these elements consistently across platforms, we build trust, recognition, and loyalty among our audience.
### Brand Elements Covered
Our comprehensive brand guidelines include the following sections:
#### 1. Brand Logo
Learn how to use our brand logo assets correctly and consistently.
**What You'll Find:**
- Official logo variations
- Logo usage guidelines
- Spacing and clearance rules
- Color variations (full color, monochrome, reversed)
- Minimum size requirements
- Incorrect usage examples
- Partnership and co-branding guidelines
- Download links for logo files
**Link:** [Brand Logo Guidelines](/guidelines/logos)
---
#### 2. Typeface
Learn how to use our typography system for consistent communication.
**What You'll Find:**
- Primary typeface: TeX Gyre Heros
- Font weights and styles
- Typography hierarchy
- Heading styles (H1-H6)
- Body text formatting
- Special text treatments
- Font pairing guidelines
- Downloadable font files
**Link:** [Typography Guidelines](/guidelines/typography)
---
#### 3. Colors
Learn how to use our brand color palette correctly.
**What You'll Find:**
- Primary colors (UNIS Red, Green, Blue, Yellow)
- Secondary accent colors (8 variations)
- Secondary muted colors (8 variations)
- Greyscale colors (11 shades)
- Color values (HEX, RGB, CMYK, HSB, PMS)
- Color usage guidelines
- Accessibility considerations
- Color palette downloads
**Link:** [Color Guidelines](/guidelines/brand-colors)
---
#### 4. Business Cards
Learn about business card specifications and ordering.
**What You'll Find:**
- Business card dimensions
- Design templates
- Material specifications
- Information hierarchy
- Typography standards
- Color usage
- Ordering process
- Contact information guidelines
**Link:** [Business Cards Guidelines](/guidelines/business)
---
#### 5. Photography
Learn how to use photography in line with brand standards.
**What You'll Find:**
- Photography style guide
- Image composition guidelines
- Color grading standards
- Subject matter recommendations
- Lighting and mood
- Do's and don'ts
- Stock photography guidelines
- Image sourcing recommendations
**Link:** [Photography Guidelines](/guidelines/photography)
---
#### 6. Email Signature
Learn how to use our email signature templates.
**What You'll Find:**
- Email signature templates
- Required information
- Optional fields
- Formatting guidelines
- Color and typography standards
- Social media icon usage
- Installation instructions
- Template downloads
**Link:** [Email Signature Guidelines](/guidelines/email-signature)
---
## Core Brand Principles
### 1. Consistency is Key
Apply brand elements uniformly across all materials, whether digital or print, to create a cohesive brand identity that audiences can recognize instantly.
### 2. Respect the Guidelines
These guidelines exist to protect and strengthen the brand. Always refer to them when creating new materials or making decisions about brand representation.
### 3. Maintain Quality
Use high-quality assets and follow best practices in design and production to ensure the brand is always represented professionally.
### 4. Be Adaptable
While consistency is crucial, understand when flexibility is appropriate. The guidelines provide frameworks that can be adapted to different contexts while maintaining brand integrity.
### 5. Think Long-Term
Every brand touchpoint contributes to long-term brand equity. Make decisions that strengthen the brand's position over time.
---
## Who Should Use These Guidelines?
These brand guidelines are essential for:
### Internal Teams
- Marketing and communications teams
- Design and creative departments
- Product development teams
- Human resources
- Sales teams
- Executive leadership
### External Partners
- Advertising and marketing agencies
- Graphic designers and illustrators
- Web developers and digital agencies
- Print production companies
- Event organizers
- Public relations firms
- Content creators and copywriters
### Stakeholders
- Business partners and affiliates
- Vendors and suppliers
- Media contacts
- Co-branding partners
- Authorized resellers
---
## How to Use These Guidelines
### 1. Familiarize Yourself
Read through all sections of the guidelines to understand the complete brand system and how different elements work together.
### 2. Reference Regularly
Keep these guidelines accessible and refer to them whenever creating brand materials or making brand-related decisions.
### 3. Download Assets
Use the official brand assets provided in each section. Don't recreate or modify logos, fonts, or other brand elements.
### 4. Ask When Unsure
If you're uncertain about how to apply the guidelines in a specific situation, contact the brand team for clarification.
### 5. Stay Updated
Check regularly for updates to the guidelines as the brand evolves and new elements are added.
---
## Brand Application
### Digital Applications
- Websites and web applications
- Social media profiles and posts
- Email marketing campaigns
- Digital advertising
- Mobile applications
- Digital presentations
- Video content
- Interactive media
### Print Applications
- Business cards and stationery
- Brochures and flyers
- Reports and white papers
- Presentations and proposals
- Packaging materials
- Signage and wayfinding
- Trade show materials
- Print advertising
### Environmental Applications
- Office interiors
- Retail spaces
- Event environments
- Vehicle graphics
- Building exteriors
- Uniforms and apparel
---
## Navigation & Related Links
### Quick Navigation
- **Current Page:** Introduction
- **Next Steps:** Start with [Brand Logo Guidelines](/guidelines/logos)
### All Guidelines Sections
1. [Brand Logo](/guidelines/logos) - Logo usage and guidelines
2. [Typography](/guidelines/typography) - Font and text standards
3. [Colors](/guidelines/brand-colors) - Color palette and usage
4. [Business Cards](/guidelines/business) - Business card specifications
5. [Photography](/guidelines/photography) - Image guidelines and style
6. [Email Signature](/guidelines/email-signature) - Email signature templates
7. [Email Design](/guidelines/email-design) - Email template design
8. [Document Templates](/guidelines/document-templates) - Document formatting
9. [Component Blocks](/guidelines/component-blocks) - UI component library
10. [Shadcn Colors](/guidelines/shadcn-colors) - UI color system
---
## Brand Standards Compliance
### Maintaining Brand Integrity
To maintain the strength and consistency of the UNIS brand:
#### Do's
✅ Use official brand assets from approved sources
✅ Follow spacing and sizing guidelines
✅ Maintain color accuracy
✅ Use approved typography
✅ Respect minimum size requirements
✅ Ensure sufficient contrast for readability
✅ Test materials across different mediums
✅ Seek approval for novel applications
#### Don'ts
❌ Modify or recreate brand elements
❌ Use outdated logos or assets
❌ Apply unauthorized colors
❌ Stretch, skew, or distort logos
❌ Use non-approved fonts
❌ Place logos on busy backgrounds
❌ Ignore spacing and clearance rules
❌ Create variations without approval
---
## Resources & Support
### Available Resources
**Brand Assets:**
- Logo files (various formats)
- Typography files
- Color palettes (ASE, PDF)
- Template files
- Component libraries
- Photography libraries
**Documentation:**
- Detailed usage guidelines
- Technical specifications
- FAQ sections
- Best practices guides
- Case studies and examples
**Support:**
- Brand team contact information
- Design consultation services
- Asset request process
- Approval workflow
- Training and workshops
---
## Brand Evolution
### Continuous Improvement
The UNIS brand guidelines are living documents that evolve over time to:
- Reflect changing market conditions
- Incorporate new technologies and platforms
- Respond to user feedback and needs
- Expand into new product or service areas
- Maintain relevance and competitiveness
### Staying Current
Brand guidelines are regularly reviewed and updated. Users should:
- Check for updates quarterly
- Subscribe to brand guidelines notifications
- Attend brand training sessions
- Participate in feedback processes
- Report issues or inconsistencies
---
## Implementation Timeline
### Getting Started
**Week 1: Learning**
- Read through all brand guidelines
- Download necessary assets
- Identify materials that need updating
**Week 2-3: Planning**
- Audit existing brand materials
- Create implementation plan
- Identify priorities and dependencies
**Week 4+: Execution**
- Begin updating materials systematically
- Replace old assets with approved versions
- Train team members on guidelines
- Establish ongoing compliance processes
---
## Success Metrics
### Measuring Brand Consistency
Track these metrics to ensure brand guidelines are being followed effectively:
**Consistency Metrics:**
- Percentage of materials using approved assets
- Number of brand violations identified
- Time to create new materials
- Quality scores in brand audits
**Recognition Metrics:**
- Brand awareness levels
- Brand recall rates
- Consistency ratings
- Professional perception scores
**Efficiency Metrics:**
- Time saved using templates
- Reduction in design iterations
- Approval process duration
- Production cost savings
---
## Contact & Support
### Brand Team
For questions, clarifications, or support with brand guidelines:
**General Inquiries:**
- Review the complete guidelines documentation
- Check the FAQ section for common questions
- Contact the UNIS brand team
**Asset Requests:**
- Submit requests through the official process
- Allow adequate time for processing
- Specify format and usage requirements
**Approval Workflow:**
- Submit materials for review
- Include context and usage details
- Follow feedback and revision process
---
## Conclusion
These brand guidelines are your comprehensive resource for creating consistent, professional, and impactful brand communications. By following these standards, you contribute to building a strong, recognizable, and trusted UNIS brand that resonates with our audience and stands the test of time.
Remember: **Consistency builds recognition, and recognition builds trust.**
---
## Quick Reference Links
### Essential Downloads
- [Logo Package](/guidelines/logos)
- [Typography Fonts](/guidelines/typography)
- [Color Palettes](/guidelines/brand-colors)
- [Email Signatures](/guidelines/email-signature)
- [Document Templates](/guidelines/document-templates)
### Key Guidelines
- [Logo Usage](/guidelines/logos)
- [Typography System](/guidelines/typography)
- [Color System](/guidelines/brand-colors)
- [Photography Style](/guidelines/photography)
- [Component Library](/guidelines/component-blocks)
### Support Resources
- Complete brand guidelines
- Brand team contact
- Training materials
- Asset library
- FAQ section
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
*Version 1.0*
---
# Logo Guidelines
Source URL: https://design.unisco.com/guidelines/logos
# Brand Logo Guidelines
## Overview
**Page Title:** Brand Logo
**URL:** [https://design.unisco.com/guidelines/logos](https://design.unisco.com/guidelines/logos)
**Category:** Brand Guidelines / Visual Identity
---
## Introduction
This serves as a guide for preserving a consistent and impactful brand identity for our premier fulfillment company. The UNIS logo is the most recognizable element of our brand identity. These guidelines ensure the logo is used correctly across all applications, maintaining its integrity and effectiveness in representing our brand.
---
## Download Resources
### Logo Package
**Download All Assets:** [UNIS Logo Package](https://cdn.unisco.com/design/downloadables/unis-logos/UNIS%20Logo%20(All).zip)
**Package Contents:**
- High-resolution PNG files (transparent backgrounds)
- Vector SVG files (scalable)
- EPS files (for print)
- Logo variations (full color, black, white, mono)
- Usage guidelines PDF
**Image:** `/images/unis-logo.jpg`
**Description:** Download our high-resolution versions of our logo in multiple formats (PNG, SVG, EPS).
---
## Video Introduction
### Brand Logo Overview
**Video:** `/videos/Logo 3.mp4`
This video showcases:
- Logo variations and applications
- Proper usage examples
- Brand identity in action
- Visual consistency across platforms
**Playback:** Auto-plays, muted, loops continuously
---
## Logo Variations
### Primary Logo Versions
Our logo system includes multiple variations to ensure optimal visibility and impact across different applications and backgrounds:
1. **Full Color Logo**
- Primary version for most applications
- Use on white or light backgrounds
- Maintains all brand colors
2. **Black Logo**
- For light backgrounds
- Single-color printing
- When color printing is unavailable
3. **White Logo**
- For dark backgrounds
- Reverse/knockout applications
- Ensures visibility on dark surfaces
4. **Monochrome Logo**
- For special applications
- Grayscale printing
- Simplified reproduction needs
---
## Usage Guidelines
### General Principles
Use the logo in its original form, ensuring clear visibility and proper spacing. Maintain the correct proportions and colors for consistency across all platforms. There are different versions of the logo to use depending on your background.
### Key Requirements
✅ Use approved logo files only
✅ Maintain proper clear space
✅ Preserve original proportions
✅ Use appropriate version for background
✅ Ensure minimum size requirements
✅ Download from official sources
### Background Selection Guide
**Light Backgrounds:**
- Use full color logo
- Use black logo for print
- Ensure adequate contrast
**Dark Backgrounds:**
- Use white logo version
- Ensure clear visibility
- Maintain proper spacing
**Colored Backgrounds:**
- Choose version with best contrast
- Test visibility before finalizing
- Avoid busy or textured backgrounds
---
## General Information
### Legal Notice
By using the UNIS trademarks you agree to the guidelines as well as our Terms of Service and all our rules and policies. UNIS reserves the right to cancel, modify, or change the permission in these guidelines at any time at its sole discretion.
**For further information, please contact:**
support@unisco.com
### Trademark Protection
The UNIS logo is a registered trademark. Unauthorized use, modification, or reproduction is strictly prohibited without written permission from UNIS.
**Protection includes:**
- Logo design and wordmark
- Color combinations
- Typography and layout
- Symbol and icon marks
---
## Clear-Space Logo Mark
### Minimum Clear Space
The logo must have adequate clear space on all sides to maintain its visual impact and legibility. Clear space prevents other graphic elements from crowding the logo.
### Measurement Guidelines
**Clear Space Rule:**
- Minimum clear space = Height of the "U" in UNIS
- Apply this measurement to all four sides
- Maintain clear space in all applications
- Scale proportionally with logo size
### Visual Reference
Clear space diagrams show the exact measurements and applications of the minimum spacing requirements around the logo.
---
## Logo Sizing
### Minimum Size Requirements
To ensure legibility and maintain brand integrity, never reproduce the logo smaller than the specified minimum sizes:
**Digital/Screen Applications:**
- Minimum width: 120px
- Minimum height: 48px (maintains proportion)
- Ensure clarity on all screen sizes
**Print Applications:**
- Minimum width: 1 inch (25.4mm)
- Minimum height: 0.4 inches (10mm)
- Scale up for larger formats
### Scalability
The logo is designed to scale both up and down while maintaining:
- Visual clarity
- Proportional integrity
- Color accuracy
- Detail preservation
---
## Partner Logos
### Co-Branding Guidelines
The placement of logos in a partnership is crucial to maintaining the integrity of both brands while ensuring visual harmony and clear communication of collaboration. The goal is to present both logos equally, with neither brand overpowering the other, and to convey partnership or co-branding effectively.
### Placement Principles
**Equal Prominence:**
- Both logos should be similar in size
- Neither should dominate the layout
- Maintain visual balance
**Spacing:**
- Adequate space between logos
- Use divider or separator if needed
- Maintain clear space for each logo
**Alignment:**
- Horizontal alignment preferred
- Centered or left/right balanced
- Consistent baseline alignment
### Co-Branding Scenarios
**Primary Partnership:**
- UNIS logo on left
- Partner logo on right
- Equal sizing and spacing
**Secondary Partnership:**
- UNIS logo prominent (larger)
- Partner logo secondary (smaller)
- Clear hierarchy maintained
**Multiple Partners:**
- UNIS logo first or centered
- Partner logos arranged logically
- Consistent spacing and sizing
---
## Trademark Symbol (™) Usage
### When to Use TM Symbol
The ™ symbol should be used in specific contexts to indicate trademark protection:
**Required Uses:**
- First mention in legal documents
- Marketing materials (first occurrence)
- Product packaging
- Website footer
**Placement:**
- Superscript position
- After "UNIS" wordmark
- Consistent sizing (smaller than logo)
**Example:** UNIS™
### Typography for TM Symbol
**Font:** Sans-serif, matching logo font family
**Size:** 50-60% of adjacent text height
**Position:** Superscript, baseline aligned
**Color:** Matches logo or text color
---
## Registered Trademark (®) Usage
### When to Use ® Symbol
Once the UNIS trademark is officially registered, use the ® symbol:
**Required Uses:**
- All official brand materials
- Legal documentation
- Product packaging and labels
- Marketing collateral
- Website and digital assets
**Placement Guidelines:**
- After "UNIS" wordmark
- Superscript position
- Consistent across all materials
**Example:** UNIS®
### Legal Requirements
- Use ® only after official registration
- Apply consistently across all materials
- Include in trademark notices
- Update all materials post-registration
---
## Logo Misuse
### Prohibited Modifications
Do not alter the logo's colors, distort its shape, rotate it, or add effects. Avoid placing it on cluttered backgrounds or resizing it disproportionately.
### Specific Don'ts
❌ **Do Not:**
1. **Change Colors**
- Never alter official brand colors
- Don't create custom color variations
- Avoid gradient or pattern fills
2. **Distort or Stretch**
- Never stretch horizontally or vertically
- Don't skew or rotate the logo
- Maintain original proportions
3. **Add Effects**
- No drop shadows
- No glows or outer effects
- No 3D effects or embossing
4. **Modify Elements**
- Don't rearrange logo components
- Don't separate elements
- Don't redraw or recreate
5. **Cluttered Backgrounds**
- Don't place on busy patterns
- Avoid low-contrast backgrounds
- Don't overlay on complex images
6. **Incorrect Spacing**
- Don't violate clear space
- Don't crowd with other elements
- Don't place too close to edges
7. **Outline or Borders**
- Don't add outlines to logo
- Don't place in boxes or frames
- Don't add decorative borders
8. **Text Integration**
- Don't incorporate into typography
- Don't use as word replacement
- Don't combine with taglines
9. **Tilting or Rotation**
- Don't rotate at angles
- Don't place on curved paths
- Keep horizontal orientation
10. **Unauthorized Versions**
- Don't create custom variations
- Don't use outdated versions
- Don't modify for "creative" effect
---
## Logo Misuse Examples
Visual examples demonstrate common misuse scenarios to avoid:
### Visual Reference Grid
The misuse grid displays prohibited treatments including:
- Stretched/distorted versions
- Rotated orientations
- Color alterations
- Effect additions
- Poor background choices
- Proportion violations
- Element modifications
- Decorative treatments
**Reference:** Review the misuse grid for complete visual examples
---
## File Formats and Usage
### Available Formats
**PNG (Portable Network Graphics)**
- Use for: Web, digital presentations, social media
- Benefits: Transparent background, lossless compression
- Recommended for: Most digital applications
**SVG (Scalable Vector Graphics)**
- Use for: Websites, digital interfaces, responsive design
- Benefits: Infinite scalability, small file size
- Recommended for: Web development, apps
**EPS (Encapsulated PostScript)**
- Use for: Professional printing, large format
- Benefits: Vector format, high quality at any size
- Recommended for: Print production, signage
### Resolution Requirements
**Digital/Screen:**
- 72-150 DPI for web
- 144-300 DPI for high-resolution screens
- PNG or SVG recommended
**Print:**
- Minimum 300 DPI
- Vector format (EPS, SVG) preferred
- CMYK color mode for offset printing
---
## Color Specifications
### Primary Logo Colors
**UNIS Blue:**
- HEX: #238DC1
- RGB: R35 G141 B193
- CMYK: C82 M27 Y0 K24
- PMS: 7461 C
**UNIS Black:**
- HEX: #000001
- RGB: R0 G0 B1
- CMYK: C0 M0 Y0 K100
- PMS: Process Black
**UNIS White:**
- HEX: #FFFFFF
- RGB: R255 G255 B255
- CMYK: C0 M0 Y0 K0
- Use on dark backgrounds
### Color Accuracy
- Always use official color values
- Calibrate monitors for accurate display
- Proof colors before final production
- Consult with brand team for specialty printing
---
## Application Examples
### Digital Applications
- Websites and web applications
- Email signatures
- Social media profiles and posts
- Digital advertising
- Presentations and PDFs
- Mobile apps and interfaces
### Print Applications
- Business cards and stationery
- Brochures and flyers
- Posters and banners
- Vehicle graphics and signage
- Packaging and labels
- Uniforms and merchandise
### Environmental Applications
- Building signage
- Trade show displays
- Retail environments
- Office interiors
- Vehicle wraps and fleet graphics
---
## Approval Process
### When to Seek Approval
Contact the brand team for approval when:
- Creating new marketing materials
- Developing co-branded content
- Designing signage or environmental graphics
- Producing merchandise
- Implementing logo in unusual contexts
- Unsure about proper usage
### Submission Requirements
When requesting approval, provide:
- Mockups or designs showing logo usage
- Context and application details
- Dimensions and specifications
- Background information
- Timeline for implementation
**Contact:** support@unisco.com
---
## Navigation
### Previous Page
**Shadcn Colors**
[View Shadcn Colors →](/guidelines/shadcn-colors)
### Next Page
**Brand Typography**
[View Typography Guidelines →](/guidelines/typography)
---
## Quick Reference Checklist
Before using the logo, ensure:
- [ ] Using approved, official logo file
- [ ] Correct version for background selected
- [ ] Proper clear space maintained on all sides
- [ ] Minimum size requirements met
- [ ] Original proportions preserved
- [ ] No unauthorized modifications applied
- [ ] Appropriate file format for application
- [ ] Colors match brand specifications
- [ ] Placement follows partnership guidelines (if applicable)
- [ ] Legal symbols (™ or ®) included where required
---
## Support & Resources
### Contact Information
For questions about logo usage or to request custom applications:
- **Email:** support@unisco.com
- **Brand Team:** design@unisco.com
- **Documentation:** [design.unisco.com/guidelines/logos](https://design.unisco.com/guidelines/logos)
### Additional Resources
- **Logo Downloads:** Available in guidelines page
- **Video Tutorial:** Brand logo overview video
- **Usage Examples:** See application examples section
- **Legal Information:** Terms of Service and trademark policies
---
## Version Control
**Last Updated:** October 2025
**Maintained By:** UNIS Brand Team
**Review Cycle:** Annual
**Logo Version:** 2.0 (Current)
---
## Best Practices Summary
### Do's
✅ Download official logo files
✅ Use appropriate version for background
✅ Maintain minimum clear space
✅ Preserve original proportions
✅ Meet minimum size requirements
✅ Use correct file format for application
✅ Follow color specifications
✅ Seek approval when unsure
### Don'ts
❌ Don't alter colors or proportions
❌ Don't add effects or modifications
❌ Don't stretch or distort
❌ Don't violate clear space
❌ Don't use on cluttered backgrounds
❌ Don't recreate or redraw
❌ Don't use outdated versions
❌ Don't ignore usage guidelines
---
*This document is part of the UNIS Brand Guidelines. For complete brand standards, visit [design.unisco.com](https://design.unisco.com)*
---
# Brand Colors
Source URL: https://design.unisco.com/guidelines/brand-colors
# Brand Colors - UNIS Design Guidelines
## Overview
**Title:** Color Guidelines | UNIS Brand
**Description:** Official color palette guidelines for UNIS, including primary, secondary, and grayscale colors.
**Page URL:** `/guidelines/brand-colors`
**Category:** Brand Guidelines
---
## Introduction
Our palette embodies trust, professionalism, and innovation with bold, clean tones. This comprehensive color system includes primary colors, secondary accent colors, secondary muted colors, and grayscale colors that form the foundation of the UNIS brand identity.
---
## Primary Colors
Our primary colors represent the core of the UNIS brand. These are the most prominent colors in our visual identity and should be used consistently across all brand materials.
### UNIS Red
- **HEX:** `#E1261C`
- **RGB:** `255, 37, 27`
- **CMYK:** `6, 98, 100, 1`
- **HSB:** `3, 88, 88`
- **PMS:** `485 C`
### UNIS Green
- **HEX:** `#00843D`
- **RGB:** `0, 132, 61`
- **CMYK:** `93, 0, 100, 0`
- **HSB:** `152, 100, 52`
- **PMS:** `348 C`
### UNIS Blue
- **HEX:** `#2196F3`
- **RGB:** `33, 150, 243`
- **CMYK:** `86, 38, 0, 5`
- **HSB:** `207, 86, 95`
- **PMS:** `2195 C`
### UNIS Yellow
- **HEX:** `#FFC107`
- **RGB:** `255, 193, 7`
- **CMYK:** `0, 24, 97, 0`
- **HSB:** `45, 97, 100`
- **PMS:** `7548 C`
---
## Secondary Colors - Accent
Our accent colors adds versatility to enhance your experience. These colors can be used to create visual interest, highlight important elements, and add depth to designs.
### Cherry
- **HEX:** `#AA182C`
- **RGB:** `170, 24, 44`
- **CMYK:** `0, 86, 74, 33`
- **HSB:** `352, 86, 67`
- **PMS:** `187 C`
### Berry
- **HEX:** `#8A2432`
- **RGB:** `138, 36, 50`
- **CMYK:** `0, 74, 64, 46`
- **HSB:** `352, 74, 54`
- **PMS:** `202 C`
### Sage
- **HEX:** `#006072`
- **RGB:** `0, 96, 114`
- **CMYK:** `100, 16, 0, 55`
- **HSB:** `189, 100, 112`
- **PMS:** `3155 C`
### Jade
- **HEX:** `#004E59`
- **RGB:** `0, 78, 89`
- **CMYK:** `100, 12, 0, 65`
- **HSB:** `187, 100, 35`
- **PMS:** `3165 C`
### Slate
- **HEX:** `#316094`
- **RGB:** `49, 96, 148`
- **CMYK:** `67, 35, 0, 42`
- **HSB:** `212, 67, 58`
- **PMS:** `653 C`
### Navy
- **HEX:** `#003A70`
- **RGB:** `0, 58, 112`
- **CMYK:** `100, 48, 0, 56`
- **HSB:** `209, 100, 44`
- **PMS:** `654 C`
### Honey
- **HEX:** `#F2CD00`
- **RGB:** `242, 205, 0`
- **CMYK:** `0, 15, 100, 5`
- **HSB:** `51, 100, 95`
- **PMS:** `7405 C`
### Gold
- **HEX:** `#F4B223`
- **RGB:** `244, 178, 35`
- **CMYK:** `0, 27, 86, 4`
- **HSB:** `41, 86, 96`
- **PMS:** `7409 C`
---
## Secondary Colors - Muted
Our muted colors offers subtle depth and balance, complementing our accents with supportive tones. These colors are perfect for backgrounds, secondary elements, and creating softer visual hierarchies.
### Rose
- **HEX:** `#EFC2B3`
- **RGB:** `239, 194, 179`
- **CMYK:** `0, 19, 25, 6`
- **HSB:** `15, 25, 94`
- **PMS:** `489 C`
### Blush
- **HEX:** `#F4D3D6`
- **RGB:** `244, 211, 214`
- **CMYK:** `0, 14, 12, 4`
- **HSB:** `355, 14, 96`
- **PMS:** `698 C`
### Pistachio
- **HEX:** `#B5DBD2`
- **RGB:** `181, 219, 210`
- **CMYK:** `17, 0, 4, 14`
- **HSB:** `###, ###, ###`
- **PMS:** `566 C`
### Olive
- **HEX:** `#ADC9B8`
- **RGB:** `173, 201, 184`
- **CMYK:** `14, 0, 8, 21`
- **HSB:** `144, 14, 79`
- **PMS:** `559 C`
### Stone
- **HEX:** `#DCE3EB`
- **RGB:** `220, 227, 235`
- **CMYK:** `6, 3, 0, 8`
- **HSB:** `212, 6, 92`
- **PMS:** `656 C`
### Artic
- **HEX:** `#C2D5ED`
- **RGB:** `194, 213, 237`
- **CMYK:** `18, 10, 0, 7`
- **HSB:** `213, 18, 93`
- **PMS:** `2707 C`
### Sand
- **HEX:** `#EADE98`
- **RGB:** `234, 222, 152`
- **CMYK:** `0, 5, 35, 8`
- **HSB:** `51, 35, 92`
- **PMS:** `461 C`
### Oat
- **HEX:** `#E6D67F`
- **RGB:** `230, 214, 127`
- **CMYK:** `0, 7, 45, 10`
- **HSB:** `51, 45, 90`
- **PMS:** `460 C`
---
## Greyscale Colors
Greyscale Colors brings balance and sophistication, providing neutral tones that enhance clarity. These colors are essential for text, borders, backgrounds, and maintaining visual hierarchy.
### Greyscale - 00
- **HEX:** `#F6F6F6`
- **RGB:** `246, 246, 246`
- **CMYK:** `246, 246, 246, 1`
- **HSB:** `0, 0, 96`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 01
- **HEX:** `#F0F0F0`
- **RGB:** `240, 240, 240`
- **CMYK:** `240, 240, 240, 1`
- **HSB:** `0, 0, 94`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 02
- **HEX:** `#E0E0E0`
- **RGB:** `224, 224, 224`
- **CMYK:** `224, 224, 224, 1`
- **HSB:** `0, 0, 88`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 03
- **HEX:** `#CFCFCF`
- **RGB:** `207, 207, 207`
- **CMYK:** `207, 207, 207, 1`
- **HSB:** `0, 0, 81`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 04
- **HEX:** `#B1B1B1`
- **RGB:** `177, 177, 177`
- **CMYK:** `177, 177, 177, 1`
- **HSB:** `0, 0, 69`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 05
- **HEX:** `#929292`
- **RGB:** `146, 146, 146`
- **CMYK:** `146, 146, 146, 1`
- **HSB:** `0, 0, 57`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 06
- **HEX:** `#7A7A7A`
- **RGB:** `122, 122, 122`
- **CMYK:** `122, 122, 122, 1`
- **HSB:** `0, 0, 48`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 07
- **HEX:** `#626262`
- **RGB:** `98, 98, 98`
- **CMYK:** `98, 98, 98, 1`
- **HSB:** `0, 0, 38`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 08
- **HEX:** `#494949`
- **RGB:** `73, 73, 73`
- **CMYK:** `73, 73, 73, 1`
- **HSB:** `0, 0, 29`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 09
- **HEX:** `#333333`
- **RGB:** `26, 26, 26`
- **CMYK:** `51, 51, 51, 1`
- **HSB:** `0, 0, 20`
- **PMS:** `Cool Gray 1 C`
### Greyscale / Muted - 10
- **HEX:** `#1A1A1A`
- **RGB:** `26, 26, 26`
- **CMYK:** `26, 26, 26, 1`
- **HSB:** `0, 0, 10`
- **PMS:** `Cool Gray 1 C`
---
## Downloads & Resources
### Color Palette Library
Download our color palette library in ASE format for use in Adobe Creative Suite applications. This file includes all primary, secondary accent, secondary muted, and greyscale colors.
**Download:** Color Palette Library (ASE Format)
**Authentication Required:** Yes
---
## Navigation & Related Links
### Guidelines Navigation
- **Current Page:** Brand Colors
- **Next Page:** [Shadcn Colors](/guidelines/shadcn-colors)
- **Guidelines Home:** [Design Guidelines](/guidelines)
### Related Guidelines
- [Logo Guidelines](/guidelines/logos)
- [Typography Guidelines](/guidelines/typography)
- [Photography Guidelines](/guidelines/photography)
- [Business Materials Guidelines](/guidelines/business)
---
## Usage Guidelines
### Best Practices
1. **Primary Colors**
- Use for main brand elements and key focal points
- Maintain consistency across all touchpoints
- Ensure proper contrast for accessibility
2. **Secondary Accent Colors**
- Use to add visual interest and hierarchy
- Great for buttons, links, and call-to-action elements
- Can be combined with primary colors for impact
3. **Secondary Muted Colors**
- Perfect for backgrounds and supporting elements
- Use to create depth without overwhelming the design
- Excellent for creating subtle variations
4. **Greyscale Colors**
- Essential for text, borders, and neutral elements
- Use to maintain visual balance
- Follow accessibility guidelines for text contrast
### Color Formats
All colors are provided in multiple formats to support various design applications:
- **HEX:** For web design and digital applications
- **RGB:** For screen-based designs
- **CMYK:** For print production
- **HSB:** For color adjustments and variations
- **PMS (Pantone):** For spot color printing
### Accessibility
- Ensure sufficient contrast ratios between text and background colors
- Test color combinations for color-blind accessibility
- Maintain WCAG 2.1 AA compliance for all text elements
- Use color in combination with other visual indicators (icons, patterns)
---
## Technical Information
### CSS Variables
Primary colors are available as CSS custom properties:
- `--unis-red`
- `--unis-green`
- `--primary` (UNIS Blue)
- `--unis-yellow`
### Implementation
Colors are defined in the design system and can be imported from:
```typescript
import { primaryColors, secondaryAccent, secondaryMuted, grayscale } from "@/components/colors/color-data";
```
---
## Contact & Support
For questions about color usage or brand guidelines, please contact the design team or refer to the complete brand guidelines documentation.
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
---
# Typography
Source URL: https://design.unisco.com/guidelines/typography
# Typography - UNIS Design Guidelines
## Overview
**Title:** Typography Guidelines | UNIS Brand
**Description:** Typography standards for UNIS, covering the primary typeface, sizing, and usage guidelines.
**Page URL:** `/guidelines/typography`
**Category:** Brand Guidelines
---
## Introduction
Typography is a key element of the brand's visual identity, shaping how the brand communicates both visually and emotionally. It provides a consistent style for all written content, ensuring that the brand's message is clear, professional, and recognizable across different platforms.
Our typography system defines the fonts, sizes, weights, and spacing to be used in various contexts, such as headlines, body text, and captions. It ensures readability while maintaining a cohesive look across websites, marketing materials, presentations, and merchandise.
Consistent use of the approved typography helps establish a distinct voice for the brand, reinforcing personality and professionalism. Proper hierarchy and alignment ensure the text is easy to read and guides the audience smoothly through the content.
---
## Primary Typeface
### TeX Gyre Heros
The primary typeface represents the brand's visual voice and plays a vital role in maintaining consistency across all communications. It reflects the brand's personality—whether formal, modern, approachable, or playful—and ensures a cohesive look across digital and print materials.
**Font Family:** TeX Gyre Heros
### Available Weights
#### Bold (700)
- **Usage:** Headlines, section headers, emphasis
- **Font Weight:** 700
- **CSS:** `font-weight: 700` or `font-bold`
- **Best For:** H1-H3 headings, important callouts
#### Regular (400)
- **Usage:** Body text, paragraphs, general content
- **Font Weight:** 400
- **CSS:** `font-weight: 400` or `font-normal`
- **Best For:** Body copy, long-form content
---
## Typography Sizing
Text sizing is a crucial element in establishing visual hierarchy and guiding the reader's attention through content. It helps differentiate between various levels of importance, such as headlines, subheadings, body text, and captions. Proper text sizing ensures legibility across different devices and formats, creating a seamless experience whether in print or digital.
### Size Scale
#### 9x Large (128px)
- **Size:** 128px
- **Usage:** Heading 1 - Hero headlines, main page titles
- **Responsive:** 32px (mobile) → 64px (tablet) → 128px (desktop)
- **Line Height:** 1.1
- **Letter Spacing:** -0.02em
#### 8x Large (96px)
- **Size:** 96px
- **Usage:** Heading 2 - Section headers, major divisions
- **Responsive:** 28px (mobile) → 48px (tablet) → 96px (desktop)
- **Line Height:** 1.1
- **Letter Spacing:** -0.02em
#### 7x Large (64px)
- **Size:** 64px
- **Usage:** Heading 3 - Subsection headers
- **Responsive:** 24px (mobile) → 40px (tablet) → 64px (desktop)
- **Line Height:** 1.2
- **Letter Spacing:** -0.01em
#### 6x Large (56px)
- **Size:** 56px
- **Usage:** Heading 4 - Content headers
- **Responsive:** 22px (mobile) → 36px (tablet) → 56px (desktop)
- **Line Height:** 1.2
- **Letter Spacing:** -0.01em
#### 5x Large (48px)
- **Size:** 48px
- **Usage:** Heading 5 - Minor headers
- **Responsive:** 20px (mobile) → 32px (tablet) → 48px (desktop)
- **Line Height:** 1.3
- **Letter Spacing:** -0.005em
#### 4x Large (36px)
- **Size:** 36px
- **Usage:** Heading 6 - Small headers
- **Responsive:** 18px (mobile) → 28px (tablet) → 36px (desktop)
- **Line Height:** 1.3
- **Letter Spacing:** 0
#### 3x Large (30px)
- **Size:** 30px
- **Usage:** Subtitle 1 - Large subtitles, lead text
- **Responsive:** 16px (mobile) → 24px (tablet) → 30px (desktop)
- **Line Height:** 1.4
- **Letter Spacing:** 0
#### 2x Large (24px)
- **Size:** 24px
- **Usage:** Subtitle 2 - Medium subtitles, intro text
- **Responsive:** 15px (mobile) → 20px (tablet) → 24px (desktop)
- **Line Height:** 1.4
- **Letter Spacing:** 0
#### Extra Large (20px)
- **Size:** 20px
- **Usage:** Body 1 - Large body text, featured content
- **Responsive:** 14px (mobile) → 18px (tablet) → 20px (desktop)
- **Line Height:** 1.5
- **Letter Spacing:** 0
#### Large (18px)
- **Size:** 18px
- **Usage:** Body 2 - Standard body text
- **Responsive:** 14px (mobile) → 16px (tablet) → 18px (desktop)
- **Line Height:** 1.5
- **Letter Spacing:** 0
#### Base (16px)
- **Size:** 16px
- **Usage:** Base 1 - Default text size
- **Responsive:** 13px (mobile) → 15px (tablet) → 16px (desktop)
- **Line Height:** 1.6
- **Letter Spacing:** 0
#### Small (14px)
- **Size:** 14px
- **Usage:** Button 1 - Button text, labels
- **Responsive:** 12px (mobile) → 13px (tablet) → 14px (desktop)
- **Line Height:** 1.4
- **Letter Spacing:** 0
#### Extra Small (12px)
- **Size:** 12px
- **Usage:** Button 2 - Small buttons, captions
- **Responsive:** 11px (mobile) → 11px (tablet) → 12px (desktop)
- **Line Height:** 1.4
- **Letter Spacing:** 0.01em
---
## Usage Guidelines
### When to Use Primary Typeface (TeX Gyre Heros)
**Digital Applications:**
- Website headlines and hero text
- Marketing banner text
- Social media graphics
- App interfaces (headers)
- Digital advertisements
**Print Applications:**
- Poster headlines
- Brochure covers
- Business card names
- Signage
- Packaging headers
**Recommended Contexts:**
- Short, impactful text
- Display purposes
- Brand-forward materials
- Headlines and titles
---
## Typography Hierarchy
### Establishing Visual Hierarchy
A well-defined typography hierarchy guides readers through content efficiently:
1. **Primary Level (H1):** 96-128px
- Most important information
- Used sparingly (once per page)
- Sets the tone and context
2. **Secondary Level (H2-H3):** 56-96px
- Major section divisions
- 2-3 uses per page maximum
- Provides structure
3. **Tertiary Level (H4-H6):** 36-56px
- Subsection headers
- Content organization
- Regular use throughout
4. **Body Text:** 16-20px
- Main content
- Paragraphs and descriptions
- Most frequently used
5. **Supporting Text:** 12-14px
- Captions, labels, metadata
- Secondary information
- UI elements
---
## Responsive Typography
### Mobile-First Approach
Our typography system follows a mobile-first responsive design:
**Mobile (< 640px):**
- Smaller base sizes for readability on small screens
- Tighter line heights to fit more content
- Reduced letter spacing
**Tablet (640px - 1024px):**
- Medium sizes for balanced readability
- Standard line heights
- Normal letter spacing
**Desktop (> 1024px):**
- Full-size typography for impact
- Comfortable line heights for reading
- Optimized letter spacing for large displays
### Implementation
```css
/* Mobile First */
.heading-1 {
font-size: 32px;
line-height: 1.1;
}
/* Tablet */
@media (min-width: 640px) {
.heading-1 {
font-size: 64px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.heading-1 {
font-size: 128px;
}
}
```
---
## Downloads & Resources
### Font Files Available
**Primary Typeface - TeX Gyre Heros:**
- TeX Gyre Heros Bold (700)
- TeX Gyre Heros Regular (400)
**Download Package:**
All UNIS typography fonts are available for download.
**Authentication Required:** Yes
**Download Location:** Typography Font Package
**File Format:** OTF (OpenType Font)
---
## Navigation & Related Links
### Guidelines Navigation
- **Previous Page:** [Brand Logos](/guidelines/logos)
- **Current Page:** Typography
- **Next Page:** [Component Blocks](/guidelines/component-blocks)
### Related Guidelines
- [Brand Colors](/guidelines/brand-colors) - Color palette system
- [Logo Guidelines](/guidelines/logos) - Logo usage
- [Component Blocks](/guidelines/component-blocks) - UI components
- [Guidelines Home](/guidelines)
---
## Technical Specifications
### Font Loading
**Web Font Loading:**
```css
@font-face {
font-family: 'TeX Gyre Heros';
src: url('/fonts/texgyreheros-bold.otf') format('opentype');
font-weight: 700;
font-display: swap;
}
```
**Next.js Local Font:**
```typescript
import localFont from 'next/font/local';
const texGyreHeros = localFont({
src: './fonts/texgyreheros-regular.otf',
variable: '--font-tex-gyre-heros'
});
```
### Performance Considerations
- Use `font-display: swap` for web fonts
- Subset fonts when possible
- Preload critical fonts
- Use system fonts as fallbacks
- Implement progressive enhancement
---
## Best Practices
### Do's
✅ **Use approved typefaces only**
- Stick to TeX Gyre Heros
✅ **Maintain hierarchy**
- Follow the established size scale
- Use appropriate heading levels
✅ **Ensure readability**
- Use proper line heights
- Maintain adequate contrast
- Consider reading distance
✅ **Optimize for devices**
- Use responsive sizes
- Test on multiple screen sizes
- Ensure touch-friendly sizing
✅ **Follow accessibility guidelines**
- Meet WCAG standards
- Provide sufficient contrast
- Use semantic HTML
### Don'ts
❌ **Don't use unapproved fonts**
- Avoid substituting with similar fonts
- Don't mix with non-brand typefaces
❌ **Don't break hierarchy**
- Avoid skipping heading levels
- Don't use inconsistent sizing
❌ **Don't compromise readability**
- Avoid text that's too small
- Don't use insufficient line height
- Don't place text on busy backgrounds
❌ **Don't ignore responsive design**
- Avoid fixed sizes on mobile
- Don't neglect device testing
❌ **Don't sacrifice accessibility**
- Avoid low contrast combinations
- Don't rely solely on size for emphasis
---
## Accessibility
### WCAG Compliance
**Contrast Ratios:**
- Normal text (< 18px): Minimum 4.5:1
- Large text (≥ 18px or ≥ 14px bold): Minimum 3:1
- UI components: Minimum 3:1
**Font Size Minimums:**
- Body text: 16px minimum
- Small text: 12px minimum (use sparingly)
- Mobile text: 14px minimum for body
**Readability:**
- Line length: 50-75 characters optimal
- Line height: 1.5 minimum for body text
- Paragraph spacing: 1.5x line height minimum
### Testing Tools
- WAVE (Web Accessibility Evaluation Tool)
- axe DevTools
- Color contrast checkers
- Screen reader testing
- Font size validators
---
## Use Cases & Examples
### Marketing Materials
**Hero Section:**
- Headline: TeX Gyre Heros Bold, 96-128px
- Subheading: TeX Gyre Heros Regular, 24-30px
- Body: TeX Gyre Heros Regular, 16-18px
### Website Content
**Page Title:**
- H1: TeX Gyre Heros Bold, 64-96px
- H2: TeX Gyre Heros Bold, 48-56px
- Body: TeX Gyre Heros Regular, 16-18px
### Business Documents
**Report Header:**
- Title: TeX Gyre Heros Bold, 36-48px
- Section: TeX Gyre Heros Regular, 24-30px
- Body: TeX Gyre Heros Regular, 14-16px
### UI Components
**Buttons:**
- Primary: TeX Gyre Heros Regular, 14-16px
- Secondary: TeX Gyre Heros Regular, 12-14px
**Forms:**
- Labels: TeX Gyre Heros Regular, 14px
- Input text: TeX Gyre Heros Regular, 16px
- Help text: TeX Gyre Heros Regular, 12-14px
---
## FAQ
### General Questions
**Q: Can I use other fonts with UNIS typography?**
A: No. Only TeX Gyre Heros should be used for UNIS brand materials.
**Q: What if the fonts aren't available on a platform?**
A: Use system font fallbacks (Arial, sans-serif) but work to implement proper fonts as soon as possible.
**Q: Can I adjust font weights between available options?**
A: No. Only use the specific weights provided (400, 700).
### Technical Questions
**Q: How do I load fonts for web use?**
A: Use @font-face declarations or Next.js localFont. Reference the technical specifications section.
**Q: What file formats are provided?**
A: Fonts are provided in OTF (OpenType Font) format.
**Q: How do I optimize font loading performance?**
A: Use font-display: swap, preload critical fonts, and subset when possible.
### Design Questions
**Q: Can I create custom font sizes?**
A: Stick to the established size scale for consistency. Custom sizes require approval.
**Q: How do I handle very long headlines?**
A: Use a smaller size from the scale or break into multiple lines while maintaining hierarchy.
---
## Quick Reference
### Font Families
- **Primary:** TeX Gyre Heros
- **Fallback:** Arial, sans-serif
### Common Weights
- **700:** Bold (headings)
- **400:** Regular (body text)
### Heading Sizes
- **H1:** 96-128px
- **H2:** 64-96px
- **H3:** 56-64px
- **H4:** 48-56px
- **H5:** 36-48px
- **H6:** 30-36px
### Body Sizes
- **Large:** 18-20px
- **Standard:** 16-18px
- **Small:** 14-16px
- **Caption:** 12-14px
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
---
# Photography
Source URL: https://design.unisco.com/guidelines/photography
# Photography - UNIS Design Guidelines
## Overview
**Title:** Photography Guidelines | UNIS Brand
**Description:** Photography standards and principles for UNIS visual content, ensuring consistent brand representation.
**Page URL:** `/guidelines/photography`
**Category:** Brand Guidelines
---
## Introduction
Consistent use of photography ensures the brand feels recognizable and cohesive across all platforms, from digital channels to print media.
The chosen photography style reflects the brand's essence, whether dynamic, professional, warm, or minimal, and supports the narrative the brand aims to communicate. All images should align with the brand's visual standards—using appropriate lighting, composition, and color harmony to maintain a polished and authentic look.
---
## Ethos
We believe photography is more than capturing moments—it's about telling stories, evoking emotions, and preserving memories that last a lifetime. With a focus on authenticity, creativity, and attention to detail, we aim to reflect the beauty and essence of every subject, ensuring each image resonates with meaning and connection.
### Core Values
**Authenticity**
- Capture genuine moments and real emotions
- Showcase actual UNIS operations and team members
- Avoid overly staged or artificial setups
- Present truthful representations of the brand
**Creativity**
- Explore unique perspectives and compositions
- Bring fresh visual approaches to brand storytelling
- Balance creativity with brand consistency
- Innovate within established guidelines
**Attention to Detail**
- Focus on image quality and technical excellence
- Ensure proper composition and framing
- Maintain consistent lighting and color
- Perfect every element within the frame
**Connection**
- Create images that resonate with audiences
- Evoke emotional responses
- Tell compelling brand stories
- Build relationships through visual narrative
---
## Principles
### 1. Tone & Mood
The photography should align with the brand's core personality and message. For example, images can be bright and energetic, calm and minimal, or bold and confident, depending on the context.
**Bright & Energetic:**
- Use vibrant colors and dynamic compositions
- Capture movement and action
- Convey enthusiasm and vitality
- Ideal for: Marketing materials, social media, events
**Calm & Minimal:**
- Embrace negative space and simplicity
- Use soft, even lighting
- Create peaceful, focused compositions
- Ideal for: Product photography, corporate materials, documentation
**Bold & Confident:**
- Strong contrasts and dramatic lighting
- Powerful subject positioning
- Commanding visual presence
- Ideal for: Leadership materials, brand statements, hero images
**Professional & Approachable:**
- Balanced lighting and composition
- Authentic workplace moments
- Team collaboration and engagement
- Ideal for: Corporate communications, recruitment, about us
### 2. Subject Matter
Images should reflect key aspects of the brand, such as real people, spaces, processes, or products. Prioritizing authentic moments and real-world settings is essential.
**Real People:**
- UNIS team members in action
- Authentic workplace interactions
- Diverse representation
- Natural expressions and emotions
- Candid moments over posed shots
**Spaces:**
- UNIS facilities and work environments
- Clean, organized workspaces
- Modern infrastructure
- Brand-consistent environments
- Scale and capability demonstration
**Processes:**
- Operations in action
- Technology and systems
- Workflow and logistics
- Quality control measures
- Innovation and efficiency
**Products:**
- Package handling and delivery
- Technology solutions
- Service demonstrations
- Customer interactions
- End-to-end fulfillment
### 3. Lighting
Utilize natural or soft lighting for approachable tones and bright studio lighting for professional, product-based imagery. Avoid harsh shadows unless the aesthetic specifically demands it.
**Natural Lighting:**
- Soft, diffused daylight
- Golden hour for warmth
- Overcast for even tones
- Window light for interiors
- Best for: People, candid moments, approachable content
**Soft Lighting:**
- Diffused artificial light
- Softboxes and reflectors
- Even illumination
- Minimal harsh shadows
- Best for: Corporate photography, team portraits, documentation
**Studio Lighting:**
- Controlled, professional setup
- Multiple light sources
- Precise positioning
- Consistent results
- Best for: Product photography, formal portraits, marketing materials
**Lighting Don'ts:**
- Avoid harsh midday sun
- No extreme shadows (unless intentional)
- Prevent underexposure or overexposure
- Avoid mixed color temperatures
- No distracting light sources in frame
---
## Image Quality and Resolution
### Resolution Standards
Use high-resolution images—300 DPI for print and 72 DPI for web—to ensure clarity and sharpness across various sizes.
**Print Resolution:**
- **Standard:** 300 DPI minimum
- **Large Format:** 150-300 DPI (depending on viewing distance)
- **High-End Print:** 300-600 DPI
- **Usage:** Business cards, brochures, posters, banners
**Digital Resolution:**
- **Web:** 72 DPI standard
- **Retina/High-DPI:** 144 DPI (2x)
- **4K Displays:** Consider higher resolutions
- **Usage:** Websites, social media, digital ads, presentations
**Recommended Minimum Sizes:**
- Hero Images: 1920x1080px (Full HD) or 2560x1440px (2K)
- Social Media: Platform-specific requirements
- Thumbnails: 400x400px minimum
- Email Headers: 600px width minimum
### File Formats
Employ RAW formats for editing and JPEG/PNG for final delivery.
**RAW Formats:**
- **Purpose:** Original capture, maximum editing flexibility
- **Formats:** CR2 (Canon), NEF (Nikon), DNG (Universal)
- **Usage:** Master files, archiving, professional editing
- **Storage:** Secure backup required
**JPEG:**
- **Purpose:** Final delivery for print and web
- **Quality:** Maximum quality (90-100%)
- **Compression:** Minimal for print, optimized for web
- **Usage:** Most common final format
- **Color Space:** sRGB (web), Adobe RGB (print)
**PNG:**
- **Purpose:** Graphics with transparency, logos
- **Quality:** Lossless compression
- **Usage:** Web graphics, overlays, screenshots
- **When to Use:** Transparency needed, text/graphics quality critical
**TIFF:**
- **Purpose:** High-quality archival, print production
- **Quality:** Uncompressed or lossless compression
- **Usage:** Professional printing, archiving
- **When to Use:** Maximum quality required, no compression acceptable
**WebP (Modern Web):**
- **Purpose:** Optimized web delivery
- **Quality:** Better compression than JPEG
- **Usage:** Modern websites, progressive enhancement
- **When to Use:** Performance-critical web applications
### Color Profiles
Adopt sRGB for digital platforms and CMYK for print materials to maintain color consistency.
**sRGB (Digital):**
- **Standard:** Web, social media, digital displays
- **Coverage:** Smaller but universal color space
- **Compatibility:** All devices and browsers
- **When to Use:** Any digital application
**Adobe RGB (Print):**
- **Standard:** Professional printing, photography
- **Coverage:** Wider color gamut than sRGB
- **Compatibility:** Professional printers and workflows
- **When to Use:** High-end print production
**CMYK (Print):**
- **Standard:** Commercial printing
- **Components:** Cyan, Magenta, Yellow, Black
- **Conversion:** Convert from RGB before printing
- **When to Use:** All print production
**ProPhoto RGB (Professional):**
- **Standard:** Professional photography workflow
- **Coverage:** Widest color gamut
- **Usage:** RAW processing, high-end retouching
- **When to Use:** Maximum color information retention
---
## Do's and Don'ts
### Do's
✅ **Capture authenticity by showcasing real-life scenes of UNIS operations**
- Feature actual team members actively engaged in their roles
- Document real processes and workflows
- Show genuine workplace environments
- Capture authentic emotions and interactions
✅ **Maintain consistency through uniform lighting, angles, and color tones**
- Develop a signature look for brand photography
- Use similar lighting setups across shoots
- Maintain consistent editing style
- Create cohesive visual narrative across platforms
✅ **Focus on quality by ensuring high-resolution images**
- Use professional equipment and techniques
- Ensure proper exposure and focus
- Maintain sharpness and clarity
- Follow technical standards for resolution and format
✅ **Tell compelling stories**
- Create narrative through image sequences
- Show cause and effect
- Highlight brand values through visuals
- Connect emotionally with viewers
✅ **Use appropriate composition techniques**
- Follow rule of thirds
- Maintain balanced framing
- Direct viewer attention effectively
- Create visual hierarchy
✅ **Ensure diversity and inclusion**
- Represent diverse team members
- Show inclusive workplace culture
- Reflect varied perspectives
- Celebrate differences
### Don'ts
❌ **Avoid overly staged or artificial setups**
- Don't create unrealistic scenarios
- Avoid posed, stiff appearances
- Prevent forced smiles or interactions
- Skip stock photo aesthetics
❌ **Refrain from using harsh lighting or extreme filters**
- Don't apply heavy Instagram-style filters
- Avoid over-saturation or unnatural colors
- Prevent harsh shadows and blown highlights
- Skip gimmicky effects
❌ **Prevent overcrowding the frame**
- Don't include distracting backgrounds
- Avoid cluttered compositions
- Remove unnecessary elements
- Keep focus on the main subject
❌ **Don't compromise on quality**
- Avoid low-resolution images
- Don't use poorly lit photos
- Skip out-of-focus shots
- Reject images with technical issues
❌ **Avoid inconsistent styles**
- Don't mix different editing approaches
- Prevent conflicting moods in same campaign
- Avoid varied technical quality
- Maintain unified brand look
❌ **Don't misrepresent the brand**
- Avoid outdated imagery
- Don't show incorrect processes
- Skip misleading scenarios
- Ensure accuracy in representation
---
## Photography Categories
### 1. Corporate Photography
**Purpose:** Professional representation of the company
**Includes:**
- Executive portraits
- Team photos
- Office environments
- Corporate events
- Board meetings
**Style:**
- Professional and polished
- Even, soft lighting
- Neutral backgrounds
- Formal or business casual attire
- Confident, approachable expressions
### 2. Operations Photography
**Purpose:** Showcase UNIS fulfillment and logistics capabilities
**Includes:**
- Warehouse operations
- Package handling
- Technology systems
- Quality control
- Team in action
**Style:**
- Dynamic and energetic
- Natural or warehouse lighting
- Wide shots showing scale
- Detail shots showing precision
- Authentic working moments
### 3. Product Photography
**Purpose:** Highlight services, technology, and solutions
**Includes:**
- Technology platforms
- Packaging solutions
- Service demonstrations
- Product details
- Before/after scenarios
**Style:**
- Clean and professional
- Studio lighting
- Minimal backgrounds
- Sharp focus
- Clear detail visibility
### 4. Marketing Photography
**Purpose:** Promote brand and attract customers
**Includes:**
- Campaign hero images
- Social media content
- Advertisement materials
- Website banners
- Promotional materials
**Style:**
- Bold and eye-catching
- Brand-aligned mood
- High impact compositions
- Emotional connection
- Call-to-action support
### 5. Documentary Photography
**Purpose:** Tell authentic brand stories
**Includes:**
- Day-in-the-life series
- Behind-the-scenes
- Process documentation
- Customer stories
- Company milestones
**Style:**
- Authentic and candid
- Natural lighting preferred
- Photojournalistic approach
- Real moments
- Honest representation
---
## Post-Processing Guidelines
### Color Correction
- Maintain consistent color temperature
- Adjust white balance for accuracy
- Ensure skin tones appear natural
- Match brand color palette when appropriate
- Correct color casts
### Exposure Adjustment
- Optimize overall brightness
- Recover highlight and shadow detail
- Maintain good contrast
- Preserve detail in all areas
- Avoid over-processing
### Sharpening
- Apply appropriate sharpening for output
- Don't over-sharpen (avoid halos)
- Use selective sharpening when needed
- Adjust based on final use (print vs. web)
### Retouching
- Remove distractions and blemishes
- Maintain natural appearance
- Don't over-smooth skin
- Preserve texture and detail
- Keep retouching subtle
### Cropping and Composition
- Follow brand aspect ratios
- Maintain subject integrity
- Consider final use case
- Preserve image quality
- Don't crop too tightly
---
## Usage Contexts
### Digital Platforms
**Website:**
- Hero images: 1920x1080px minimum
- Section images: 1200x800px minimum
- Thumbnails: 400x400px minimum
- Format: JPEG (optimized) or WebP
**Social Media:**
- Instagram: 1080x1080px (square), 1080x1350px (portrait)
- Facebook: 1200x630px (shared links)
- LinkedIn: 1200x627px (shared links)
- Twitter: 1200x675px
- Format: JPEG or PNG
**Email Marketing:**
- Header images: 600px width
- Featured images: 600x400px
- Format: JPEG (optimized for email)
### Print Materials
**Business Cards:**
- 300 DPI minimum
- CMYK color mode
- Format: TIFF or high-quality JPEG
**Brochures/Flyers:**
- 300 DPI minimum
- CMYK color mode
- Bleed area included
- Format: TIFF or PDF
**Posters/Banners:**
- 150-300 DPI (depending on size and viewing distance)
- CMYK color mode
- Large file sizes
- Format: TIFF or PDF
**Annual Reports:**
- 300 DPI minimum
- CMYK color mode
- Professional quality
- Format: TIFF or high-quality JPEG
---
## Navigation & Related Links
### Guidelines Navigation
- **Previous Page:** [Business Cards](/guidelines/business)
- **Current Page:** Photography
- **Next Page:** [Email Signature Templates](/guidelines/email-signature)
### Related Guidelines
- [Brand Colors](/guidelines/brand-colors) - Color palette for image grading
- [Logo Guidelines](/guidelines/logos) - Logo placement in photos
- [Typography](/guidelines/typography) - Text overlay standards
- [Guidelines Home](/guidelines)
---
## Equipment Recommendations
### Cameras
**Professional:**
- Full-frame DSLRs or mirrorless
- Minimum 20MP resolution
- Good low-light performance
- Professional lens options
**Advanced:**
- APS-C or Micro Four Thirds
- 16-24MP resolution
- Versatile for various situations
- Quality lens ecosystem
**Mobile:**
- Latest flagship smartphones
- Multiple lens options
- RAW capability
- Professional apps available
### Lenses
**Portraits:** 50mm f/1.8, 85mm f/1.8
**Wide/Environmental:** 24mm f/1.4, 35mm f/1.8
**Standard:** 24-70mm f/2.8
**Telephoto:** 70-200mm f/2.8
### Lighting
**Studio:** Strobe lights, softboxes, reflectors
**Portable:** LED panels, speedlights
**Natural:** Reflectors, diffusers
### Accessories
- Tripods and monopods
- Memory cards (high-speed, backup)
- External hard drives for backup
- Color calibration tools
- Lens cleaning kit
---
## Workflow Best Practices
### Pre-Shoot
1. Define objectives and shot list
2. Scout locations and lighting
3. Coordinate with subjects
4. Prepare equipment
5. Test lighting setups
### During Shoot
1. Shoot in RAW format
2. Check exposure and focus regularly
3. Capture multiple angles and compositions
4. Shoot more than needed
5. Review images periodically
### Post-Shoot
1. Backup files immediately
2. Cull and organize images
3. Edit selected images
4. Apply consistent processing
5. Export for specific uses
6. Archive master files
7. Deliver finals with documentation
---
## Rights and Permissions
### Model Releases
- Required for identifiable people
- Obtain signed releases
- Store securely
- Include usage terms
- Update as needed
### Property Releases
- Required for private property
- Obtain owner permission
- Document clearly
- Include restrictions
- Maintain records
### Copyright
- Photographer retains copyright unless transferred
- Usage rights defined in contracts
- Credit photographers when appropriate
- Don't use without permission
- Respect intellectual property
---
## Storage and Asset Management
### Organization
- Use consistent naming conventions
- Create logical folder structures
- Tag with metadata
- Include project information
- Date and categorize
### Backup
- Follow 3-2-1 backup rule
- Cloud storage for accessibility
- External drives for security
- Regular backup schedule
- Test backup integrity
### Asset Library
- Centralized storage system
- Search and retrieval capabilities
- Version control
- Access permissions
- Regular audits and updates
---
## Quality Control Checklist
Before using any photograph, verify:
- [ ] Image meets resolution requirements
- [ ] Proper exposure and lighting
- [ ] Sharp focus on subject
- [ ] Appropriate composition
- [ ] Consistent with brand style
- [ ] Correct color profile
- [ ] No distracting elements
- [ ] Model/property releases obtained
- [ ] Proper file format
- [ ] Metadata included
- [ ] Backup created
- [ ] Rights and permissions confirmed
---
## Contact & Support
For photography questions, guidelines clarification, or image requests:
- Contact the UNIS creative team
- Submit photography requests through proper channels
- Allow adequate lead time for shoots
- Provide detailed briefs
- Review and approve before publication
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
---
# Component Blocks
Source URL: https://design.unisco.com/guidelines/component-blocks
# Component Blocks - UNIS Design Guidelines
## Overview
**Title:** Component Blocks | UNIS Brand
**Description:** Component blocks are essential building elements of our brand's user interface. These components serve as consistent, reusable design elements that ensure a seamless and cohesive experience across all digital platforms.
**Page URL:** `/guidelines/component-blocks`
**Category:** Brand Guidelines
---
## Introduction
Component blocks are essential building elements of our brand's user interface. These components serve as consistent, reusable design elements that ensure a seamless and cohesive experience across all digital platforms. Component blocks are essential building elements of our brand's user interface. These components serve as consistent, reusable design elements that ensure a seamless and cohesive experience across all digital platforms.
By using these standardized component blocks, we ensure that every digital touchpoint maintains the same high-quality user experience, visual consistency, and functional reliability that users expect from the UNIS brand.
---
## Component Categories
Our component block library is organized into the following categories:
### 1. Navigation Bars
Navigation bar components for website headers and navigation systems. These components provide consistent navigation patterns across all digital platforms.
**Features:**
- Multiple style variations (Navbar 1, Navbar 2)
- Responsive design (desktop and mobile views)
- Consistent branding and visual hierarchy
- Easy integration with v0.dev
### 2. Footers
Footer components that provide consistent site navigation, legal information, and contact details at the bottom of pages.
### 3. Hero Sections
Hero components designed to make strong first impressions with compelling visuals and clear calls-to-action.
### 4. Headers
Header components for page titles, section introductions, and content hierarchy.
### 5. Feature Sections
Feature components to showcase product or service capabilities, benefits, and key selling points.
### 6. Statistics
Statistics components to display data, metrics, and key performance indicators in visually compelling ways.
### 7. Bento Grids
Bento grid components for creating modern, card-based layouts with flexible content arrangements.
### 8. Cards
Card components for displaying content in contained, scannable formats with consistent styling.
### 9. CTAs (Call-to-Actions)
CTA components designed to drive user engagement and conversion with clear action prompts.
### 10. Carousel
Carousel components for displaying multiple items in a horizontally scrollable format.
### 11. Categories
Category components for organizing and filtering content by topic or type.
### 12. Logo Clouds
Logo cloud components for displaying partner, client, or technology logos in organized grids.
### 13. Comparison
Comparison components for side-by-side feature or product comparisons.
### 14. Gallery
Gallery components for displaying images and media in organized, browsable formats.
### 15. Contact Us
Contact form and information components for enabling user communication.
### 16. FAQs
FAQ components for displaying frequently asked questions in accessible, expandable formats.
---
## Component Features
### Interactive Preview
- **Device Switching:** View components in desktop and mobile layouts
- **Style Variations:** Multiple design options for each component type
- **Real-time Preview:** See how components look before implementation
- **Copy Functionality:** Easy code copying for implementation
### Integration Options
- **v0.dev Integration:** Direct opening in v0.dev for editing and customization
- **JSON Export:** Component configurations available as JSON files
- **Responsive Design:** All components are mobile-responsive by default
- **Accessibility:** Components follow WCAG accessibility guidelines
---
## Technical Specifications
### Navigation Bar Components
#### Navbar 1
- **JSON Config:** `https://design.unisco.com/r/navigation-bar-one.json`
- **Features:** Standard navigation with primary menu items
- **Responsive:** Desktop and mobile views
- **Integration:** v0.dev compatible
#### Navbar 2
- **JSON Config:** `https://design.unisco.com/r/navigation-bar-two.json`
- **Features:** Alternative navigation style
- **Responsive:** Desktop and mobile views
- **Integration:** v0.dev compatible
### Component Structure
All component blocks follow a consistent structure:
- Responsive design patterns
- Consistent spacing and typography
- Brand color integration
- Accessible markup
- Optimized performance
---
## Downloads & Resources
### MCP Access
Access our Master Component Pattern (MCP) system for complete component documentation and implementation guidelines.
**Button Image:** MCP Icon
**Authentication Required:** Yes
### Email Signatures Package
Download the complete UNIS email signatures package, which includes component templates and styling guides.
**Download:** unis-email-signature-pack.zip
**Location:** UNIS CDN
**Authentication Required:** Yes
---
## Navigation & Related Links
### Guidelines Navigation
- **Previous Page:** [Typography](/guidelines/typography)
- **Current Page:** Component Blocks
- **Next Page:** [Business Cards](/guidelines/business)
### Related Guidelines
- [Logo Guidelines](/guidelines/logos)
- [Color Guidelines](/guidelines/brand-colors)
- [Typography Guidelines](/guidelines/typography)
- [Business Materials Guidelines](/guidelines/business)
- [Guidelines Home](/guidelines)
---
## Implementation Guidelines
### Best Practices
1. **Consistency**
- Use component blocks consistently across all platforms
- Maintain the same styling and behavior patterns
- Follow the established visual hierarchy
2. **Customization**
- Customize components to fit specific needs while maintaining brand guidelines
- Use approved color schemes and typography
- Test responsive behavior across all device sizes
3. **Accessibility**
- Ensure all components meet WCAG 2.1 AA standards
- Include proper ARIA labels and roles
- Test with screen readers and keyboard navigation
- Maintain sufficient color contrast ratios
4. **Performance**
- Optimize component loading and rendering
- Use lazy loading for images and heavy content
- Minimize JavaScript bundle sizes
- Test on various devices and network conditions
### Component Selection
When choosing components for your project:
1. **Identify Purpose:** Determine what function the component needs to serve
2. **Review Options:** Explore all available variations in the component library
3. **Test Responsiveness:** Preview components in both desktop and mobile views
4. **Verify Branding:** Ensure components align with UNIS brand guidelines
5. **Implement Consistently:** Use the same component patterns throughout your project
### Integration Process
1. **Preview Component:** Use the interactive preview to see the component in action
2. **Copy Code:** Use the copy button to get component code
3. **Open in v0.dev:** For customization, open the component directly in v0.dev
4. **Test Implementation:** Verify the component works in your environment
5. **Document Usage:** Keep track of which components are used where
---
## Component Development
### Development Standards
All UNIS component blocks follow these development standards:
- **React-based:** Built with React and Next.js
- **TypeScript:** Fully typed for better development experience
- **Tailwind CSS:** Styled using Tailwind CSS utility classes
- **Component Library:** Based on shadcn/ui component patterns
- **Version Control:** JSON configurations stored for version tracking
### Code Quality
- Clean, maintainable code structure
- Comprehensive component documentation
- Proper prop typing and validation
- Unit tests for component functionality
- Accessibility testing and validation
---
## Resources & Tools
### Development Tools
- **v0.dev:** AI-powered component editing and customization
- **JSON Configs:** Pre-configured component settings
- **Preview System:** Real-time component preview with device switching
- **Code Copy:** Quick code extraction for implementation
### Support & Documentation
- Component block specifications
- Implementation examples
- Responsive design guidelines
- Accessibility checklist
- Brand compliance verification
---
## Versioning & Updates
Component blocks are continuously improved and updated to:
- Enhance performance and accessibility
- Add new component variations
- Fix bugs and improve usability
- Keep up with modern web standards
- Incorporate user feedback
Stay updated with the latest component versions through the design system documentation.
---
## Usage Examples
### Navigation Bar Implementation
```typescript
import NavigationBarOne from "@/components/component-blocks/navigation-bar/navigation-bar-one";
export default function Layout() {
return (
{/* Page content */}
);
}
```
### Component Selection
```typescript
// Select and configure components based on project needs
const [navbar, setNavbar] = useState("navbar1");
// Render appropriate component
{navbar === "navbar1" && }
{navbar === "navbar2" && }
```
---
## Quality Assurance
### Testing Checklist
Before deploying component blocks:
- ✅ Visual consistency check
- ✅ Responsive design verification (mobile, tablet, desktop)
- ✅ Accessibility audit (WCAG 2.1 AA)
- ✅ Cross-browser compatibility
- ✅ Performance metrics validation
- ✅ Brand guideline compliance
- ✅ User experience testing
### Maintenance
Component blocks are regularly:
- Reviewed for accessibility compliance
- Updated for performance optimization
- Enhanced with new features
- Refined based on user feedback
- Tested across platforms and devices
---
## Contact & Support
For questions about component blocks, implementation support, or to request new component types:
- Contact the UNIS design system team
- Refer to the complete brand guidelines documentation
- Access the component library through the design system portal
---
## Component Block Principles
### Core Principles
1. **Consistency:** Maintain visual and functional consistency across all platforms
2. **Flexibility:** Allow customization while preserving brand integrity
3. **Accessibility:** Ensure all users can interact with components effectively
4. **Performance:** Optimize for fast loading and smooth interactions
5. **Scalability:** Build components that work at any scale
6. **Maintainability:** Create code that's easy to update and extend
### Design Philosophy
Our component blocks are designed with these philosophies in mind:
- **User-Centered:** Components prioritize user needs and experiences
- **Brand-Aligned:** Every component reflects UNIS brand values and aesthetics
- **Future-Proof:** Built to adapt to evolving technologies and standards
- **Collaborative:** Designed for teams to work together efficiently
- **Documented:** Comprehensive documentation for easy implementation
---
## Related Components
### Component Library Structure
```
components/
├── component-blocks/
│ ├── index.tsx
│ └── navigation-bar/
│ ├── index.tsx
│ ├── navigation-bar-one.tsx
│ └── navigation-bar-two.tsx
```
### Component Integration Points
- Email signature templates
- Business card designs
- Marketing materials
- Digital products
- Web applications
- Mobile applications
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
---
# Shadcn Colors
Source URL: https://design.unisco.com/guidelines/shadcn-colors
# Shadcn Colors - UNIS Design Guidelines
## Overview
**Title:** Shadcn Colors | UNIS Brand
**Description:** We use the shadcn/ui color system to ensure consistency, accessibility, and scalability across our UI.
**Page URL:** `/guidelines/shadcn-colors`
**Category:** Brand Guidelines
---
## Introduction
We use the shadcn/ui color system to ensure consistency, accessibility, and scalability across our UI. This comprehensive color system provides a robust foundation for building modern, accessible, and visually cohesive user interfaces.
The shadcn/ui color system is built on semantic color tokens that adapt to both light and dark modes, ensuring your designs look great in any context while maintaining accessibility standards.
---
## Color System Overview
### What is shadcn/ui?
shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. The color system is designed to be:
- **Semantic**: Colors are named based on their function, not their appearance
- **Accessible**: Built-in contrast ratios meet WCAG standards
- **Flexible**: Easily customizable for brand needs
- **Scalable**: Works seamlessly across light and dark modes
- **Developer-Friendly**: Simple CSS variable system
### Color Formats Supported
All colors in the system are provided in multiple formats:
- **HEX**: For traditional web usage (#0a0a0a)
- **RGB**: For RGB color space (10, 10, 10)
- **HSL**: For hue, saturation, lightness (0, 0%, 4%)
- **OKLCH**: For perceptually uniform color space (0.14 0.000 0)
---
## Color Categories
### 1. Primary Theme Colors
Foundation colors that define the overall look and feel of the UI.
#### Background
- **HEX:** `#0a0a0a`
- **RGB:** `10, 10, 10`
- **HSL:** `0, 0%, 4%`
- **OKLCH:** `0.14 0.000 0`
- **Usage:** Main background for dark mode
#### Foreground
- **HEX:** `#f5f5f5`
- **RGB:** `245, 245, 245`
- **HSL:** `0, 0%, 96%`
- **OKLCH:** `0.97 0.000 0`
- **Usage:** Primary text color on dark backgrounds
#### Primary
- **HEX:** `#0077b6`
- **RGB:** `0, 119, 182`
- **HSL:** `200, 100%, 36%`
- **OKLCH:** `0.54 0.19 237`
- **Usage:** Main brand color for buttons, links, and primary actions
#### Primary Foreground
- **HEX:** `#fafdff`
- **RGB:** `250, 253, 255`
- **HSL:** `204, 100%, 99%`
- **OKLCH:** `0.99 0.003 257`
- **Usage:** Text color on primary-colored backgrounds
---
### 2. Secondary & Accent Colors
Supporting colors for less prominent UI elements.
#### Secondary
- **HEX:** `#23232a`
- **RGB:** `35, 35, 42`
- **HSL:** `240, 9%, 15%`
- **OKLCH:** `0.21 0.012 257`
- **Usage:** Secondary buttons and components
#### Secondary Foreground
- **HEX:** `#f5f5f5`
- **RGB:** `245, 245, 245`
- **HSL:** `0, 0%, 96%`
- **OKLCH:** `0.97 0.000 0`
- **Usage:** Text on secondary backgrounds
#### Accent
- **HEX:** `#23232a`
- **RGB:** `35, 35, 42`
- **HSL:** `240, 9%, 15%`
- **OKLCH:** `0.21 0.012 257`
- **Usage:** Accent elements and highlights
#### Accent Foreground
- **HEX:** `#f5f5f5`
- **RGB:** `245, 245, 245`
- **HSL:** `0, 0%, 96%`
- **OKLCH:** `0.97 0.000 0`
- **Usage:** Text on accent backgrounds
---
### 3. UI Component Colors
Specialized colors for specific UI components.
#### Card
- **HEX:** `#232323`
- **RGB:** `35, 35, 35`
- **HSL:** `0, 0%, 14%`
- **OKLCH:** `0.20 0.000 0`
- **Usage:** Card backgrounds
#### Card Foreground
- **HEX:** `#f5f5f5`
- **RGB:** `245, 245, 245`
- **HSL:** `0, 0%, 96%`
- **OKLCH:** `0.97 0.000 0`
- **Usage:** Text on cards
#### Muted
- **HEX:** `#23232a`
- **RGB:** `35, 35, 42`
- **HSL:** `240, 9%, 15%`
- **OKLCH:** `0.21 0.012 257`
- **Usage:** Muted or de-emphasized elements
#### Muted Foreground
- **HEX:** `#b1b1bb`
- **RGB:** `177, 177, 187`
- **HSL:** `240, 7%, 71%`
- **OKLCH:** `0.76 0.009 257`
- **Usage:** Muted text and secondary information
#### Popover
- **HEX:** `#2a2a2a`
- **RGB:** `42, 42, 42`
- **HSL:** `0, 0%, 16%`
- **OKLCH:** `0.23 0.000 0`
- **Usage:** Popover and dropdown backgrounds
#### Popover Foreground
- **HEX:** `#f8f8f8`
- **RGB:** `248, 248, 248`
- **HSL:** `0, 0%, 97%`
- **OKLCH:** `0.98 0.000 0`
- **Usage:** Text in popovers and dropdowns
---
### 4. Utility & Form Colors
Colors for borders, inputs, and other utility elements.
#### Border
- **HEX:** `#44444c`
- **RGB:** `68, 68, 76`
- **HSL:** `240, 6%, 28%`
- **OKLCH:** `0.36 0.010 257`
- **Usage:** Borders and dividers
#### Input
- **HEX:** `#23232a`
- **RGB:** `35, 35, 42`
- **HSL:** `240, 9%, 15%`
- **OKLCH:** `0.21 0.012 257`
- **Usage:** Input field backgrounds
#### Ring
- **HEX:** `#e4e4e8`
- **RGB:** `228, 228, 232`
- **HSL:** `240, 7%, 90%`
- **OKLCH:** `0.92 0.003 257`
- **Usage:** Focus rings and outlines
#### Radius
- **HEX:** `#0a0a0a`
- **RGB:** `10, 10, 10`
- **HSL:** `0, 0%, 4%`
- **OKLCH:** `0.14 0.000 0`
- **Usage:** Border radius values
---
### 5. Status & Feedback Colors
Colors for communicating system states and user feedback.
#### Destructive
- **HEX:** `#f03e4c`
- **RGB:** `240, 62, 76`
- **HSL:** `355, 85%, 59%`
- **OKLCH:** `0.64 0.24 18`
- **Usage:** Error states, delete actions, warnings
#### Destructive Foreground
- **HEX:** `#220202`
- **RGB:** `34, 2, 2`
- **HSL:** `0, 89%, 7%`
- **OKLCH:** `0.15 0.07 18`
- **Usage:** Text on destructive backgrounds
---
## Implementation
### CSS Variables
The color system uses CSS custom properties (variables) for easy implementation:
```css
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
/* ... more variables */
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
/* ... more variables */
}
```
### Tailwind CSS Usage
Use the colors in your Tailwind classes:
```jsx
```
### Component Examples
The system includes working examples:
- **Cards**: Various card layouts and styles
- **Forms**: Input fields, selects, checkboxes
- **Navigation**: Headers, sidebars, menus
- **Data Display**: Tables, stats, metrics
- **Pricing**: Pricing cards and tables
- **Dashboard**: Complete dashboard example
---
## Theme Modes
### Light Mode
Optimized for daytime viewing with light backgrounds and dark text.
### Dark Mode
Reduced eye strain with dark backgrounds and light text.
### Theme Switching
The system supports seamless switching between light and dark modes without requiring page reloads.
**Implementation:**
```tsx
import { useTheme } from "next-themes"
function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
)
}
```
---
## Accessibility
### WCAG Compliance
All color combinations in the system meet WCAG 2.1 Level AA standards:
- **Normal Text**: Minimum contrast ratio of 4.5:1
- **Large Text**: Minimum contrast ratio of 3:1
- **UI Components**: Minimum contrast ratio of 3:1
### Color Blindness Considerations
The color system is designed to be distinguishable for users with:
- Protanopia (red-blind)
- Deuteranopia (green-blind)
- Tritanopia (blue-blind)
### Best Practices
✅ **Do:**
- Use semantic color tokens
- Test contrast ratios
- Provide text alternatives for color-coded information
- Use color in combination with other visual indicators
- Test with color blindness simulators
❌ **Don't:**
- Rely solely on color to convey information
- Use custom colors without checking accessibility
- Override semantic tokens without proper testing
- Ignore focus states and keyboard navigation
---
## CSS Theme Files
Pre-built theme files are available in multiple formats:
### Version 3 (HSL-based)
- `css-themes-v3-hex.css` - HEX format
- `css-themes-v3-hsl.css` - HSL format
- `css-themes-v3-rgb.css` - RGB format
### Version 4 (OKLCH-based)
- `css-themes-v4-hex.css` - HEX format
- `css-themes-v4-hsl.css` - HSL format
- `css-themes-v4-oklch.css` - OKLCH format (recommended)
- `css-themes-v4-rgb.css` - RGB format
**Recommendation**: Use OKLCH format (v4) for better perceptual uniformity and color accuracy.
---
## Component Examples
### Cards Demo
Interactive card examples showcasing:
- Activity Goals
- Calendar Views
- Chat Interfaces
- Cookie Settings
- Account Creation
- Data Tables
- Metrics Display
- Payment Methods
- Issue Reports
- Share Dialogs
- Statistics
- Team Members
### Dashboard Example
Full-featured dashboard demonstrating:
- Navigation components
- Data visualization
- Card layouts
- Form elements
- Responsive design
- Theme switching
### Pricing Example
Pricing page templates with:
- Multiple pricing tiers
- Feature comparison
- Call-to-action buttons
- Responsive layouts
---
## Navigation & Related Links
### Guidelines Navigation
- **Previous Page:** [Brand Colors](/guidelines/brand-colors)
- **Current Page:** Shadcn Colors
- **Next Page:** [Logos](/guidelines/logos)
### Related Guidelines
- [Brand Colors](/guidelines/brand-colors) - Primary brand color palette
- [Typography](/guidelines/typography) - Font and text standards
- [Component Blocks](/guidelines/component-blocks) - UI component library
- [Guidelines Home](/guidelines)
---
## Technical Specifications
### Color Space
**OKLCH (Recommended)**
- Perceptually uniform color space
- Better for programmatic color manipulation
- More accurate hue interpolation
- Wider color gamut support
**HSL (Legacy)**
- Traditional HSL color space
- Wide browser support
- Familiar to developers
- Limited color gamut
### Browser Support
The color system supports all modern browsers:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
### Framework Integration
Works seamlessly with:
- Next.js
- React
- Vue
- Svelte
- Plain HTML/CSS
---
## Customization
### Creating Custom Themes
1. **Define Your Colors**
- Choose your primary brand colors
- Generate complementary shades
- Test contrast ratios
2. **Update CSS Variables**
```css
:root {
--primary: YOUR_COLOR;
--primary-foreground: YOUR_FOREGROUND_COLOR;
}
```
3. **Test Both Modes**
- Ensure colors work in light and dark modes
- Verify accessibility standards
- Test on multiple devices
### Theme Generator Tools
- shadcn/ui Theme Generator
- Realtime Colors
- Coolors
- Adobe Color
---
## Best Practices
### Usage Guidelines
1. **Use Semantic Tokens**
- Always use defined color tokens
- Don't use arbitrary color values
- Stick to the semantic naming system
2. **Maintain Consistency**
- Use colors for their intended purpose
- Don't mix semantic meanings
- Keep patterns consistent across UI
3. **Test Accessibility**
- Check contrast ratios
- Test with screen readers
- Verify keyboard navigation
- Use accessibility tools
4. **Support Both Themes**
- Design for both light and dark modes
- Test theme switching
- Ensure readability in both modes
5. **Document Custom Changes**
- Document any modifications
- Maintain changelog
- Share updates with team
---
## Resources & Support
### Documentation
- shadcn/ui official documentation
- Radix UI color system
- Tailwind CSS color documentation
- WCAG accessibility guidelines
### Tools
- Color contrast checker
- Theme preview tool
- Component explorer
- CSS variable inspector
### Community
- shadcn/ui Discord
- GitHub discussions
- Stack Overflow
- Component showcase
---
## FAQ
### General Questions
**Q: What is the difference between shadcn colors and brand colors?**
A: Brand colors are your company's official colors (UNIS Red, Green, Blue, Yellow). Shadcn colors are UI system colors used for interface components, backgrounds, and interactive elements.
**Q: Can I customize shadcn colors?**
A: Yes, you can customize the color tokens while maintaining the semantic structure and accessibility standards.
**Q: Do I need to use both color systems?**
A: Yes. Use brand colors for brand elements (logos, hero sections) and shadcn colors for UI components (buttons, cards, forms).
### Technical Questions
**Q: Which color format should I use?**
A: We recommend OKLCH for new projects. It provides better perceptual uniformity and color accuracy.
**Q: How do I implement dark mode?**
A: The system automatically handles dark mode through CSS variables. Use the provided theme provider to enable switching.
**Q: Can I use these colors with other frameworks?**
A: Yes, the color system is framework-agnostic and works with any CSS-based framework.
### Design Questions
**Q: How do I ensure my designs are accessible?**
A: Use the provided color combinations, test contrast ratios, and follow WCAG guidelines. All default colors meet AA standards.
**Q: Can I add new colors to the system?**
A: Yes, but maintain the semantic naming convention and ensure accessibility standards are met.
**Q: How do I handle brand colors in the UI?**
A: Integrate brand colors as custom variables while using shadcn colors for UI components.
---
## Quick Reference
### Common Color Tokens
```css
bg-background /* Main background */
bg-foreground /* Text color background */
bg-primary /* Primary brand action */
bg-secondary /* Secondary actions */
bg-accent /* Accent elements */
bg-muted /* De-emphasized elements */
bg-destructive /* Error/delete states */
bg-border /* Borders and dividers */
bg-input /* Form inputs */
bg-card /* Card backgrounds */
```
### Text Color Tokens
```css
text-foreground /* Primary text */
text-primary-foreground /* Text on primary */
text-secondary-foreground /* Text on secondary */
text-muted-foreground /* Secondary text */
text-accent-foreground /* Text on accent */
text-destructive /* Error text */
```
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
*Based on shadcn/ui Color System*
---
# Document Templates
Source URL: https://design.unisco.com/guidelines/document-templates
# Document Templates - UNIS Design Guidelines
## Overview
**Title:** Document Templates | UNIS Brand
**Description:** This ensure consistency, providing ready-made layouts that keep every material on-brand and cohesive.
**Page URL:** `/guidelines/document-templates`
**Category:** Brand Guidelines
---
## Introduction
Document templates are essential tools for maintaining consistency across all UNIS business communications. These professionally designed templates ensure that every document, from reports to presentations, maintains the same high-quality appearance and brand identity. By using these standardized templates, organizations can save time while ensuring professional and cohesive communication materials.
Our document template system provides ready-made layouts that incorporate UNIS branding elements, including logos, color schemes, typography, and formatting standards. Each template is designed to be flexible enough to accommodate various types of content while maintaining brand consistency.
---
## Template Categories
Our document template library includes the following categories:
### Document Template 1 - Professional Business Documents
This version provides a clean and professional layout for business documents, incorporating UNIS branding elements while maintaining readability and structure. It includes proper spacing, typography hierarchy, and brand colors to ensure consistency across all corporate communications.
**Available Formats:**
1. **Business Document** - General business correspondence and documents
2. **Report** - Comprehensive reports with detailed analysis
3. **Presentation** - Presentation slides and materials
4. **Proposal** - Business proposals and project outlines
5. **Contract** - Legal contracts and agreements
6. **Manual** - User manuals and documentation
7. **Guide** - Instructional guides and how-to documents
8. **Specification** - Technical specifications and requirements
9. **Policy** - Company policies and procedures
10. **Procedure** - Step-by-step procedural documents
**Key Features:**
- Clean, professional layout
- UNIS branding integration
- Proper typography hierarchy
- Consistent spacing and margins
- Brand color implementation
- Responsive formatting
- Print-ready design
### Envelope Template
Professional envelope designs that feature company branding and contact information, ensuring consistent brand identity across all correspondence. These templates provide a polished and unified appearance for official business communications.
**Features:**
- UNIS logo placement
- Professional layout
- Contact information formatting
- Brand-consistent design
- Multiple size options
- Print-ready format
### Certificate Template
Elegant certificate designs that feature company branding and professional layout for recognizing achievements and accomplishments. These templates provide a prestigious and unified appearance for official recognition documents.
**Features:**
- Professional certificate design
- UNIS branding integration
- Customizable fields
- High-quality layout
- Suitable for formal recognition
- Print-optimized design
---
## Technical Specifications
### HTML Template Structure
All document templates are provided in HTML format for maximum compatibility and ease of customization. The templates use:
- **Font Family:** TeX Gyre Heros, Helvetica, sans-serif
- **Background Color:** #FFFFFF (white)
- **Text Color:** #000000 (black)
- **Secondary Text:** #666666 (gray)
- **Border Color:** #E0E0E0 (light gray)
### Standard Template Layout
#### Header Section
- Centered UNIS logo (max-width: 200px)
- Document title (32px, font-weight: 700)
- Subtitle/description (18px, color: #666666)
#### Content Section
- Max-width: 800px
- Line-height: 1.6
- Section titles: 24px, font-weight: 600
- Body text: Standard size with proper spacing
#### Footer Section
- Copyright information
- Border-top: 1px solid #E0E0E0
- Centered text (14px)
- Color: #666666
### Template Variations
#### Basic Template
```css
body {
padding: 40px;
max-width: 800px;
margin: 0 auto;
}
```
#### Compact Template
```css
body {
padding: 30px;
max-width: 700px;
line-height: 1.5;
}
```
#### Comprehensive Template
```css
body {
padding: 50px;
max-width: 900px;
line-height: 1.7;
}
```
---
## Downloads & Resources
### Complete Document Templates Pack
Download all UNIS document templates in one comprehensive package. This includes all template variations, envelope designs, and certificate templates.
**Download:** Document Templates.zip
**File Name:** unis-document-templates-all.zip
**Location:** UNIS CDN
**URL:** https://cdn.unisco.com/design/downloadables/unis-document-templates/Document%20Templates.zip
### Individual Template Downloads
Each template can be downloaded individually in HTML format:
1. Business Document Template - `document-template-business.html`
2. Report Template - `document-template-report.html`
3. Presentation Template - `document-template-presentation.html`
4. Proposal Template - `document-template-proposal.html`
5. Contract Template - `document-template-contract.html`
6. Manual Template - `document-template-manual.html`
7. Guide Template - `document-template-guide.html`
8. Specification Template - `document-template-specification.html`
9. Policy Template - `document-template-policy.html`
10. Procedure Template - `document-template-procedure.html`
11. Envelope Template - `unis-envelope-template.html`
12. Certificate Template - `unis-certificate-template.html`
---
## Navigation & Related Links
### Guidelines Navigation
- **Previous Page:** [Email Signature Templates](/guidelines/email-signature)
- **Current Page:** Document Templates
- **Next Page:** [Component Blocks](/guidelines/component-blocks)
### Related Guidelines
- [Logo Guidelines](/guidelines/logos)
- [Color Guidelines](/guidelines/brand-colors)
- [Typography Guidelines](/guidelines/typography)
- [Business Materials Guidelines](/guidelines/business)
- [Guidelines Home](/guidelines)
---
## Usage Guidelines
### Best Practices
1. **Consistency**
- Always use official UNIS templates for business documents
- Maintain consistent branding across all materials
- Follow the established typography and color guidelines
- Use the same template style for similar document types
2. **Customization**
- Customize content while preserving layout structure
- Maintain header and footer formatting
- Keep logo placement consistent
- Use approved brand colors only
3. **Typography**
- Use TeX Gyre Heros for headings
- Maintain proper hierarchy with font sizes
- Keep line spacing consistent
- Use appropriate font weights (600-700 for headings)
4. **Formatting**
- Preserve margins and padding
- Maintain section spacing
- Keep content centered and aligned
- Use proper paragraph breaks
### Document Selection Guide
Choose the appropriate template based on your document type:
- **Business Documents:** General correspondence, memos, internal documents
- **Reports:** Detailed analysis, research findings, performance reports
- **Presentations:** Slide decks, presentation materials, pitch documents
- **Proposals:** Project proposals, business plans, service offerings
- **Contracts:** Legal agreements, service contracts, NDAs
- **Manuals:** User guides, operation manuals, handbooks
- **Guides:** How-to guides, instruction sets, tutorials
- **Specifications:** Technical specs, product requirements, system documentation
- **Policies:** Company policies, guidelines, standards
- **Procedures:** Standard operating procedures, workflows, processes
---
## Implementation Guidelines
### How to Use Templates
1. **Download Template**
- Choose the appropriate template for your document type
- Download the HTML file
2. **Open in Editor**
- Open the HTML file in your preferred text editor
- Or open in a web browser for preview
3. **Customize Content**
- Replace placeholder text with your content
- Update title and subtitle
- Modify section headings and body text
- Keep formatting intact
4. **Review and Finalize**
- Preview the document in a web browser
- Check for formatting consistency
- Verify all brand elements are correct
- Proofread content
5. **Save and Distribute**
- Save the final version
- Export to PDF if needed
- Distribute according to guidelines
### HTML to PDF Conversion
To convert HTML templates to PDF:
1. Open the HTML file in a web browser
2. Use Print function (Ctrl+P or Cmd+P)
3. Select "Save as PDF"
4. Adjust margins if needed (usually "Default" works best)
5. Save the PDF
**Recommended Settings:**
- Paper Size: Letter (8.5" x 11") or A4
- Margins: Default
- Scale: 100%
- Background Graphics: Enabled
---
## Template Features
### Responsive Design
All templates are designed to work well on various screen sizes and maintain formatting when printed or converted to PDF.
### Brand Integration
Every template incorporates:
- UNIS logo
- Brand colors
- Typography standards
- Professional layout
- Consistent spacing
### Accessibility
Templates follow accessibility best practices:
- Proper heading hierarchy
- Sufficient color contrast
- Readable font sizes
- Semantic HTML structure
- Print-friendly design
---
## Frequently Asked Questions (FAQ)
### General Questions
**Q: Can I modify the templates?**
A: Yes, you can customize the content while maintaining the overall layout and brand elements.
**Q: What format are the templates?**
A: Templates are provided in HTML format for easy editing and maximum compatibility.
**Q: Can I convert templates to PDF?**
A: Yes, simply open in a browser and use the print-to-PDF function.
**Q: Are templates print-ready?**
A: Yes, all templates are optimized for both screen viewing and printing.
### Technical Questions
**Q: What software do I need?**
A: Any text editor for editing, and a web browser for viewing/printing.
**Q: Can I use templates in Microsoft Word?**
A: You can copy the content, but we recommend using HTML for best results.
**Q: Do templates work on mobile devices?**
A: Yes, templates are responsive and work on all devices.
**Q: Can I embed images in templates?**
A: Yes, you can add images using standard HTML `` tags.
### Branding Questions
**Q: Can I change the logo?**
A: The logo should remain consistent, but placement can be adjusted if needed.
**Q: Can I use different colors?**
A: Only approved UNIS brand colors should be used.
**Q: Can I change the font?**
A: The TeX Gyre Heros font family should be maintained for brand consistency.
---
## Support & Resources
### Getting Help
For assistance with document templates:
- Contact the UNIS design team
- Refer to the complete brand guidelines
- Review template documentation
- Check the FAQ section
### Additional Resources
- **Brand Guidelines:** Complete UNIS brand standards
- **Typography Guide:** Font usage and hierarchy
- **Color Palette:** Official brand colors
- **Logo Guidelines:** Logo usage and placement
---
## Template Maintenance
### Updates and Revisions
Templates are regularly reviewed and updated to:
- Ensure brand consistency
- Improve usability
- Add new formats
- Fix any issues
- Incorporate feedback
### Version Control
Always use the latest version of templates available from:
- Official UNIS design portal
- UNIS CDN downloads
- Design system documentation
---
## Quality Standards
All UNIS document templates meet these quality standards:
✅ Brand consistency
✅ Professional appearance
✅ Print optimization
✅ Cross-browser compatibility
✅ Responsive design
✅ Accessibility compliance
✅ Easy customization
✅ Clear documentation
---
## Template Specifications Summary
### Document Template 1
- **Type:** Professional business documents
- **Font:** TeX Gyre Heros
- **Max Width:** 800px
- **Padding:** 40px
- **Line Height:** 1.6
- **Formats:** 10 variations
### Envelope Template
- **Type:** Professional correspondence
- **Layout:** Centered branding
- **Format:** HTML
- **Purpose:** Business mailings
### Certificate Template
- **Type:** Recognition and awards
- **Style:** Elegant and formal
- **Layout:** Professional certificate design
- **Purpose:** Official recognition documents
---
## Best Practices Checklist
Before finalizing any document using UNIS templates:
- [ ] Correct template selected for document type
- [ ] UNIS logo present and properly placed
- [ ] Brand colors used consistently
- [ ] Typography hierarchy maintained
- [ ] Content proofread and accurate
- [ ] Formatting preserved
- [ ] Headers and footers complete
- [ ] Copyright information included
- [ ] Document preview checked
- [ ] PDF export tested (if applicable)
---
*Last Updated: October 2025*
*Part of the UNIS Design System*
---
# API Documentation
Source URL: https://design.unisco.com/docs/api
# UNIS Design System API
## Overview
**Title:** UNIS API Documentation
**URL:** [https://design.unisco.com/docs/api](https://design.unisco.com/docs/api)
**Machine Description:** [https://design.unisco.com/openapi.json](https://design.unisco.com/openapi.json)
---
## Authentication Model
The site currently uses an email OTP flow and session-token sign-in for protected pages.
- Start sign-in with `POST /api/send-otp`
- Complete sign-in with `POST /api/verify`
- Request access approval with `POST /api/request-access`
The site does **not** currently expose a full OAuth 2.0 or OpenID Connect authorization server.
---
## Discovery Endpoints
- API catalog: `/.well-known/api-catalog`
- OpenAPI document: `/openapi.json`
- Health check: `/api/health`
- Agent skills index: `/.well-known/agent-skills/index.json`
- MCP server card: `/.well-known/mcp/server-card.json`
---
## Main Endpoints
### Operations
- `GET /api/health`
Returns service status metadata.
- `POST /api/chat`
Runs the site assistant over the guideline corpus.
- `POST /api/image`
Generates images from prompts for the assistant experience.
- `POST /api/request-access`
Creates an access request for protected sections.
- `POST /api/send-otp`
Starts email OTP authentication.
- `POST /api/verify`
Verifies the OTP and returns a session token.
- `POST /api/business-card-request`
Submits a business card request.
- `POST /api/business-cards`
Sends business-card workflow notifications.
- `POST /api/careers`
Submits a careers application.
---
## Notes
- Most endpoints accept and return JSON.
- Protected content pages are session-based rather than OAuth-based.
- Use the OpenAPI document for machine parsing of request and response shapes.