Elemento

Using the Elemento brand

Keep identity clear, legible, and aligned with the public site

These guidelines align with the official Branding Guidelines — Elemento Modular Cloud (logo, trademark, typography, colour, imagery). They summarize rules for web and partner use. When in doubt, match the homepage and about story, and preserve each mark’s aspect ratio.

Trademark and legal wording: follow the full guidelines and counsel for ® notices, territory, and contractual use.

Logo

Mark, spacing, and contrast

Layout preference: use the horizontal payoff whenever possible (wordmark, tagline, and ®). When width is tight — mobile headers, narrow columns — use the vertical payoff lockup instead. For avatars, favicons, and compact UI, use the symbol alone (no wordmark).

The logo palette defines three ink colours — Starter Yellow #FFA600, Crystal White #F8F8FF, and Void Black #16161D — on the appropriate field. Each variant below shows those inks on the correct field: horizontal payoff, vertical payoff, then symbol only (yellow on void black is preferred).

Clear space: keep a margin on all sides equal to twice the logo height (same rule for the payoff version and for the symbol alone). Do not crowd type, photos, or UI against the mark.
Also approved when needed: Starter Yellow on a light field (e.g. Crystal White) — use the same mask technique as below. Do not introduce colours outside this system.
Do not distort, outline, tilt, add shadows or glows. Wordmark and symbol must use the same colour treatment in a given layout.

Horizontal payoff

Wordmark + tagline + ®

Horizontal payoff

Starter yellow on void black Preferred

Ink #FFA600 · field #16161D

Horizontal payoff

Crystal white on void black

Ink #F8F8FF · field #16161D

Horizontal payoff

Void black on crystal white

Ink #16161D · field #F8F8FF

Vertical payoff

Same lockup, stacked

Vertical payoff

Starter yellow on void black Preferred

Ink #FFA600 · field #16161D

Vertical payoff

Crystal white on void black

Ink #F8F8FF · field #16161D

Vertical payoff

Void black on crystal white

Ink #16161D · field #F8F8FF

Logo only (symbol)

No wordmark

Symbol only

Starter yellow on void black Preferred

Ink #FFA600 · field #16161D

Symbol only

Crystal white on void black

Ink #F8F8FF · field #16161D

Symbol only

Void black on crystal white

Ink #16161D · field #F8F8FF

Clear space & scalability

From the official logo guidelines

Respect area

Minimum clear space around the logo or symbol is 2× the height of the mark on every side (sometimes described as “doubling the height”). The payoff lockup uses the same rule.

Symbol respect area (grid). One column or row = 1× the symbol height (x = ). The mark sits in the centre; corner cells show a faint symbol as scale reference; keep the edge cells clear. Minimum clear space in production remains 2× the mark height on all sides (and for the full payoff), as in the rule above.

Logo width bands

Each band sets a maximum width for print and screen and the lockup to use at that scale (full payoff, horizontal wordmark, or symbol only).

Band	Print	Screen	Lockup
Large	up to 50 mm	up to 500 px	Full horizontal payoff — wordmark, tagline, and ®.
Medium	up to 35 mm	up to 250 px	Horizontal wordmark — when the full payoff is too wide.
Small	up to 10 mm	up to 30 px	Symbol only — favicons, app icons, narrow UI.

Do not scale the full payoff into the small band — switch to the symbol. Match ink and field colours to the logo section above.

Incorrect uses

Don’t — examples from the guidelines (not exhaustive)

Non-brand colours

The logo must not use colours outside the identity palette.

Outline only

The logo must not be used as a hollow outline.

Stretch or squeeze

Do not distort, stretch, or compress the mark.

Tilt or rotate

Do not tilt, rotate, or otherwise skew the logo.

Effects

No lighting, drop shadows, or bevels on the lockup.

Mismatched type & symbol

The logotype must not use a different colour from the symbol.

Usage in partnership

Co-branding layout

When appearing alongside another company, give both marks adequate clear space and balanced visual weight. A typical row is: Partner — Elemento, without merging or overlapping the lockups.

Partner logo Their clear space

Elemento clear space

Request the full partnership artwork from hello@elemento.cloud for approved templates and lockups.

Colour palette

Primary and secondary brand colours

Primary colours

Use these first for maximum recognition. The site theme also uses nearby neutrals (e.g. #1A1C20 for body text) — pair brand primaries with accessible contrast.

Starter Yellow
#FFA600

Void Black
#16161D

Crystal White
#F8F8FF

Secondary — product

#EF4056

#118ACB

#09b24e

Secondary — digital

#ff5500

#6c3f99

#07d884

Extra

#fccb10

#7167ff

Product UI tokens on elemento.cloud may differ slightly; treat this page as the marketing colour reference and css/themes.css for implementation.

Typography

Brand type stack (with live-site note)

Headings use Red Hat Display (often Extrabold). Key words inside headings may use Argent Pixel Italic (Connary Fagen — Argent Pixel). Body copy should use Red Hat Text — do not substitute Display for long text. Code uses Red Hat Mono (Google Fonts). Icons on elemento.cloud pair Font Awesome with a bundled Pixel Icon Library webfont for pixel-style glyphs (.hn classes; files under assets/font/PixelIconLibrary/). Check each source's licensing before reusing or redistributing.

Red Hat Display

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Headings — guidelines recommend Extrabold. Google Fonts.

Argent Pixel Italic

Highlight within headings

Accent inside titles only. Argent Pixel is licensed from Connary Fagen; this site ships it for select treatments.

Red Hat Text

Body text must stay functional and highly legible. Red Hat Text is tuned for paragraphs — different geometry from Display.

Canonical brand body font per guidelines. elemento.cloud still uses Open Sans in many templates; new work should align with Red Hat Text over time.

Red Hat Mono

nucleus cluster status
api.elemento.cloud/v1

Code, CLI samples, and technical UI.

Identity, patterns & imagery

Patterns, icons & photography

Patterns

Visual identity uses patterns inspired by the “force of cloud” — dynamic, physics-adjacent motifs. Use approved pattern files from the brand kit; don’t redraw from memory.

Icons

This site implements UI and marketing icons with Font Awesome and pixel-style accents via the bundled Pixel Icon Library webfont (.hn icon classes in assets/font/PixelIconLibrary/). Treat that pairing as the standard for elemento.cloud; avoid ad-hoc third icon families. Keep stroke, corner radius, and colour usage consistent with the chosen set.

Photography & art direction

Retro-future — abstract concepts, atmospheric or space-research imagery. Team moments — people and culture for tone of voice. Moving images — long exposure and dynamic shots for energy. Avoid generic stock that fights these three lanes.

Product names

Spellings and capitalization

Company and platform name: Elemento (sentence case in body; title case in headings as on the site). When you need the full legal line with Modular Cloud and ®, use the horizontal or vertical payoff lockup according to space.

Product marks

Atomos, Electros, and Atomosphere — capitalize as proper nouns. Use each product’s SVG from All products alongside the name when possible.

Press or partner assets

Email hello@elemento.cloud for high-resolution files or co-marketing review.

Contact About Elemento