- Navigation Bar: contains all main actions as buttons
- Section 1: Navigation
- Section 2: Editing
- End: Help
- Left and Right Panel:
- the left panel contains actions relevant for the right panel (e.g. selecting from a list)
- the left and right panel can also be merged together to a singular panel
- the left and right panel can also be completely unrelated
- Status Bar: contains status messages
The general control flow is from top to bottom and from left to right.
| Usage | Font | Font Size | Variant | Sample |
|---|---|---|---|---|
| Window Title | Consolas | 35 | bold | Window Title |
| Sub Title | Consolas | 25 | regular | Sub Title |
| Small Title | Consolas | 16 | regular | Small Title |
| Normal Text | Consolas | 12 | regular, italic, bold | Normal Text |
| Small Text | Consolas | 10 | regular, italic | Small Text |
The color scheme will be based on the application icon.
Enabled controls will use the colored variant. Disabled controls will use a monochrome variant.
Different base colors differentiate between different categories of actions.
| Color Group | Color Name | Color Code | Example | Usage |
|---|---|---|---|---|
| Primary | yellow | #ffe278 |  |
navigation |
| Primary | light orange | #ffb454 |  |
navigation |
| Secondary | light blue | #7ed8f6 |  |
navigation |
| Secondary | blue | #6aa9ff |  |
small indicator icons |
| Secondary | dark blue | #4895ff |  |
small indicator icons |
| Tertiary | dark purple | #3d4566 |  |
small indicator icons |
| Tertiary | purple | #4d5e80 |  |
small indicator icons |
| Tertiary | light purple | #f379ca |  |
small indicator icons |
| Accent | dark red | #e56722 |  |
destructive actions |
| Accent | light red | #f37b2a |  |
destructive actions |
| Accent | dark green | #66bb00 |  |
adding, saving |
| Accent | light green | #77dd00 |  |
adding, saving |
| Accent | dark orange | #ff7d47 |  |
destructive actions |
| Accent | black | #141414 |  |
text, background |
| Accent | dark gray | #585859 |  |
text, background |
| Accent | light gray | #d7e8ff |  |
text, background |
| Accent | white | #f7f9fa |  |
text, background |
If any new icons are added to the application, their links must be documented in
Resources/license_en.htmlandResources/license_de.html. The table below serves as an overview for the style documentation outside the application itself.The hyperrefs of the links are kept as is, but the captions will be translated to either "icons created by" or "Icons erstellt von".
| Icon Group | Name | Source (must be inserted in clear text) | Icon |
|---|---|---|---|
| Application Icon | icon.png | Files-and-folders icons created by Freepik - Flaticon |  |
| Editing | add_catalog.png | "Catalog" icon + "Add" icon |  |
| Editing | add_medium.png | "Medium" icon + "Add" icon |  |
| Editing | add_tag.png | "Tag" icon + "Add" icon |  |
| Editing | add_part.png | "Part" icon + "Add" icon |  |
| Editing | delete_catalog.png | "Catalog" icon + "Delete" icon |  |
| Editing | delete_medium.png | "Medium" icon + "Delete" icon |  |
| Editing | delete_tag.png | "Tag" icon + "Delete" icon |  |
| Editing | delete_part.png | "Part" icon + "Delete" icon |  |
| Editing | add.png | Plus icons created by Freepik - Flaticon |  |
| Editing | edit_blue.png | Edit icons created by IconKanan - Flaticon |  |
| Editing | favorite.png | Favorite icons created by Aldo Cervantes - Flaticon |  |
| Editing | nofavorite.png | Favorite icons created by Aldo Cervantes - Flaticon (the same as the favorite variant) |  |
| Editing | save.png | Save icons created by Aldo Cervantes - Flaticon |  |
| Editing | nosave.png | Save icons created by Aldo Cervantes - Flaticon (the same as the save variant) |  |
| Editing | undo.png | Undo icons created by Freepik - Flaticon |  |
| Editing | delete.png | Trash icons created by Freepik - Flaticon |  |
| Editing | checkbox_neutral.png | Ui Icons erstellt von Icon Hubs - Flaticon (the same as the positive variant) |  |
| Editing | checkbox_positive.png | Ui Icons erstellt von Icon Hubs - Flaticon |  |
| Editing | checkbox_negative.png | Ui Icons erstellt von Icon Hubs - Flaticon (the same as the positive variant) |  |
| Management | export.png | Export icons created by surang - Flaticon |  |
| Management | import.png | Import icons created by surang - Flaticon |  |
| Navigation | back.png | Ui icons created by Oetjandra - Flaticon |  |
| Navigation | previous.png | Arrow icons created by Yogi Aprelliyanto - Flaticon |  |
| Navigation | noprevious.png | Arrow icons created by Yogi Aprelliyanto - Flaticon (the same as the previous variant) |  |
| Navigation | next.png | Arrow icons created by Yogi Aprelliyanto - Flaticon (the same as the previous variant) |  |
| Navigation | nonext.png | Arrow icons created by Yogi Aprelliyanto - Flaticon (the same as the previous variant) |  |
| Navigation | next_random.png | Undo icons created by Freepik - Flaticon (the same as the undo variant) |  |
| Navigation | playlist.png | Add to playlist icons created by Freepik - Flaticon |  |
| Navigation | title_of_the_day.png | Unboxing icons created by Freepik - Flaticon |  |
| Navigation | statistics.png | Seo-bericht Icons erstellt von Muhammad_Usman - Flaticon |  |
| Navigation | tag.png | Tag icons created by Freepik - Flaticon |  |
| Navigation | catalog.png | Export icons created by surang - Flaticon (the same as the export icon) |  |
| Navigation | catalogs.png | Export icons created by surang - Flaticon (the same as the export icon) |  |
| Navigation | medium.png | Files-and-folders icons created by Freepik - Flaticon (the same as the application icon) |  |
| Navigation | part.png | Files-and-folders icons created by Freepik - Flaticon (the same as the application icon) |  |
| Navigation | settings.png | Settings icons created by Freepik - Flaticon |  |
| Navigation | analyze.png | Analyse Icons erstellt von mynamepong - Flaticon |  |
| Navigation | help.png | Question icons created by Freepik - Flaticon |  |