Guides
Design guidelines
Icon and screenshot guidelines
Icon guidelines
When submitting an app to Attio, the icon you provide plays a crucial role in how your app is presented across different areas of the platform. To ensure a consistent and professional appearance, please adhere to the following specifications and best practices.General Specifications
- Minimum Size: 280px by 280px (ensures high-quality rendering on all screens, especially on retina displays).
- No Rounded Corners: Attio automatically applies a 30% corner radius based on the icon size.
- Format: PNG (without transparency) for optimal display quality.
- Inset Outline: Attio automatically adds a 10% opacity inset outline to icons.
Corner Radius Reference
For different icon sizes, use the following corner radii as a reference:| Icon Size | Corner Radius |
|---|---|
| 1000px | 300px |
| 500px | 150px |
| 280px | 84px |
Icon Display Specifications
| Placement | Size |
|---|---|
| App Details Page | 230px by 144px |
| App Store | 720px by 462px |
| Action Buttons | 14px by 14px |
Additional Considerations
- Consistency: Ensure the icon remains visually clear and recognizable at both small and large sizes.
- Color Compatibility: Make sure the icon is effective on both light and dark backgrounds within the platform.
Screenshot Guidelines
Screenshots are essential for showcasing your app on the Attio marketplace. To maintain high quality and consistency, please follow these specifications and best practices.General Specifications
- Aspect Ratio: 16:10
- Size: 2220px by 1387px (ensures high-quality rendering on all screens).
- No Rounded Corners: Attio applies the necessary corner radius automatically.
Screenshot Display Specifications
| Placement | Size | Corner Radius |
|---|---|---|
| Thumbnail Display | 230px by 144px | 12px |
| Full-View Overlay | 720px by 462px | 16px |