DTI Design System

Guidelines for using color across the website.

Structure, spacing, and responsive design rules.

Fonts, sizing, and best practices for readable UI text.

Expandable panels to show and hide content efficiently.

Clickable elements to perform actions or navigate.

Container for grouping related information and media.

Compact element to display a particular note or status.

Scalable vector graphics to enhance visual meaning.

Stylized wrapped for displaying icons consistently.

Field for retrieving text input from a user.

Stylized wrapped for displaying logos consistently.

Switch between related views on the same page.

Call-to-action blocks that drive user engagement.

Highlight a particular topic in a structured layout.

Bottom section on page containing links and info.

Top section on page with key message.

Navigation bar for browsing through website.

Visual divider to separate content sections.

Consistent headings to label major content areas.