SymbolSVG
CLOUDYIELD / BRAND BOOK 03
Clarity also
has one shape.
An identity that makes cloud costs visible. Simple in form, precise in use, and consistent at every touchpoint.
9 SVG variations · palette · usage guide · typography
CLOUDYIELD / SYMBOL
Connect. Understand. Optimize.03 — 2026
BRAND GUIDE / 01
One brand. One color at a time.
Two interlocking cloud forms create a currency signal through transparent negative space. Every visible part uses the same solid color.
Symbol / CloudYield orangeOne color. No gradients. Transparent background in the file.
One color. No gradients. Transparent background in the file.Find the right version.
Favicons, avatars, and compact spaces.
CloudYield orange · #FF8904
Download SVGScalable vector with a transparent background. Wordmark versions embed the font in the file.
BRAND GUIDE / 02
Orange is our signature.
One primary color across the experience, from the logo to buttons and charts. Charcoal provides structure and contrast; white gives information room to breathe.
#FF8904
CloudYield orange
Primary color: brand identity, buttons, charts, and highlights.
#202020
Charcoal
Navigation, institutional areas, and high-contrast backgrounds.
#FFFFFF
White
Whitespace, light surfaces, and the brand on dark backgrounds.
Contrast is part of the design.
On orange buttons #FF8904, use charcoal text. For orange links and text on light surfaces, use the accessible shade #BC4800.
The brand adapts to its background.
In dark mode, orange #FF8904 keeps links and highlights readable. Use the orange or white logo on charcoal. Each application uses a single solid color, including the wordmark.
Green, yellow, and red complement the landing page in details, cards, and indicators. In analytics, they communicate savings, warnings, and anomalies, always with text. Orange is the only primary brand color; charcoal and white are supporting neutrals.
Download design tokensBRAND GUIDE / 03
Information with room to breathe.
Inter Variable is our typeface. Legible in dense data, clear in headings, and familiar throughout the experience.
INTER VARIABLE / 400 — 700
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 → + % $
Distributed under the SIL Open Font License 1.1.
DISPLAY / 40–68 PX / 600
Every decision
can deliver more.
HEADING / 24–32 PX / 600
Clarity to take action.
BODY / 14–16 PX / 400
Connect data, understand costs, and find opportunities with context.
DATA / TABULAR NUMERALS
$1,240.00
Typography example; does not represent an actual estimate.
BRAND GUIDE / 04
Consistency in every application.
Preserve the geometry, proportions, and space around the brand. The identity works best when it has clarity.
¼ x
Clear space
Leave at least ¼ of the visible symbol width on every side. No text or element should enter this space.
24px
32px
48px
Minimum size
Symbol: 24 px. Horizontal lockup: 140 px wide. Stacked lockup: 120 px. The favicon is the technical exception at 16 px; use the standalone symbol.
Do
- One solid color across the entire logo, including the wordmark.
- Official files, with internal spacing preserved.
- Orange or charcoal on light backgrounds; orange or white on dark backgrounds.
- 8–24 px corner radii in the interface and spacing in multiples of 4 px.
Don't
- Filling the currency-forming channel or treating it as a second-color element.
- Applying gradients, shadows, outlines, or 3D effects.
- Stretching, rotating, cropping, or rearranging the symbol.
- Recoloring the logo with supporting colors or using low-contrast backgrounds.