# Item Brand Guidelines Full Corpus
This file aggregates the public machine-readable guidance published by Item.
## Introduction
Source: https://design.item.com/guidelines/introduction
# Item Brand Guidelines Introduction
The Item Design portal publishes brand guidance, reusable UI references, and workflow entry points for internal brand operations.
## Key destinations
- Home: https://design.item.com/
- Logo guidelines: https://design.item.com/guidelines/logo
- Color guidelines: https://design.item.com/guidelines/colors
- Typography guidelines: https://design.item.com/guidelines/typography
- AI assistant: https://design.item.com/guidelines/ai-assistant
- API docs: https://design.item.com/docs/api
## Logo Guidelines
Source: https://design.item.com/guidelines/logo
# Item Brand Logo Guidelines
## Overview
Our logo is the core symbol of Item's brand identity, representing our values and vision. This guide ensures proper usage, spacing, and variations to maintain consistency and recognition across all applications.
The Item logo serves as the visual foundation for our brand identity across all touchpoints, from digital applications to print materials. It embodies our commitment to innovation, reliability, and excellence in the logistics industry.
## Logo Package
Download our comprehensive logo package containing high-resolution versions of our logo in multiple formats (PNG, SVG, EPS). This package includes all variations and formats needed for professional use across different media and applications.
**Package Contents:**
- All logo variations (horizontal, vertical, logo mark)
- Multiple color schemes (full color, black, white)
- Various formats (SVG, PNG, EPS)
- Clear space guidelines
- Usage examples and best practices
## Logo Variations
### Main Logo (Horizontal)
Our colorful horizontal logo represents a vibrant and dynamic spirit. With a palette of lively hues, it symbolizes our commitment to bringing excitement and efficiency to the logistics industry. This eye-catching logo reflects our innovative approach, dedication to customer satisfaction, and our mission to deliver packages with speed and joy.
The horizontal layout is ideal for headers, navigation bars, and applications where horizontal space is abundant. It provides excellent readability and brand recognition across digital and print media.
For more information on correct usage, see [Usage and Misuse](#logo-misuse---what-not-to-do) section below.
**Available Versions:**
**Full Color (White Text)**
- **File Path**: `/svg/item-logo-fullcolor-whitetxt.svg`
- **Background**: Dark backgrounds
- **Use Case**: Primary logo for dark themes, hero sections with dark backgrounds
- **Format**: SVG (scalable vector)
- **Color Mode**: Full color logo with white text
- **Best For**: Websites with dark mode, dark marketing materials, presentations
**Full Color (Black Text)**
- **File Path**: `/svg/item-logo-fullcolor-blacktxt.svg`
- **Background**: Light backgrounds
- **Use Case**: Primary logo for light themes, standard documents
- **Format**: SVG (scalable vector)
- **Color Mode**: Full color logo with black text
- **Best For**: Websites with light mode, white backgrounds, print materials
**Black**
- **File Path**: `/svg/item-logo-black.svg`
- **Background**: Light backgrounds
- **Use Case**: Monochromatic applications, single-color printing
- **Format**: SVG (scalable vector)
- **Color Mode**: Solid black
- **Best For**: Black and white printing, fax documents, simple applications
**White**
- **File Path**: `/svg/item-white-logo.svg`
- **Background**: Dark backgrounds
- **Use Case**: Monochromatic applications on dark surfaces
- **Format**: SVG (scalable vector)
- **Color Mode**: Solid white
- **Best For**: Dark backgrounds, video overlays, photography
**Download Options:**
- **Individual Download**: Available through `NEXT_PUBLIC_LOGO_HORIZONTAL_DOWNLOAD_URL`
- **Package Includes**: All 4 horizontal logo variants in multiple formats
- **Formats Available**: SVG, PNG (various sizes), EPS
- **Button Text**: "Download Logo"
**Interactive Features:**
- Click any logo variant to copy SVG code to clipboard
- Toggle between light and dark mode preview
- View logo in context with background options
- Download individual variants or complete package
**Usage Examples:**
- Website headers and navigation
- Email signatures
- Business cards
- Marketing materials
- Social media profiles
- Presentation slides
- Letterheads
- Digital advertisements
**Technical Specifications:**
- **Aspect Ratio**: Horizontal orientation
- **Minimum Width**: 120px for digital, 1 inch for print
- **Maximum Width**: No limit, scales infinitely (vector)
- **File Size**: ~5-15KB (SVG), varies for PNG
- **Color Space**: RGB for digital, CMYK for print
### Logo Mark
The logo mark is a visual symbol that encapsulates the essence of the brand, designed to be instantly recognizable and memorable. It conveys the company's identity without the need for words, acting as the cornerstone of brand recognition across all touch points.
Perfect for favicons, app icons, social media avatars, and compact spaces where the full logo might not fit appropriately.
**Standard Logo Mark Versions:**
- **Full Color** - `/svg/logo-mark-fullcolor.svg` - Primary brand mark
- **Black** - `/svg/logo-mark-black.svg` - For light backgrounds
- **White** - `/svg/logo-mark-white.svg` - For dark backgrounds
**Circle Logo Mark Versions:**
- **Circle Full Color** - `/svg/logo-mark-circle-fullcolor.svg` - Circular format with full color
- **Circle Black** - `/svg/logo-mark-circle-black.svg` - Circular format in black
- **Circle White** - `/svg/logo-mark-circle-white.svg` - Circular format in white
**Square Logo Mark Versions:**
- **Square Full Color** - `/svg/logo-mark-roundedsquare-fullcolor.svg` - Rounded square format
- **Square Black** - `/svg/logo-mark-roundedsquare-black.svg` - Rounded square in black
- **Square White** - `/svg/logo-mark-roundedsquare-white.svg` - Rounded square in white
**Usage Examples:**
- Favicons and browser tabs
- Mobile app icons
- Social media profile pictures
- Watermarks
- Compact spaces in documents
### Vertical Logo
The vertical logo arrangement provides a strong, balanced composition ideal for applications where vertical space is abundant. This version maintains our brand's visual integrity while offering versatility for various design needs.
Ideal for mobile applications, vertical banners, and layouts where horizontal space is limited but vertical space is available.
**Available Versions:**
- **Full Color (White Text)** - `/svg/logo-vertical-fullcolor-whitetxt.svg` - For dark backgrounds
- **Full Color (Black Text)** - `/svg/logo-vertical-fullcolor-blacktxt.svg` - For light backgrounds
- **Black** - `/svg/logo-vertical-black.svg` - Monochromatic version for light backgrounds
- **White** - `/svg/logo-vertical-white.svg` - Monochromatic version for dark backgrounds
**Usage Examples:**
- Mobile app headers
- Vertical banners and signage
- Sidebar branding
- Mobile-responsive layouts
- Print materials with vertical orientation
## Usage Guidelines
### General Information
The Item logo should be used consistently across all brand applications. Each version is carefully designed for specific use cases - the full-color version for primary applications, black and white versions for monochromatic contexts, and various formats for different space requirements. Always maintain proper spacing and visibility to ensure brand recognition.
### Clear Space Requirements
#### Logo Mark Clear Space
The clear space around the Item logo mark ensures its visibility and impact. Maintain a minimum clear space equivalent to the height of the logo mark on all sides. This ensures the logo remains uncluttered and legible, preserving brand integrity across all applications. Avoid placing any text, images, or graphic elements within this space.
#### Horizontal Logo Clear Space
The clear space around the Item horizontal logo ensures its visibility and impact. Maintain a minimum clear space equivalent to the height of the logo mark element on all sides. This ensures the logo remains uncluttered and legible, preserving brand integrity across all applications. Avoid placing any text, images, or graphic elements within this space.
### Partner Logos
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.
### Powered By Item Logo
The 'Powered by Item' logo is designed for use by partners and integrators to indicate Item-enabled functionality. It should be displayed clearly and prominently, maintaining the specified clear space and minimum size requirements. This version helps establish a clear connection between partner services and Item's technology.
## Logo Misuse - What NOT to Do
**Important:** 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.
### Common Misuses to Avoid:
1. **Don't add gradients** - Keep the logo in its original color scheme
2. **Don't use the black version logo without the cutout I** - Maintain the proper logo mark structure
3. **Don't rotate** - Keep the logo in its original orientation
4. **Don't add stroke** - Avoid adding outlines or borders to the logo
5. **Don't change the colors** - Use only the approved color variations
6. **Don't stroke logomark** - Keep the logo mark clean without additional outlines
7. **Don't add drop shadows** - Maintain the flat design aesthetic
8. **Don't resize any elements** - Keep all proportions intact
## Best Practices
- Use the logo in its original form, ensuring clear visibility and proper spacing
- Maintain the correct proportions and colors for consistency across all platforms
- Choose the appropriate version based on your background (light/dark)
- Always maintain the required clear space around the logo
- Ensure the logo is legible and recognizable at all sizes
- Use high-resolution versions for print applications
- Use web-optimized versions for digital applications
## Implementation Examples
### Login Page Implementation
The Item logo is prominently featured in our authentication system, demonstrating proper usage in a real application context.
**File Structure:**
```
app/login/
├── layout.tsx # Login page layout with metadata
└── page.tsx # Main login page component
```
**Key Implementation Details:**
- **Logo Usage**: The white logo variant (`/svg/item-white-logo.svg`) is used on the login page
- **Responsive Design**: Logo scales appropriately across different screen sizes
- **Accessibility**: Proper alt text and semantic HTML structure
- **Brand Consistency**: Maintains clear space requirements and proper positioning
**Login Page Features:**
- Clean, centered logo presentation
- Consistent with brand guidelines
- Proper contrast for readability
- Mobile-responsive implementation
### Authentication Flow Integration
The login system demonstrates how the logo integrates with our authentication workflow:
- Email-based authentication with OTP verification
- Secure storage implementation with data masking
- Responsive design with video background
- Error handling and user feedback
## File Formats
- **SVG**: Vector format for scalable applications - preferred for web use
- **PNG**: Raster format with transparency support - ideal for print and static images
- **EPS**: Print-ready vector format - professional printing applications
## Download Links
**Environment Variables Used:**
- `NEXT_PUBLIC_LOGO_DOWNLOAD_URL` - Complete logo package
- `NEXT_PUBLIC_LOGO_HORIZONTAL_DOWNLOAD_URL` - Horizontal logo package
- `NEXT_PUBLIC_LOGO_MARK_DOWNLOAD_URL` - Logo mark package
- `NEXT_PUBLIC_LOGO_MARK_CIRCLE_DOWNLOAD_URL` - Circle logo mark package
- `NEXT_PUBLIC_LOGO_MARK_SQUARE_DOWNLOAD_URL` - Square logo mark package
- `NEXT_PUBLIC_LOGO_VERTICAL_DOWNLOAD_URL` - Vertical logo package
**Direct SVG File Paths:**
- Horizontal Logo: `/svg/item-logo-fullcolor-whitetxt.svg`, `/svg/item-logo-fullcolor-blacktxt.svg`
- Logo Mark: `/svg/logo-mark-fullcolor.svg`, `/svg/logo-mark-black.svg`, `/svg/logo-mark-white.svg`
- Vertical Logo: `/svg/logo-vertical-fullcolor-whitetxt.svg`, `/svg/logo-vertical-fullcolor-blacktxt.svg`
## Technical Implementation Notes
### CDN Integration
The logo system uses a CDN URL structure for optimized delivery:
```typescript
const cdnUrl = (path: string) => `${process.env.NEXT_PUBLIC_CDN_URL}${path}`;
```
### Copy Functionality
SVG files can be copied directly for development use:
```typescript
const handleSvgCopy = async (path: string) => {
const response = await fetch(path);
const svgContent = await response.text();
await navigator.clipboard.writeText(svgContent);
};
```
---
*For questions about logo usage, technical implementation, or to request additional formats, please contact the brand team or development team.*
## Color Guidelines
Source: https://design.item.com/guidelines/colors
# Item Brand Color Guidelines
## Overview
Our color palette defines the visual tone of Item, creating a strong and cohesive brand presence. This comprehensive guide outlines primary colors, secondary colors, and grayscale options, along with usage rules and accessibility considerations to ensure clarity and impact in all designs.
The Item color system embodies our commitment to clarity, elegance, innovation, and dynamic energy. Each color has been carefully selected to work harmoniously together, creating a visual language that's both timeless and boldly forward-thinking.
## Color Palette Package
Download our comprehensive color palette library in ASE (Adobe Swatch Exchange) format, compatible with Adobe Creative Suite applications including Photoshop, Illustrator, and InDesign. This package contains all primary, secondary, and grayscale colors with accurate color values.
**Package Contents:**
- All primary colors (White, Black, Purple, Orange)
- Complete secondary/accent color palette
- Full grayscale spectrum
- Color codes in HEX, RGB, CMYK, PMS, and HSB formats
- Usage guidelines and accessibility notes
- Ready-to-use swatches for design applications
## Primary Colors
### Overview
Item is defined by its primary colors that capture our essence: the classic purity of White, the deep sophistication of Black, the creative energy of Purple, and the vibrant warmth of Orange. These foundational colors represent our commitment to clarity, elegance, innovation, and dynamic energy, setting the stage for a brand that's both timeless and boldly forward-thinking.
### Primary Color - 01: White
**Color Name:** White
**HEX:** `#FFFFFF`
**RGB:** `255, 255, 255`
**CMYK:** `0, 0, 0, 0`
**PMS:** `White`
**HSB:** `0, 0, 100`
White represents purity, clarity, and simplicity. It serves as a foundation for our brand, providing clean backgrounds and breathing room in designs. Use white to create contrast, improve readability, and convey professionalism.
**Usage Examples:**
- Primary background color for web and print
- Text color on dark backgrounds
- Negative space in design compositions
- Clean, minimalist applications
### Primary Color - 02: Black
**Color Name:** Black
**HEX:** `#000000`
**RGB:** `0, 0, 0`
**CMYK:** `0, 0, 0, 100`
**PMS:** `Black`
**HSB:** `0, 0, 0`
Black embodies sophistication, authority, and timelessness. It provides strong contrast and commands attention. Use black for text, borders, and elements that require emphasis and readability.
**Usage Examples:**
- Primary text color on light backgrounds
- Typography in print materials
- High-contrast design elements
- Professional business applications
### Primary Color - 03: Purple
**Color Name:** Purple
**HEX:** `#6B46C1`
**RGB:** `107, 70, 193`
**CMYK:** `45, 64, 0, 24`
**PMS:** `2665 C`
**HSB:** `258, 64, 76`
Purple represents creativity, innovation, and premium quality. This is one of our signature brand colors, symbolizing our forward-thinking approach and commitment to excellence in the logistics industry.
**Usage Examples:**
- Primary brand elements and CTAs
- Logo components and accents
- Interactive elements and buttons
- Brand communications and marketing
### Primary Color - 04: Orange
**Color Name:** Orange
**HEX:** `#F97316`
**RGB:** `249, 115, 22`
**CMYK:** `0, 54, 91, 2`
**PMS:** `1585 C`
**HSB:** `24, 91, 98`
Orange conveys energy, enthusiasm, and warmth. This vibrant color captures our dynamic spirit and passion for delivering exceptional service. It's perfect for calls-to-action and elements that need to stand out.
**Usage Examples:**
- Call-to-action buttons
- Important alerts and notifications
- Brand accents and highlights
- Energetic marketing materials
## Secondary Colors
### Overview
At Item, our secondary colors are more than just shades—they're a statement. With the soft elegance of Lavender and Lilac, the vibrant energy of Orchid and Iris, the deep richness of Violet and Indigo, and the warm earthiness of Plum and Grape, our brand stands out. They reflect our innovative spirit and commitment to quality in everything we do.
### Secondary Color - 01: Lavender
**Color Name:** Lavender
**HEX:** `#E6E6FA`
**RGB:** `230, 230, 250`
**CMYK:** `8, 8, 0, 2`
**PMS:** `2635 C`
**HSB:** `240, 8, 98`
A soft, calming shade perfect for backgrounds and subtle accents. Lavender brings elegance and sophistication to designs without overwhelming other elements.
### Secondary Color - 02: Lilac
**Color Name:** Lilac
**HEX:** `#C8A2C8`
**RGB:** `200, 162, 200`
**CMYK:** `0, 19, 0, 22`
**PMS:** `2573 C`
**HSB:** `300, 19, 78`
A gentle purple shade that adds warmth and approachability. Lilac works well for secondary UI elements and supportive design components.
### Secondary Color - 03: Orchid
**Color Name:** Orchid
**HEX:** `#DA70D6`
**RGB:** `218, 112, 214`
**CMYK:** `0, 49, 2, 15`
**PMS:** `2572 C`
**HSB:** `302, 49, 85`
A vibrant, eye-catching shade that draws attention. Orchid is ideal for highlighting important information and creating visual interest.
### Secondary Color - 04: Iris
**Color Name:** Iris
**HEX:** `#5D3FD3`
**RGB:** `93, 63, 211`
**CMYK:** `56, 70, 0, 17`
**PMS:** `2726 C`
**HSB:** `251, 70, 83`
A rich, deep purple that conveys confidence and creativity. Iris works well for headers, important sections, and brand-focused elements.
### Secondary Color - 05: Violet
**Color Name:** Violet
**HEX:** `#8A2BE2`
**RGB:** `138, 43, 226`
**CMYK:** `39, 81, 0, 11`
**PMS:** `2592 C`
**HSB:** `271, 81, 89`
An intense, powerful purple that makes a bold statement. Violet is perfect for special features and premium offerings.
### Secondary Color - 06: Indigo
**Color Name:** Indigo
**HEX:** `#4B0082`
**RGB:** `75, 0, 130`
**CMYK:** `42, 100, 0, 49`
**PMS:** `2685 C`
**HSB:** `275, 100, 51`
A deep, mysterious shade that adds depth and sophistication. Indigo works well for dark mode applications and elegant designs.
### Secondary Color - 07: Plum
**Color Name:** Plum
**HEX:** `#8B4513`
**RGB:** `139, 69, 19`
**CMYK:** `0, 50, 86, 45`
**PMS:** `4625 C`
**HSB:** `25, 86, 55`
A warm, earthy tone that provides grounding and stability. Plum adds richness and depth to color combinations.
### Secondary Color - 08: Grape
**Color Name:** Grape
**HEX:** `#6F2DA8`
**RGB:** `111, 45, 168`
**CMYK:** `34, 73, 0, 34`
**PMS:** `2602 C`
**HSB:** `272, 73, 66`
A luxurious, regal shade that conveys premium quality. Grape is ideal for special features and high-end applications.
## Grayscale Colors
### Overview
These colors form a spectrum that reflects the understated elegance of our brand. From the lightest 'Mist' to the deepest 'Shadow', our greys are curated to convey a range of sophisticated and contemporary tones, mirroring the balance and adaptability that 'Item' stands for.
### Grayscale Color - 01: Silver
**Color Name:** Silver
**HEX:** `#FFFFFF`
**RGB:** `255, 255, 255`
**CMYK:** `0, 0, 0, 0`
**PMS:** `White`
**HSB:** `0, 0, 100`
Pure white for backgrounds and clean spaces.
### Grayscale Color - 02: Mist
**Color Name:** Mist
**HEX:** `#F2F2F2`
**RGB:** `242, 242, 242`
**CMYK:** `0, 0, 0, 5`
**PMS:** `663 C`
**HSB:** `0, 0, 95`
A very light grey perfect for subtle backgrounds and borders.
### Grayscale Color - 03: Dove
**Color Name:** Dove
**HEX:** `#E6E6E6`
**RGB:** `230, 230, 230`
**CMYK:** `0, 0, 0, 10`
**PMS:** `Cool Gray 1 C`
**HSB:** `0, 0, 90`
A soft grey ideal for section dividers and card backgrounds.
### Grayscale Color - 04: Steel
**Color Name:** Steel
**HEX:** `#CCCCCC`
**RGB:** `204, 204, 204`
**CMYK:** `0, 0, 0, 20`
**PMS:** `Cool Gray 2 C`
**HSB:** `0, 0, 80`
A medium-light grey for borders and disabled states.
### Grayscale Color - 05: Glacier
**Color Name:** Glacier
**HEX:** `#999999`
**RGB:** `153, 153, 153`
**CMYK:** `0, 0, 0, 40`
**PMS:** `Cool Gray 5 C`
**HSB:** `0, 0, 60`
A true mid-tone grey for secondary text and icons.
### Grayscale Color - 06: Slate
**Color Name:** Slate
**HEX:** `#808080`
**RGB:** `128, 128, 128`
**CMYK:** `0, 0, 0, 50`
**PMS:** `Cool Gray 7 C`
**HSB:** `0, 0, 50`
A medium-dark grey for supporting text and elements.
### Grayscale Color - 07: Iron
**Color Name:** Iron
**HEX:** `#666666`
**RGB:** `102, 102, 102`
**CMYK:** `0, 0, 0, 60`
**PMS:** `Cool Gray 9 C`
**HSB:** `0, 0, 40`
A dark grey for important secondary text.
### Grayscale Color - 08: Shadow
**Color Name:** Shadow
**HEX:** `#4D4D4D`
**RGB:** `77, 77, 77`
**CMYK:** `0, 0, 0, 70`
**PMS:** `Cool Gray 10 C`
**HSB:** `0, 0, 30`
A very dark grey for strong contrast and depth.
## Usage Guidelines
### Primary Color Usage
- **Purple (#6B46C1)** and **Orange (#F97316)** are the hero colors of our brand
- Use Purple for primary brand elements, navigation, and key interactive components
- Use Orange sparingly for calls-to-action, important alerts, and elements requiring immediate attention
- Black and White serve as neutral foundations supporting the primary colors
### Secondary Color Usage
- Secondary colors should complement, not compete with, primary colors
- Use lighter shades (Lavender, Lilac, Orchid) for backgrounds and large areas
- Use darker shades (Iris, Violet, Indigo, Plum, Grape) for accents and emphasis
- Maintain hierarchy by using secondary colors for supporting elements only
### Grayscale Usage
- Use grayscale colors for text, borders, backgrounds, and UI elements
- Lighter greys (Mist, Dove, Steel) work well for backgrounds and subtle divisions
- Medium greys (Glacier, Slate) are ideal for secondary text and inactive states
- Darker greys (Iron, Shadow) provide strong contrast for important text
### Color Combinations
**Recommended Pairings:**
- Purple (#6B46C1) with White (#FFFFFF)
- Orange (#F97316) with Black (#000000)
- Lavender (#E6E6FA) with Purple (#6B46C1)
- Orchid (#DA70D6) with White (#FFFFFF)
- Grayscale colors with any primary or secondary color
**Avoid:**
- Orange on purple backgrounds (poor contrast)
- Multiple secondary colors competing in the same design
- Dark secondary colors on black backgrounds
## Accessibility Considerations
### Contrast Ratios
Ensure all text and interactive elements meet WCAG 2.1 AA standards:
- **Normal text:** Minimum contrast ratio of 4.5:1
- **Large text (18pt+ or 14pt+ bold):** Minimum contrast ratio of 3:1
- **UI components and graphics:** Minimum contrast ratio of 3:1
### Accessible Color Pairings
**High Contrast Pairs (AAA compliant):**
- Black (#000000) on White (#FFFFFF)
- White (#FFFFFF) on Purple (#6B46C1)
- White (#FFFFFF) on Iris (#5D3FD3)
- White (#FFFFFF) on Violet (#8A2BE2)
- White (#FFFFFF) on Indigo (#4B0082)
- Black (#000000) on Orange (#F97316)
**Medium Contrast Pairs (AA compliant):**
- Black (#000000) on Lavender (#E6E6FA)
- Black (#000000) on Lilac (#C8A2C8)
- Shadow (#4D4D4D) on White (#FFFFFF)
- Iron (#666666) on White (#FFFFFF)
### Color Blindness Considerations
- Never rely on color alone to convey information
- Use icons, labels, or patterns in addition to color
- Test designs with color blindness simulators
- Purple and Orange combination works well for most types of color blindness
## Best Practices
### Do's
✓ Use primary colors consistently across all brand touchpoints
✓ Maintain sufficient contrast ratios for accessibility
✓ Use the provided color codes exactly as specified
✓ Test color combinations in different contexts (light/dark mode)
✓ Consider color psychology and emotional impact
✓ Use grayscale colors for neutral elements
✓ Apply secondary colors to enhance, not overpower
✓ Ensure colors work across different media (print, digital, video)
### Don'ts
✗ Don't alter color values or create custom variations
✗ Don't use too many colors in a single design
✗ Don't ignore accessibility standards
✗ Don't use colors that clash or compete
✗ Don't apply gradients unless specifically approved
✗ Don't use colors from outside the defined palette
✗ Don't sacrifice readability for aesthetic preferences
✗ Don't forget to test in different lighting conditions
## Implementation Examples
### Web Applications
The color system is implemented throughout the design.item.com website:
**File Structure:**
```
app/guidelines/colors/
├── data.ts # Color data with HEX, RGB, CMYK, PMS, HSB values
└── page.tsx # Colors page component
```
**Key Implementation Details:**
- **Color Display**: All colors rendered with accurate values
- **Copy Functionality**: Users can easily copy color codes
- **Responsive Design**: Colors display appropriately across devices
- **Accessibility**: Proper contrast maintained throughout
- **Dark/Light Mode**: Colors adapt to theme preferences
### CSS Variables
Colors can be implemented using CSS custom properties:
```css
:root {
/* Primary Colors */
--color-white: #FFFFFF;
--color-black: #000000;
--color-purple: #6B46C1;
--color-orange: #F97316;
/* Secondary Colors */
--color-lavender: #E6E6FA;
--color-lilac: #C8A2C8;
--color-orchid: #DA70D6;
--color-iris: #5D3FD3;
--color-violet: #8A2BE2;
--color-indigo: #4B0082;
--color-plum: #8B4513;
--color-grape: #6F2DA8;
/* Grayscale Colors */
--color-silver: #FFFFFF;
--color-mist: #F2F2F2;
--color-dove: #E6E6E6;
--color-steel: #CCCCCC;
--color-glacier: #999999;
--color-slate: #808080;
--color-iron: #666666;
--color-shadow: #4D4D4D;
}
```
### Design Tokens
Colors are available as design tokens for various platforms:
**TypeScript/JavaScript:**
```typescript
export const PrimaryColors = [
{ name: "White", hex: "#FFFFFF", rgb: "255, 255, 255" },
{ name: "Black", hex: "#000000", rgb: "0, 0, 0" },
{ name: "Purple", hex: "#6B46C1", rgb: "107, 70, 193" },
{ name: "Orange", hex: "#F97316", rgb: "249, 115, 22" },
];
```
## File Formats
### Digital Formats
- **HEX**: Web and digital applications
- **RGB**: Screen-based designs and digital artwork
- **HSB**: Design tools color pickers
### Print Formats
- **CMYK**: Professional printing and offset printing
- **PMS (Pantone)**: Spot color printing and brand consistency
- **ASE**: Adobe Creative Suite swatch libraries
## Download Links
**Environment Variables Used:**
- `NEXT_PUBLIC_COLORS_DOWNLOAD_URL` - Complete color palette package (ASE format)
- `NEXT_PUBLIC_CDN_URL` - CDN base URL for assets
**Video Asset:**
- Color palette overview video: `/design-item-com/video/item-color.mp4`
**Page Assets:**
- Color palette icon: `/svg/color-palette.svg`
## Technical Implementation Notes
### CDN Integration
The color system uses a CDN URL structure for optimized asset delivery:
```typescript
const cdnUrl = (path: string) => `${process.env.NEXT_PUBLIC_CDN_URL}${path}`;
```
### Component Structure
Colors are displayed using reusable components:
```typescript
```
### Color Data Structure
Each color includes comprehensive information:
```typescript
interface ColorItem {
category: string; // e.g., "Primary Color - 01"
name: string; // Color name
hex: string; // HEX value
rgb: string; // RGB values
cmyk: string; // CMYK values
pms: string; // Pantone reference
hsb: string; // HSB values
isDark: boolean; // For text color determination
}
```
### Navigation
The colors page integrates with the guidelines navigation system:
- **Previous**: Brand Logo (`/guidelines/logo`)
- **Next**: Typography (`/guidelines/typography`)
---
*For questions about color usage, accessibility requirements, or technical implementation, please contact the brand team or development team.*
## Typography Guidelines
Source: https://design.item.com/guidelines/typography
# Item Typography Guidelines
## Overview
Typography is a key element of Item's brand identity, ensuring clarity, consistency, and a distinct visual voice across all touchpoints. This guide defines our typefaces, hierarchy, spacing, and best practices to create a cohesive and impactful brand experience.
Typography serves as the foundation of our visual communication, establishing tone, hierarchy, and readability across all brand materials. Through careful selection and consistent application of our typeface system, we create a unified brand experience that is both professional and approachable.
## Typography Library
Download our complete typography library containing Satoshi font family in multiple formats.
**Available Formats:**
- OTF (OpenType Font) - Preferred for design applications
- TTF (TrueType Font) - Universal compatibility
**Download Link:**
Access the typography library through the environment variable: `NEXT_PUBLIC_TYPOGRAPHY_DOWNLOAD_URL`
**What's Included:**
- Satoshi Variable font files
- Multiple font weights (Light to Black)
- Both regular and italic variants
- Web font formats
- Desktop font formats
- Font licensing information
## Primary Typeface: Satoshi
Satoshi is our primary typeface, chosen for its modern, clean aesthetic and exceptional readability. This versatile sans-serif font family provides a perfect balance of professionalism and approachability, making it ideal for both digital interfaces and branded content. With its geometric structure and balanced proportions, Satoshi ensures consistent brand communication across all platforms.
### About Satoshi
**Designer:** Indian Type Foundry
**Classification:** Geometric Sans-Serif
**Characteristics:**
- Modern, clean aesthetic
- Exceptional readability
- Geometric structure
- Balanced proportions
- Versatile application
### Font Weights
Satoshi offers a comprehensive range of weights to establish clear visual hierarchy:
**Satoshi Light (300)**
- **Usage**: Subtle text, decorative elements, large display text
- **Best for**: Hero sections, decorative quotes, light emphasis
- **Avoid**: Body text, small sizes, critical information
**Satoshi Regular (400)**
- **Usage**: Body text, paragraphs, standard content
- **Best for**: Main content, descriptions, general text
- **Recommended**: Default weight for most text
**Satoshi Medium (500)**
- **Usage**: Subheadings, emphasis, navigation items
- **Best for**: Section titles, button text, menu items
- **Ideal**: Balancing hierarchy without being too bold
**Satoshi Bold (700)**
- **Usage**: Headings, important information, calls-to-action
- **Best for**: Page titles, card headers, emphasis
- **Impact**: Strong visual weight for key elements
**Satoshi Black (900)**
- **Usage**: Display text, hero headings, maximum impact
- **Best for**: Large headlines, marketing materials, hero sections
- **Caution**: Use sparingly for maximum effect
## Typography Scale
Our typography system is built on a carefully crafted scale that ensures consistency and hierarchy across all our digital products. Each size is purposefully selected to create clear visual hierarchy while maintaining optimal readability. From large display text to small interface elements, our sizing system adapts seamlessly across different screen sizes and contexts.
### Heading Styles
**Heading 1 (9x Large - 128px)**
- **Font Size**: 128px (8rem)
- **Font Weight**: 800 (Extra Bold)
- **Line Height**: 1.1
- **Letter Spacing**: -0.02em
- **Usage**: Hero sections, landing page titles
- **Responsive**: Scales down to 32px on mobile
- **Example**: Main page headlines, marketing hero text
**Heading 2 (8x Large - 96px)**
- **Font Size**: 96px (6rem)
- **Font Weight**: 700 (Bold)
- **Line Height**: 1.15
- **Letter Spacing**: -0.015em
- **Usage**: Section headers, major divisions
- **Responsive**: Scales down to 28px on mobile
- **Example**: Section titles, feature headings
**Heading 3 (7x Large - 64px)**
- **Font Size**: 64px (4rem)
- **Font Weight**: 600 (Semi-Bold)
- **Line Height**: 1.2
- **Letter Spacing**: -0.01em
- **Usage**: Subsection headers, card titles
- **Responsive**: Scales down to 24px on mobile
- **Example**: Article titles, component headers
**Heading 4 (6x Large - 48px)**
- **Font Size**: 48px (3rem)
- **Font Weight**: 500 (Medium)
- **Line Height**: 1.25
- **Letter Spacing**: -0.005em
- **Usage**: Content headers, dialog titles
- **Responsive**: Scales down to 20px on mobile
- **Example**: Modal headers, sidebar titles
**Heading 5 (5x Large - 36px)**
- **Font Size**: 36px (2.25rem)
- **Font Weight**: 400 (Regular)
- **Line Height**: 1.3
- **Letter Spacing**: 0
- **Usage**: Small headers, list titles
- **Responsive**: Scales down to 18px on mobile
- **Example**: List headers, group titles
**Heading 6 (4x Large - 28px)**
- **Font Size**: 28px (1.75rem)
- **Font Weight**: 300 (Light)
- **Line Height**: 1.35
- **Letter Spacing**: 0
- **Usage**: Subtle headers, category labels
- **Responsive**: Scales down to 16px on mobile
- **Example**: Category names, subtle divisions
### Subtitle Styles
**Subtitle 1 (3x Large - 24px)**
- **Font Size**: 24px (1.5rem)
- **Font Weight**: 200 (Extra Light)
- **Line Height**: 1.4
- **Letter Spacing**: 0
- **Usage**: Supporting text for headers, taglines
- **Responsive**: Scales down to 14px on mobile
- **Example**: Hero subtitles, section descriptions
**Subtitle 2 (2x Large - 20px)**
- **Font Size**: 20px (1.25rem)
- **Font Weight**: 180
- **Line Height**: 1.45
- **Letter Spacing**: 0
- **Usage**: Secondary supporting text
- **Responsive**: Scales down to 14px on mobile
- **Example**: Card descriptions, secondary info
### Body Styles
**Body 1 (Extra Large - 20px)**
- **Font Size**: 20px (1.25rem)
- **Font Weight**: 160
- **Line Height**: 1.6
- **Letter Spacing**: 0
- **Usage**: Large body text, featured content
- **Responsive**: Scales down to 14px on mobile
- **Example**: Article introductions, featured descriptions
**Body 2 (Large - 18px)**
- **Font Size**: 18px (1.125rem)
- **Font Weight**: 140
- **Line Height**: 1.65
- **Letter Spacing**: 0
- **Usage**: Standard body text, paragraphs
- **Responsive**: Scales down to 12px on mobile
- **Example**: Article content, descriptions
### Base & Button Styles
**Base 1 (Base - 16px)**
- **Font Size**: 16px (1rem)
- **Font Weight**: 160
- **Line Height**: 1.5
- **Letter Spacing**: 0
- **Usage**: Default text size, UI elements
- **Responsive**: Scales down to 14px on mobile
- **Example**: Form labels, navigation items
**Button 1 (Small - 14px)**
- **Font Size**: 14px (0.875rem)
- **Font Weight**: 140
- **Line Height**: 1.4
- **Letter Spacing**: 0.01em
- **Usage**: Button text, small UI elements
- **Responsive**: Scales down to 12px on mobile
- **Example**: Primary buttons, action links
**Button 2 (Extra Small - 12px)**
- **Font Size**: 12px (0.75rem)
- **Font Weight**: 120
- **Line Height**: 1.3
- **Letter Spacing**: 0.02em
- **Usage**: Small buttons, tags, labels
- **Responsive**: Scales down to 10px on mobile
- **Example**: Tags, badges, small labels
## Implementation
### Web Fonts (CSS)
```css
/* Satoshi Variable Font */
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-Variable.ttf') format('truetype');
font-weight: 300 900;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-VariableItalic.ttf') format('truetype');
font-weight: 300 900;
font-display: swap;
font-style: italic;
}
/* Apply to body */
body {
font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
### Tailwind CSS Configuration
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Satoshi', 'system-ui', 'sans-serif'],
},
fontSize: {
'9xl': ['128px', { lineHeight: '1.1', letterSpacing: '-0.02em' }],
'8xl': ['96px', { lineHeight: '1.15', letterSpacing: '-0.015em' }],
'7xl': ['64px', { lineHeight: '1.2', letterSpacing: '-0.01em' }],
'6xl': ['48px', { lineHeight: '1.25', letterSpacing: '-0.005em' }],
'5xl': ['36px', { lineHeight: '1.3' }],
'4xl': ['28px', { lineHeight: '1.35' }],
'3xl': ['24px', { lineHeight: '1.4' }],
'2xl': ['20px', { lineHeight: '1.45' }],
'xl': ['20px', { lineHeight: '1.6' }],
'lg': ['18px', { lineHeight: '1.65' }],
'base': ['16px', { lineHeight: '1.5' }],
'sm': ['14px', { lineHeight: '1.4', letterSpacing: '0.01em' }],
'xs': ['12px', { lineHeight: '1.3', letterSpacing: '0.02em' }],
},
fontWeight: {
light: '300',
normal: '400',
medium: '500',
bold: '700',
black: '900',
},
},
},
}
```
### React/Next.js Implementation
```typescript
// app/layout.tsx
import localFont from 'next/font/local'
const satoshi = localFont({
src: [
{
path: '../public/fonts/Satoshi-Variable.ttf',
weight: '300 900',
style: 'normal',
},
{
path: '../public/fonts/Satoshi-VariableItalic.ttf',
weight: '300 900',
style: 'italic',
},
],
variable: '--font-satoshi',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
```
### Vue.js Implementation
```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
// Import font CSS
import './styles/fonts.css'
const app = createApp(App)
app.mount('#app')
```
```css
/* styles/fonts.css */
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-Variable.ttf') format('truetype');
font-weight: 300 900;
font-display: swap;
font-style: normal;
}
* {
font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
```
## Typography in Use
### Hero Section Example
```html
The Next Generation.
Empowering businesses and individuals with cutting-edge technology solutions.
```
### Card Component Example
```html
Feature Title
Description text using our standard body size for optimal readability.
```
## Component Variables
### Button Variables
```css
--el-button-font-size: 14px;
--el-button-font-weight: 500;
--el-button-padding-vertical: 8px;
--el-button-padding-horizontal: 15px;
--el-button-text-color: var(--el-text-color-regular);
--el-button-bg-color: var(--el-fill-color-blank);
--el-button-border-color: var(--el-border-color);
--el-button-hover-text-color: var(--el-color-primary);
--el-button-hover-bg-color: var(--el-color-primary-light-9);
--el-button-hover-border-color: var(--el-color-primary-light-7);
```
### Input Variables
```css
--el-input-font-size: 14px;
--el-input-height: 32px;
--el-input-line-height: 32px;
--el-input-padding-horizontal: 11px;
--el-input-text-color: var(--el-text-color-regular);
--el-input-bg-color: var(--el-fill-color-blank);
--el-input-border-color: var(--el-border-color);
--el-input-placeholder-color: var(--el-text-color-placeholder);
--el-input-hover-border-color: var(--el-border-color-hover);
--el-input-focus-border-color: var(--el-color-primary);
```
### Table Variables
```css
--el-table-font-size: 14px;
--el-table-text-color: var(--el-text-color-regular);
--el-table-header-text-color: var(--el-text-color-secondary);
--el-table-header-bg-color: var(--el-bg-color);
--el-table-row-bg-color: var(--el-bg-color);
--el-table-row-hover-bg-color: var(--el-fill-color-light);
--el-table-current-row-bg-color: var(--el-color-primary-light-9);
--el-table-border-color: var(--el-border-color-lighter);
```
### Card Variables
```css
--el-card-bg-color: var(--el-bg-color);
--el-card-border-color: var(--el-border-color-light);
--el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
--el-box-shadow-light: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
```
### Menu Variables
```css
--el-menu-active-color: var(--el-color-primary);
--el-menu-text-color: var(--el-text-color-primary);
--el-menu-hover-text-color: var(--el-color-primary);
--el-menu-bg-color: var(--el-bg-color);
--el-menu-hover-bg-color: var(--el-color-primary-light-9);
--el-menu-item-height: 56px;
--el-menu-item-font-size: 14px;
```
### Border Radius
```css
--el-border-radius-base: 8px;
--el-border-radius-small: 4px;
--el-border-radius-round: 20px;
--el-border-radius-circle: 100%;
```
## Typography
The theme uses the Satoshi font family for all text:
```css
@font-face {
font-family: 'Satoshi';
src: url('/fonts/Satoshi-Variable.ttf') format('truetype');
font-weight: 300 900;
font-display: swap;
font-style: normal;
}
body {
font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
```
## File Structure
Recommended project organization:
```
your-vue-project/
├── public/
│ └── fonts/
│ ├── Satoshi-Variable.ttf
│ └── Satoshi-VariableItalic.ttf
├── src/
│ ├── styles/
│ │ └── item-theme.css
│ ├── App.vue
│ └── main.js
└── package.json
```
## Troubleshooting
### Theme not applying?
- Ensure `item-theme.css` is imported AFTER Element Plus's default CSS
- Check browser console for any CSS loading errors
- Verify the file path is correct in your import statement
- Clear browser cache and hard refresh (Ctrl+Shift+R)
### Fonts not loading?
- Check font files are in `public/fonts/` directory
- Verify file names match exactly: `Satoshi-Variable.ttf`
- Open Network tab to see if fonts are loading (200 status)
- Check `@font-face` paths in `item-theme.css` match your structure
### Dark mode not working?
- Ensure 'dark' class is on `` element, not ``
- Check JavaScript console for errors in toggle function
- Verify localStorage is not blocked by browser settings
- Test with manual class addition in DevTools first
### Input fields showing wrong colors?
- Clear browser cache completely
- Check for conflicting CSS overriding theme variables
- Ensure you have the latest version of `item-theme.css`
- Verify no inline styles are overriding theme
## What's Included
### Color Palette
- **Primary**: Purple (#753BBD / #763ABF)
- **Success**: Green (#15803D)
- **Warning**: Yellow (#e79f04)
- **Danger**: Red (#F0283C)
- **Info**: Gray (#666666)
### Components Styled
✓ All button variants
✓ Form inputs & selects
✓ Tables & cards
✓ Alerts & notifications
✓ Navigation menus
✓ Dialogs & modals
✓ Date pickers
✓ Tags & badges
✓ Progress bars
✓ Checkboxes & radios
✓ Switches
✓ Tooltips & popovers
## Best Practices
### Color Usage
- Use semantic colors (success, warning, danger) for consistent state communication
- Always test color combinations in both light and dark modes
- Maintain WCAG AA contrast ratios for accessibility
- Use primary color sparingly for emphasis
### Theme Customization
- Override CSS variables in your own stylesheet after importing the theme
- Keep customizations minimal to maintain consistency
- Test all customizations in both light and dark modes
- Document any custom color additions
### Performance
- Import only the Element Plus components you need
- Use tree-shaking to reduce bundle size
- Lazy load components when possible
- Optimize font loading with `font-display: swap`
## Quick Usage Tips
- Click any color swatch to copy its hex value
- Click the CSS variable name to copy it for use in stylesheets
- Light and dark mode values are shown side-by-side
- Use semantic colors for consistent state communication
## Download Links
- **Theme CSS**: [Download item-theme.css](/css/item-theme.css)
- **Satoshi Fonts**: [Download from Typography page](/guidelines/typography)
- **Element Plus Library**: [Visit Element Plus Color Library](https://element-plus.design.item.com)
## Related Resources
- **Element Plus Documentation**: [element-plus.org](https://element-plus.org/)
- **Vue.js Documentation**: [vuejs.org](https://vuejs.org/)
- **Item.com Typography**: [Typography Guidelines](/guidelines/typography)
- **Item.com Colors**: [Color Guidelines](/guidelines/colors)
---
*For questions about the Element Plus color system, implementation details, or troubleshooting, please contact the design system team or visit the Element Plus Color Library.*
## shadcn Colors
Source: https://design.item.com/guidelines/shadcn-colors
# Item Shadcn Colors Guidelines
## Overview
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 CSS custom properties (variables) that enable seamless theme switching, maintain consistent design patterns, and ensure WCAG accessibility standards are met across all components.
## Why Shadcn/UI Colors?
- **Consistency**: Unified color tokens across all UI components
- **Accessibility**: WCAG-compliant color contrasts for all text and interactive elements
- **Scalability**: Easy to maintain and extend as the design system grows
- **Theme Support**: Built-in light and dark mode support
- **Developer-Friendly**: CSS variables that work seamlessly with Tailwind CSS
## Color System Structure
Our color system is organized into seven main categories, each serving specific purposes in the UI:
### 1. Primary Theme Colors
The foundation of our brand identity and primary user interactions.
**Background** - `#000000` (Dark) / `#fafafa` (Light)
- RGB: 0, 0, 0 (Dark) / 250, 250, 250 (Light)
- HSL: 0, 0%, 0% (Dark) / 0, 0%, 98% (Light)
- OKLCH: 0, 0, 0 (Dark) / 0.9851, 0, 0 (Light)
- **Usage**: Main application background
**Foreground** - `#ffffff` (Dark) / `#181818` (Light)
- RGB: 255, 255, 255 (Dark) / 24, 24, 24 (Light)
- HSL: 0, 0%, 100% (Dark) / 0, 0%, 9% (Light)
- OKLCH: 1, 0, 0 (Dark) / 0.2090, 0, 0 (Light)
- **Usage**: Primary text color
**Primary** - `#763abf` (Universal)
- RGB: 118, 58, 191
- HSL: 267, 53%, 49%
- OKLCH: 0.489, 0.134, 294
- **Usage**: Primary buttons, links, and key interactive elements
**Primary Foreground** - `#ffffff` (Universal)
- RGB: 255, 255, 255
- HSL: 0, 0%, 100%
- OKLCH: 1, 0, 0
- **Usage**: Text on primary colored backgrounds
### 2. Secondary & Accent Colors
Supporting colors for secondary actions and highlighted content.
**Secondary** - `#2b2e31` (Dark) / `#dbdbdb` (Light)
- RGB: 43, 46, 49 (Dark) / 219, 219, 219 (Light)
- HSL: 210, 7%, 18% (Dark) / 0, 0%, 86% (Light)
- OKLCH: 0.195, 0.008, 230 (Dark) / 0.8914, 0, 0 (Light)
- **Usage**: Secondary buttons and less prominent actions
**Secondary Foreground** - `#ededed` (Dark) / `#18181b` (Light)
- RGB: 237, 237, 237 (Dark) / 24, 24, 27 (Light)
- HSL: 0, 0%, 93% (Dark) / 240, 6%, 10% (Light)
- OKLCH: 0.929, 0, 0 (Dark) / 0.2102, 0.0060, 285 (Light)
- **Usage**: Text on secondary colored backgrounds
**Accent** - `#202222` (Dark) / `#f2f2f2` (Light)
- RGB: 32, 34, 34 (Dark) / 242, 242, 242 (Light)
- HSL: 180, 3%, 13% (Dark) / 0, 0%, 95% (Light)
- OKLCH: 0.145, 0.003, 180 (Dark) / 0.9612, 0, 0 (Light)
- **Usage**: Highlighted sections and accent areas
**Accent Foreground** - `#ffffff` (Universal)
- RGB: 255, 255, 255
- HSL: 0, 0%, 100%
- OKLCH: 1, 0, 0
- **Usage**: Text on accent colored backgrounds
### 3. UI Component Colors
Specialized colors for cards, popovers, and muted content.
**Card** - `#0d0d0d` (Dark) / `#ffffff` (Light)
- RGB: 13, 13, 13 (Dark) / 255, 255, 255 (Light)
- HSL: 0, 0%, 5% (Dark) / 0, 0%, 100% (Light)
- OKLCH: 0.057, 0, 0 (Dark) / 1.0000, 0, 0 (Light)
- **Usage**: Card backgrounds
**Card Foreground** - `#fcfcfc` (Dark) / `#181818` (Light)
- RGB: 252, 252, 252 (Dark) / 24, 24, 24 (Light)
- HSL: 0, 0%, 99% (Dark) / 0, 0%, 9% (Light)
- OKLCH: 0.988, 0, 0 (Dark) / 0.2090, 0, 0 (Light)
- **Usage**: Text on cards
**Muted** - `#202122` (Dark) / `#e6e6e6` (Light)
- RGB: 32, 33, 34 (Dark) / 230, 230, 230 (Light)
- HSL: 210, 3%, 13% (Dark) / 0, 0%, 90% (Light)
- OKLCH: 0.143, 0.003, 230 (Dark) / 0.9249, 0, 0 (Light)
- **Usage**: Muted backgrounds
**Muted Foreground** - `#999999` (Dark) / `#666666` (Light)
- RGB: 153, 153, 153 (Dark) / 102, 102, 102 (Light)
- HSL: 0, 0%, 60% (Dark) / 0, 0%, 40% (Light)
- OKLCH: 0.648, 0, 0 (Dark) / 0.5103, 0, 0 (Light)
- **Usage**: Muted text, placeholders, and subtle content
**Popover** - `#0d0d0d` (Dark) / `#ffffff` (Light)
- RGB: 13, 13, 13 (Dark) / 255, 255, 255 (Light)
- HSL: 0, 0%, 5% (Dark) / 0, 0%, 100% (Light)
- OKLCH: 0.057, 0, 0 (Dark) / 1.0000, 0, 0 (Light)
- **Usage**: Popover and dropdown backgrounds
**Popover Foreground** - `#fcfcfc` (Dark) / `#09090b` (Light)
- RGB: 252, 252, 252 (Dark) / 9, 9, 11 (Light)
- HSL: 0, 0%, 99% (Dark) / 240, 10%, 4% (Light)
- OKLCH: 0.988, 0, 0 (Dark) / 0.1417, 0.0044, 285 (Light)
- **Usage**: Text in popovers and dropdowns
### 4. Utility & Form Colors
Essential colors for borders, inputs, and focus states.
**Border** - `#292929` (Dark) / `#e0e0e0` (Light)
- RGB: 41, 41, 41 (Dark) / 224, 224, 224 (Light)
- HSL: 0, 0%, 16% (Dark) / 0, 0%, 88% (Light)
- OKLCH: 0.174, 0, 0 (Dark) / 0.9067, 0, 0 (Light)
- **Usage**: Component borders and dividers
**Input** - `#1b1a1f` (Dark) / `#e4e4e7` (Light)
- RGB: 27, 26, 31 (Dark) / 228, 228, 231 (Light)
- HSL: 252, 9%, 11% (Dark) / 240, 6%, 90% (Light)
- OKLCH: 0.120, 0.010, 265 (Dark) / 0.9197, 0.0041, 286 (Light)
- **Usage**: Input field backgrounds
**Ring** - `#828282` (Dark) / `#763abf` (Light)
- RGB: 130, 130, 130 (Dark) / 118, 58, 191 (Light)
- HSL: 0, 0%, 51% (Dark) / 267, 53%, 49% (Light)
- OKLCH: 0.568, 0, 0 (Dark) / 0.4969, 0.1969, 299 (Light)
- **Usage**: Focus rings and outlines
### 5. Status & Feedback Colors
Colors for error states and destructive actions.
**Destructive** - `#f0283c` (Dark) / `#e01529` (Light)
- RGB: 240, 40, 60 (Dark) / 224, 21, 41 (Light)
- HSL: 354, 86%, 55% (Dark) / 354, 83%, 48% (Light)
- OKLCH: 0.579, 0.187, 22 (Dark) / 0.5767, 0.2261, 25 (Light)
- **Usage**: Error messages, delete buttons, destructive actions
**Destructive Foreground** - `#220202` (Dark) / `#fff5f7` (Light)
- RGB: 34, 2, 2 (Dark) / 255, 245, 247 (Light)
- HSL: 0, 89%, 7% (Dark) / 348, 100%, 98% (Light)
- OKLCH: 0.075, 0.051, 22 (Dark) / 0.9785, 0.0110, 3 (Light)
- **Usage**: Text on destructive colored backgrounds
### 6. Chart & Visualization Colors
Distinct colors for data visualization and charts.
**Chart 1** - `#763abf` (Universal)
- RGB: 118, 58, 191
- HSL: 267, 53%, 49%
- OKLCH: 0.489, 0.134, 294
- **Usage**: Primary chart color
**Chart 2** - `#a176d6` (Dark) / `#ff5b26` (Light)
- RGB: 161, 118, 214 (Dark) / 255, 91, 38 (Light)
- HSL: 267, 54%, 65% (Dark) / 15, 100%, 57% (Light)
- OKLCH: 0.651, 0.090, 294 (Dark) / 0.6839, 0.2089, 37 (Light)
- **Usage**: Secondary chart color
**Chart 3** - `#247b69` (Universal)
- RGB: 36, 123, 105
- HSL: 168, 55%, 31%
- OKLCH: 0.456, 0.072, 165
- **Usage**: Tertiary chart color
**Chart 4** - `#ffba26` (Universal)
- RGB: 255, 186, 38
- HSL: 41, 100%, 57%
- OKLCH: 0.815, 0.133, 70
- **Usage**: Quaternary chart color
**Chart 5** - `#ff5b26` (Dark) / `#a176d6` (Light)
- RGB: 255, 91, 38 (Dark) / 161, 118, 214 (Light)
- HSL: 15, 100%, 57% (Dark) / 267, 54%, 65% (Light)
- OKLCH: 0.685, 0.189, 45 (Dark) / 0.6478, 0.1447, 303 (Light)
- **Usage**: Quinary chart color
### 7. Sidebar & Navigation Colors
Specialized colors for sidebar and navigation components.
**Sidebar Background** - `#141414` (Dark) / `#f2f2f2` (Light)
- RGB: 20, 20, 20 (Dark) / 242, 242, 242 (Light)
- HSL: 0, 0%, 8% (Dark) / 0, 0%, 95% (Light)
- OKLCH: 0.090, 0, 0 (Dark) / 0.9612, 0, 0 (Light)
- **Usage**: Sidebar background
**Sidebar Foreground** - `#f4f4f5` (Dark) / `#3f3f46` (Light)
- RGB: 244, 244, 245 (Dark) / 63, 63, 70 (Light)
- HSL: 240, 5%, 96% (Dark) / 240, 5%, 26% (Light)
- OKLCH: 0.957, 0.002, 265 (Dark) / 0.3705, 0.0120, 285 (Light)
- **Usage**: Sidebar text
**Sidebar Primary** - `#763abf` (Dark) / `#18181b` (Light)
- RGB: 118, 58, 191 (Dark) / 24, 24, 27 (Light)
- HSL: 267, 53%, 49% (Dark) / 240, 6%, 10% (Light)
- OKLCH: 0.489, 0.134, 294 (Dark) / 0.2103, 0.0059, 285 (Light)
- **Usage**: Active sidebar items
**Sidebar Primary Foreground** - `#fafafa` (Universal)
- RGB: 250, 250, 250
- HSL: 0, 0%, 98%
- OKLCH: 0.9850, 0, 0
- **Usage**: Text on active sidebar items
**Sidebar Accent** - `#282929` (Dark) / `#e6e6e6` (Light)
- RGB: 40, 41, 41 (Dark) / 230, 230, 230 (Light)
- HSL: 180, 1%, 16% (Dark) / 0, 0%, 90% (Light)
- OKLCH: 0.174, 0.002, 180 (Dark) / 0.9249, 0, 0 (Light)
- **Usage**: Hovered sidebar items
**Sidebar Accent Foreground** - `#ffffff` (Dark) / `#18181b` (Light)
- RGB: 255, 255, 255 (Dark) / 24, 24, 27 (Light)
- HSL: 0, 0%, 100% (Dark) / 240, 6%, 10% (Light)
- OKLCH: 1, 0, 0 (Dark) / 0.2103, 0.0059, 285 (Light)
- **Usage**: Text on hovered sidebar items
**Sidebar Border** - `#292929` (Dark) / `#e5e7eb` (Light)
- RGB: 41, 41, 41 (Dark) / 229, 231, 235 (Light)
- HSL: 0, 0%, 16% (Dark) / 220, 13%, 91% (Light)
- OKLCH: 0.174, 0, 0 (Dark) / 0.9278, 0.0058, 264 (Light)
- **Usage**: Sidebar borders
**Sidebar Ring** - `#471584` (Dark) / `#763abf` (Light)
- RGB: 71, 21, 132 (Dark) / 118, 58, 191 (Light)
- HSL: 267, 73%, 30% (Dark) / 267, 53%, 49% (Light)
- OKLCH: 0.3494, 0.1669, 296 (Dark) / 0.4969, 0.1969, 299 (Light)
- **Usage**: Sidebar focus rings
## Implementation
### File Structure
```
components/shadcn-color/
├── dashboard.tsx # Main dashboard component
├── color-palette-enhanced.tsx # Color palette display
├── css-theme-data.ts # CSS theme definitions
├── css-themes.tsx # Theme code display
├── theme-context.tsx # Theme provider and context
├── pricing.tsx # Pricing component example
├── charts.tsx # Chart components
├── icons.tsx # Icon components
├── cards/ # Card component examples
│ ├── activity-goal.tsx
│ ├── calendar.tsx
│ ├── chat.tsx
│ ├── cookie-settings.tsx
│ ├── create-account.tsx
│ ├── data-table.tsx
│ ├── date-picker-with-range.tsx
│ ├── date-picker.tsx
│ ├── github-cards.tsx
│ ├── metric.tsx
│ ├── notifications.tsx
│ ├── payment-method.tsx
│ ├── report-an-issue.tsx
│ ├── share.tsx
│ ├── stats.tsx
│ └── team-members.tsx
└── dashboard/ # Dashboard components
├── date-range-picker.tsx
├── main-nav.tsx
├── overview.tsx
├── recent-sales.tsx
├── search.tsx
├── team-switcher.tsx
└── user-nav.tsx
```
### Theme Context Implementation
The color system uses a local theme provider for isolated theme switching:
```typescript
"use client";
import React, { createContext, useContext, useState } from 'react';
type Theme = 'light' | 'dark';
interface ThemeContextType {
theme: Theme;
setTheme: (theme: Theme) => void;
}
const ThemeContext = createContext({
theme: 'light',
setTheme: () => {},
});
export function LocalThemeProvider({ children }: { children: React.ReactNode }) {
const [theme, setTheme] = useState('light');
return (
{children}
);
}
export function useLocalTheme() {
return useContext(ThemeContext);
}
```
### Dashboard Features
The shadcn colors page includes an interactive dashboard with:
- **Cards Tab**: Showcase of various card components using the color system
- **Pricing Tab**: Pricing component examples
- **Color Palette Tab**: Complete color palette with all color values
- **Theme Toggle**: Switch between light and dark modes
- **Code View**: View and copy CSS theme code
### Using the Color System
#### In Tailwind CSS
```tsx
// Using color tokens
```
#### In CSS
```css
.custom-component {
background-color: hsl(var(--background));
color: hsl(var(--foreground));
border: 1px solid hsl(var(--border));
}
```
## CSS Theme Formats
The color system is available in multiple CSS formats:
### Tailwind v3 Format
Uses CSS custom properties with HSL values:
```css
:root {
--background: 0 0% 98.0392%;
--foreground: 0 0% 9.4118%;
--primary: 267.0677 53.4137% 48.8235%;
/* ... */
}
.dark {
--background: 0 0% 0%;
--foreground: 0 0% 100%;
--primary: 267.0677 53.4137% 48.8235%;
/* ... */
}
```
### Tailwind v4 Format
Uses CSS custom properties with HSL values and `@theme inline`:
```css
:root {
--background: hsl(0 0% 98.0392%);
--foreground: hsl(0 0% 9.4118%);
--primary: hsl(267.0677 53.4137% 48.8235%);
/* ... */
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
/* ... */
}
```
### RGB Format
```css
:root {
--background: rgb(250, 250, 250);
--foreground: rgb(24, 24, 24);
--primary: rgb(118, 58, 191);
/* ... */
}
```
### HEX Format
```css
:root {
--background: #fafafa;
--foreground: #181818;
--primary: #763abf;
/* ... */
}
```
### OKLCH Format
```css
:root {
--background: oklch(0.9851 0 0);
--foreground: oklch(0.2090 0 0);
--primary: oklch(0.4969 0.1969 299.8283);
/* ... */
}
```
## Additional Theme Variables
### Typography
```css
--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
```
### Border Radius
```css
--radius: 0.625rem;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
```
### Shadows
```css
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.00);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.00);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.00), 0 1px 2px -1px hsl(0 0% 0% / 0.00);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.00), 0 1px 2px -1px hsl(0 0% 0% / 0.00);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.00), 0 2px 4px -1px hsl(0 0% 0% / 0.00);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.00), 0 4px 6px -1px hsl(0 0% 0% / 0.00);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.00), 0 8px 10px -1px hsl(0 0% 0% / 0.00);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.00);
```
### Spacing
```css
--spacing: 0.25rem;
--tracking-normal: 0em;
```
## Best Practices
### Accessibility
- Always use foreground colors with their corresponding background colors
- Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Test color combinations in both light and dark modes
- Use semantic color tokens (e.g., `destructive` for errors) rather than hardcoded colors
### Consistency
- Use color tokens consistently across all components
- Don't mix different color formats (stick to CSS variables)
- Follow the established color hierarchy
- Use muted colors for less important content
### Theme Switching
- Always test components in both light and dark modes
- Use the `LocalThemeProvider` for isolated theme contexts
- Ensure all custom components respect theme changes
- Avoid hardcoded color values
### Component Development
- Use semantic color tokens in component props
- Provide color variants that map to theme colors
- Document which colors work best for each component
- Test color combinations for accessibility
## Usage Examples
### Cards
```tsx
Card Title
Card description
```
### Buttons
```tsx
// Primary button
// Secondary button
// Destructive button
```
### Forms
```tsx
```
### Navigation
```tsx
```
## Download & Export
### Accessing Theme Code
The shadcn colors page includes a "Code" button that displays the complete CSS theme code in multiple formats:
1. Click the "Code" button in the dashboard
2. Select your preferred format (HSL, RGB, HEX, OKLCH)
3. Choose between Tailwind v3 or v4 format
4. Copy the code for use in your project
### File Location
Theme data is stored in: `components/shadcn-color/css-theme-data.ts`
## Related Resources
- **Official Documentation**: [shadcn/ui](https://ui.shadcn.com/)
- **Tailwind CSS**: [tailwindcss.com](https://tailwindcss.com/)
- **WCAG Guidelines**: [w3.org/WAI/WCAG21](https://www.w3.org/WAI/WCAG21/)
- **Color Contrast Checker**: [webaim.org/resources/contrastchecker](https://webaim.org/resources/contrastchecker/)
## Navigation
- **Previous**: [Brand Colors](/guidelines/brand-colors)
- **Next**: [Logos](/guidelines/logos)
---
*For questions about the color system, implementation details, or accessibility concerns, please contact the design system team.*
## AI Assistant
Source: https://design.item.com/guidelines/ai-assistant
# Item AI Assistant
The AI assistant page provides a chat interface that answers questions about Item brand guidelines using the site's published markdown guidance files.
## Entry point
- Web page: https://design.item.com/guidelines/ai-assistant
- Chat API: https://design.item.com/api/chat
## Suggested prompts
- What colors does the brand use?
- Show me the logo guidelines.
- What fonts should I use?
- How do I request a business card?
## API Documentation
Source: https://design.item.com/docs/api
# Item API Documentation
This site exposes public discovery endpoints plus workflow APIs used by the brand portal.
## Discovery endpoints
- LLMs.txt: https://design.item.com/llms.txt
- Full LLM corpus: https://design.item.com/llms-full.txt
- API catalog: https://design.item.com/.well-known/api-catalog
- OAuth authorization server metadata: https://design.item.com/.well-known/oauth-authorization-server
- OAuth protected resource metadata: https://design.item.com/.well-known/oauth-protected-resource
- OpenAPI description: https://design.item.com/openapi.json
- MCP server card: https://design.item.com/.well-known/mcp/server-card.json
- Agent skills index: https://design.item.com/.well-known/agent-skills/index.json
## Endpoints
- `GET /.well-known/oauth-authorization-server` (public): OAuth 2.0 authorization server metadata for Authorization Code + PKCE.
- `GET /.well-known/oauth-protected-resource` (public): OAuth 2.0 protected resource metadata for the bearer-token agent API.
- `GET /api/health` (public): Health status for automated availability checks.
- `GET /api/registry` (public): Combined component registry manifest served to clients.
- `POST /api/chat` (public): Brand-guideline assistant chat endpoint.
- `POST /api/send-otp` (public): Start email OTP login flow.
- `POST /api/verify` (public): Verify OTP and mint a session token.
- `POST /api/request-access` (public): Submit an access request for non-approved email domains.
- `GET /api/approve-access` (operator): Operator approval link for pending access requests.
- `POST /api/business-card-request` (public): Submit a business card request workflow.
- `GET /api/agent/me` (oauth): Return the authenticated agent principal and granted scopes.
- `GET /api/agent/guidelines` (oauth): Return public guideline summaries through a bearer-protected API.
- `GET /oauth/authorize` (session): Render or complete the OAuth 2.0 authorization step.
- `POST /oauth/token` (public): Exchange an authorization code and PKCE verifier for a bearer token.
- `GET /oauth/jwks.json` (public): Publish the JSON Web Key Set used to verify issued access tokens.
- `POST /mcp` (public): Read-only MCP endpoint for public discovery tools.
## Authentication model
Interactive sign-in uses email OTP plus NextAuth session cookies. For machine clients, the site also publishes a first-party OAuth 2.0 authorization server with Authorization Code + PKCE for the protected agent API.