Electronic Materials Office®

The Electronic Materials Office design system presents a future-forward, material-focused aesthetic: deep charcoal surfaces provide a sophisticated backdrop for precise typography. A single vibrant orange acts as a focused accent, guiding user interaction and highlighting key product details. The overall experience is one of refined minimalism, emphasizing form and function through limited color, structured spacing, and highly legible text. Use Carbon (#202020) as the dominant background color for most sections to maintain the dark theme. Apply Power Orange (#f45500) exclusively for primary calls-to-action and key interactive accents. Prioritize GT-Flexa for all headings and UI elements that require a distinct brand voice. Employ Tobias-light with negative letter-spacing for large, impactful headlines to create a sense of elegant precision. Utilize 20px border-radius for cards and content containers, and 16px for primary action buttons. Maintain a comfortable density with element gaps of 4px and section gaps of 48px. Ensure all interactive text and links use Electric Violet (#9e9eff) for recognition, only if they are true interactive links. Vanilla Ice (#ffffff) should be used for static link-like text. Do not introduce new vibrant colors outside of Power Orange and Electric Violet for interaction or branding. Avoid using serif typography for UI elements or headings; reserve Times for body content only. Do not deviate from the established 20px and 16px border-radii for cards and buttons respectively. Refrain from adding arbitrary shadows or borders to elements; elevation is used sparingly and deliberately. Do not use Electric Violet for button backgrounds; it is primarily for links and borders. Avoid excessive spacing or padding that breaks the comfortable density; stick to 4px multiples for consistency. Do not use pure black (#000000) as a background unless specifically for text on a white element or as a deep accent shade.