Endomorphium Design

Endomorphium Design can be applied in a wide variety of scenarios, even without a screen.

Endomorphium, think the End from Minecraft and morphing, is a material which can become a wide variety of things. It can be adapted to fit many forms and uses. Similarly, Endomorphium Design can be applied in a wide variety of scenarios, even without a screen. While Endomorphium Design is focused on visual elements, anything that uses Endomorphium Design can include auditory, tactile, and conversational interactions and feedback.

Endomorphium Design in visual design features a new smoothness for interactions that feels natural; you can open drawers, get a notification passed to you, or travel easily to a nearby place. In UI/UX design, this means opening sidebar drawers, notification popups, and page traversal.

Also, we give creators some creative freedoms in our Theming capabilities. The user should have some say in the customization too: when you navigate to a page which has data belonging to or attributed to the user, they should be given control over how their pages look. On social sites, this means sharing theme customizations automatically.

Specification

v2019-04-12 - protected under BS E3.

Page Structure

In order to maintain consistency within all Endomorphium Design pages, native apps and on the Web, your page layout should be based on one of these page layouts.

Text Page: When a page is very text heavy, i.e. a news article, make the content very prominent by removing all aside content. This includes "About Me" or tags on blogs. Leave the focus on the content and keep additional content at the bottom, rather than an expanding sidebar. Drawers should be used for site or app navigation when using text-heavy pages. The content should not take up more than 640 pixels of width.

About Page: Some pages, such as home or about pages, are used to store some autobiographical data about the creator or owner of the resource. Put basic information on the first "slide", then have an additional section to your page holding an extended biography or resume. Reduce aside content, and do not have it scroll with your content. Display this information after the section it is beside on less wide displays, such as phones and watches.

Dashboard & Tools: Pages that have tools, such as a settings page, dashboard, or control panel, should take up the whole width of the viewport, leaving 4 pixel margins between elements. On dashboards, have individual card segments use a 1 or 2 pixel single border with an optional shadow. Please size these elements equally.

Checkbox

Forms use checkboxes for categories in which multiple elements can be selected at once. Checkboxes must use the primary theme color as a 1-pixel border, a solid white (#FFF) or solid black (#000) background which complements the likeness of the page background (white with light, black with dark), no border rounding, and a theme color check-mark in the middle which matches the border when activated. No middle state is allowed on checkboxes.

Radio Button

Forms use radio buttons for categories in which only one element can be selected at once. Radio buttons must use the primary theme color as a 1 pixel wide, 50% rounded border, a solid white or solid black background which complements the likeness of the page background, and a theme color circle with 20% padding in the middle which matches the border when activated. No middle state is allowed on radio buttons.

Binary Switch

Settings pages use binary switches to toggle a feature on or off. Binary switches must use the primary theme color as a 1 pixel wide, 50% rounded border, a solid white or solid black background which complements the likeness of the page background, and a square on the inside that is 50% gray on the left side when "off" and theme color on the right side when "on" and takes up half of the switch, without padding.

Iconography

Representative images, referred to as icons, are omnipresent in GUI displays. We will have a set of icons which will feel adaptive and universal, and fit in well with Endomorphium Design.