Brand
These are ethea's brand guidelines. What they govern today is the mark — how the device is built, the three axes it may vary along, and where the site spends it. Where a rule has not been decided, this page says so rather than inventing one.
The device
The ethea mark is a framed portal enclosing a balance glyph. It is drawn as vector shapes and never as a picture of itself, so it stays crisp at any size and takes its color from whatever it is set in.
One set of coordinates is the mark. The website paints it as SVG, the printed back of every card emits it as page operations, and the figures below read the same numbers — so no two media can come to disagree about what the device looks like. The figures on this page are not drawings of the mark; they are the mark.
Every full painting of the device is laid out in a box 49 units across and 83.689 tall. The portal inside it is 35 by 44.8 units, drawn at a stroke of 0.42 — a portrait opening rather than a square one, which is the first thing a redrawing gets wrong.
Every shape stands on one vertical center line. That is what makes the device symmetric, and it is why centering the portal centers the whole mark to within a rounding error.
The drawn device is taller than its portal: the staff and its finials run 12.445 units past the top and 12.444 past the bottom, so the mark occupies 69.69 units of height against the portal's 44.8. A layout that reserves room for the portal alone will clip the device.
How it is built
The device is a portal and the shapes inside it. Each figure below picks out one part in gold against the rest of the mark, so what a name refers to is shown rather than pointed at.
A portal and 7 shapes: 1 staff, 2 finials, 2 long crossbars, 2 short crossbars.
Portal
The frame the device is enclosed by. It is the only stroked shape in the mark — everything else is filled — and it is the box a medium centers when it has to place the mark.
35 by 44.8 units, stroked at 0.42.
Staff
The spine. It runs the full height of the device, past the portal at both ends, and every other shape is placed against it.
64.245 units long by 2.8 thick.
Finials
Squares stood on their corners, capping the staff top and bottom. They are squares turned about their own centers rather than diamonds drawn as diamonds, which is why a renderer without rotation loses exactly these.
3.85 units long by 3.85 thick. Turned 45 degrees.
Long crossbars
The pair of heavy bars either side of the middle. They are the widest shapes in the device.
21 units long by 3.15 thick.
Short crossbars
The outer pair, narrower and lighter than the long bars. The four bars together are what read as a balance.
12.6 units long by 1.75 thick.
Weight
The mark is drawn at one of two weights. Weight is not size: how tall the device is drawn is the surface's choice, and the weight decides how heavy its strokes are at whatever height that is.
The bold weight is a redrawn set of shapes and never a scaled copy of the regular one. This is the least obvious rule here and the one most likely to be broken: scaling the regular shapes would thicken the bars and the finials by the same factor, and the device would stop being itself.
Regular
The mark at reading scale — the nav, the footer, a card's printed back, and every figure on this page.
Portal stroke 0.42; staff 2.8, finials 3.85, long crossbars 3.15, short crossbars 1.75.
Bold
The mark at hero scale, where a hairline would thin away to nothing on the screen it is drawn on.
Portal stroke 0.8; staff 4.6, finials 5.6, long crossbars 4.6, short crossbars 3.
Measured rather than asserted — between the two weights the parts thicken by factors running from 1 to 1.71. One scale factor would make every one of those the same number.
Size
How tall the mark is drawn comes off a ramp of named steps rather than from a number chosen per surface. The ramp is the site read back: every step below is a height the mark was already being drawn at by hand before the steps existed, which is why picking one is picking what the site already does.
Five surfaces each sized and painted the mark in their own stylesheet before this — at 32, 30, 38, 96 and 52, and 300 pixels — which is the per-surface drift a shared ramp exists to end. The sixth surface picks a step instead of inventing a sixth height.
Tone
A tone says what the mark is being drawn FOR, and the paint follows from that rather than the other way round.
text
The mark as part of the page's writing — the nav's brand, the footer, a card's head.
accent
The mark as gold ornament, which is what a masthead's emblem is.
media
The mark over artwork, where it takes an over-media foreground and separates from whatever is behind it.
A tone is a color and never a recession. How far back a decoration sits belongs to the well it sits in and not to the device, which is why the featured tile takes the gold tone and then sets its own opacity on a wrapper around the mark. Two wells already want two different answers to that question.
Where the mark is spent
Seven surfaces draw the device today. They are listed so the range can be seen before a step is chosen.
- The site bar's brand, beside the wordmark.
- The footer, above the site's one-line description.
- The sign-in card.
- The home page's emblem, at the largest step there is.
- A featured deck's tile, as a watermark behind the well.
- The flourish divider, which paints the bars alone on a rule that already frames them.
- The printed back of every card, in the deck's own back inks.
Clear space
Clear space is one module on every side — and the mark already reserves it. The coordinate space the device is laid out in is exactly one module wider and taller, all round, than anything the device paints, so keeping the rule costs nothing and the only way to break it is to crop.
The module is the mark's own, not a distance chosen for this rule: 7 units is the gap between the two long crossbars, it is what the portal insets by, and the coordinate space is that number squared across.
So nothing may enter the coordinate space: the device paints 35 units across inside a box that reserves 7 at each side and 7 above and 7 below. Never crop to the drawn extent — that is the same act as taking the clear space away.
Stated for somebody setting the mark beside their own, where the coordinate space is not something they can see: clear space on each side is a fifth of the mark's drawn width.
The lockup
Clear space is measured from the device's drawn extent. Where the wordmark is set beside it, the two are one lockup with a fixed gap between them, and the clear space is then measured from the outside of the pair rather than between its parts — a rule applied between them would push the word away from the device it names.
The site's own chrome clears the clear-space rule several times over, which is what makes that rule adoptable rather than a change anybody has to make: the bar sets its word one spacing step from a small mark, and that step is more than five modules at the height the mark is drawn there. Both readings pass — from the device alone, and from the lockup.
Minimum size
The mark has a floor, and it is set by the thinnest thing in it. Everything else survives being drawn small; the portal is the one stroked shape, so it is what drops out first — and a device without its portal is a staff and some bars rather than a smaller mark.
That stroke is 0.42 units against a drawn width of 35 — 1.2 % of the width, whatever size the mark is set at. The next thinnest part is several times heavier and never decides the floor.
So the mark is not drawn narrower than 84 pixels on screen, where the stroke still resolves to a whole device pixel, or 20.9 mm in print, against a 0.25 mm hairline. Both are drawn widths, and both round up: a floor stated below the requirement permits exactly what it exists to forbid.
The floor is stated for the regular weight because that is the binding case — the other weight thickens every stroke and clears both floors comfortably. Publishing two numbers would only invite the wrong one being used.
The card's own printing sits comfortably above that floor, which is the measurement the rule was built from: scaled to the size the mark is printed at on the back of a card, the portal's stroke lands at 0.4875 mm — about 5.8 dots at the ratified 300 dots per inch, and nearly twice the hairline above. The derivation lives beside the printed card back, in the print package.
What this page still does not state
The two rules above were ratified rather than assumed, and that is the only reason they are here. A guideline stating a rule nobody ratified is worse than one that is silent, because the next person to read it treats it as settled — so anything not decided is still left unsaid rather than filled in. There is no rule here about color the mark may be set in beyond the three tones above, none about what it may be set on, and none about what may not be done to it.