Organic Studios is a software company. We build products that feel effortless on the surface and are engineered with real precision underneath — software that adapts to the people using it instead of the other way around, and holds its shape as it grows.
We care about the details most people never consciously notice — the ones that make a thing feel calm, coherent, and alive. Good software should feel less like a machine you operate and more like something that quietly works with you.
The idea behind the mark
Our mark is a leaf — but look closely and its veins are circuit traces, each ending in a node. Organic on the outside, engineered on the inside. That contrast is the company: something that grows and feels natural, running on something exact and deliberately built.
The two typefaces carry the same tension — a soft, round “Organic” set against a fixed-width, technical “Studios.” Warmth and structure, in a single wordmark.
Boilerplate
Organic Studios builds software that feels natural to use and is precisely engineered underneath — organic on the outside, engineered at the core.
A short, reusable description for press, profiles, and app-store listings.
Assets
The icon, wordmark, and favicon in every format and variant. Filter below, toggle each tile between transparent and its intended background, and click to open or download.
The full palette — click any swatch to copy its hex.
Emerald#2E9E63Primary — leaf outline & veins; reads on light and dark
Leaf-light#7ED6A0Accent — the circuit nodes
Ochre#CC9A3FWarm accent — soil & sun, the one earth tone. The annotation ink in dark mode (measurement guides, construction points) and the sun’s hover colour on the theme toggle; luminous enough to read on near-black. Never in the logo
Ocean#2C5F82Cool accent — deep water, the “blue planet.” The annotation ink in light mode and the moon’s hover colour; tuned deep so it reads as fine text on white (≈6.7:1, mirroring Ochre’s strength on dark). Never in the logo
Ink#18241EDark — “Organic” on light, the single-colour (mono) dark, plus the app icon & dark backgrounds. This near-black is the palette’s “black” — there is no pure #000, just as there is no pure #FFF
Slate#5E6E64Secondary — “Studios” on light; muted support
Mist#EAF2ECLight — “Organic” on dark, and the single-colour (mono) light; the counterpart to Ink (we reverse to Mist, never pure white)
Sage#9FB0A6Muted — “Studios” on dark backgrounds
Trademark light#A7B3ABThe ™/® symbol on light backgrounds — a quiet, low-contrast tint
Trademark dark#56635BThe ™/® symbol on dark backgrounds — a quiet, low-contrast tint
Type
Every font the brand uses, embedded so it renders anywhere. The round “Organic” against the fixed-width “Studios” is the brand’s organic-vs-engineered contrast, in type. All are free for commercial use — download the file, or grab them on Google Fonts.
Used for the word “Organic” in the wordmark. A geometric “circle-and-stick” sans. It ships one weight, so the wordmark faux-bolds it with a matched stroke.
Used for body text and interface copy across this site. The site’s workhorse — same round, geometric DNA as Questrial, but with real weights and italics for running text. Ships as a variable font. Never appears in the logo itself.
Used for the ™ and ® trademark symbols. A neutral, Arial-metric sans. Used only for the tiny trademark marks, so they stay generic and quiet.
Every family here is used and redistributed under the SIL Open Font License 1.1. The full license ships beside each font file and opens from its “License” link. The OFL places no requirement on how the fonts are used in a design.
Guidelines
How to use the mark so it stays consistent — the clear space to leave around it, how small it can go, and what never to do to it.
Clear space
Give the logo room equal to the leaf itself: keep clear, on every side, at least the leaf’s height above and below and the leaf’s width to the left and right (≈ 33 × ≈ 22 units, measured from the visible ink — never from any file padding). The dashed frame below marks that minimum: it is centred on the boundary — nothing should cross into it. The wordmark ships tight (cropped to the ink) and -safe (this clear space built in) — across colour and mono, light and dark, with ™/® variants (all on the Assets tab).
The icon on its own needs less breathing room — keep at least a quarter of the icon clear on every side (≈ 12 × ≈ 8 units on the 64-grid), a smaller minimum since the mark is already compact. The icon adds a third spacing on top of tight and min-safe — the full grid (the 64-unit master, shown below), which carries its own generous padding.
Minimum size
Below this the monospace “Studios” starts to break up — use the icon on its own instead.
Wordmark — ~150px / 1.5in wide minimum
Icon — holds up to about 20px. Below that, switch to the favicon, a simpler leaf drawn to stay legible at tiny sizes.
Don’ts
Don’t stretch or distort it
Don’t rotate or tilt it
Don’t recolor it
Don’t place it on low-contrast colors
Construction
Exactly how the mark is built — precise enough to reproduce it to the pixel, like a straightedge-and-compass construction.
The icon — an exact construction
The icon is pure geometry, so it reproduces to the pixel. It is drawn on a 64 × 64 canvas (viewBox="0 0 64 64"), origin top-left, x increasing right and y increasing down, in SVG user units. Only two colors appear: emerald #2E9E63 for every stroke, and node-green #7ED6A0 for the five dots. Nothing is filled except the dots. The complete source is at the end of this section — match those bytes and the result is identical.
Outline — the organic leaf form (emerald #2E9E63)
Midrib + four veins — the “engineered” interior
Five nodes — circuit endpoints (accent #7ED6A0)
Lean — the whole mark rotates −12° so it reads as growing, not static
Step by step — a straightedge-and-compass construction
Work upright on the 64-grid; the whole thing is rotated exactly once, in the last step. Draw the parts in this order — later parts paint on top of earlier ones.
Outline (draw first). One closed path of two cubic Béziers, mirror-symmetric about x = 32. Move to (32, 52); curve to (32, 9) with control points (15, 38) then (15, 20); curve to (32, 52) with control points (49, 20) then (49, 38); close the path. Exactly: M32 52 C 15 38, 15 20, 32 9 C 49 20, 49 38, 32 52 Z. Style: fill="none", stroke #2E9E63, stroke-width="4", stroke-linejoin="round" — the round join is what softens the apex and base points; without it they render as sharp corners.
Midrib. A straight line from (32, 49) to (32, 13): M32 49 L32 13. Style: stroke #2E9E63, stroke-width="2.4", stroke-linecap="round", fill="none".
Veins — four straight lines. Lower pair from (32, 40) to (23, 33) and to (41, 33); upper pair from (32, 29) to (25, 23) and to (39, 23). Style: stroke #2E9E63, stroke-width="2", stroke-linecap="round". (For reference the lower veins are √130 ≈ 11.40 long at ±52.10° off the upward midrib and the upper √85 ≈ 9.22 at ±49.40° — but the endpoint coordinates above are what define them.)
Nodes — draw last, on top. Five circles of radius 3, fill="#7ED6A0", no stroke, centred at (23, 33), (41, 33), (25, 23), (39, 23), and (32, 13).
Tilt — once, at the end. Wrap every element above in a single group carrying transform="rotate(-12 32 32)": rotate −12° about the exact centre (32, 32). Apply it to the whole group — do not bake it into the coordinates or re-round anything.
Canonical source — the file icons/icon-64.svg. It is the 64-grid master; the shipped icons are just crops of it — a tight primary, a -safe version with a quarter-icon of clear space (see Guidelines), and light/dark ™ / ® variants. Reproduce these bytes exactly and the result is identical, to the pixel:
The wordmark is the icon set beside the name. Unlike the icon it is type, so matching it to the pixel needs two things: the exact layout below and the exact font files — a different build of the same font shifts the glyphs. The definitive, self-contained artifact is wordmarks/wordmark-light.svg: it embeds the exact subset font as base64, so any compliant renderer draws it identically. Reproduce that file’s bytes and it cannot differ.
Because it is type, the wordmark has no curve coordinates to trace — its construction is the layout above: the leaf anchored at (4, 9), the type baseline at y = 40, and the type box starting at x = 52. Those three, plus the exact fonts below, fix every glyph.
The fonts — use these exact bytes
Each word or symbol is set in one font. If your file’s SHA-256 matches, the glyph outlines are identical (grab the fonts from the Type tab).
Canvas. Build the content on a viewBox="0 0 W 64" master, height 64, where W is fixed by the fonts: 301 plain, 314 with a ™, 310 with an ®. The shipped tight file then crops its viewBox to the visible ink; the -safe file instead pads that ink box by one leaf. Cropping/padding only moves the window — never a glyph — so the coordinates below are unchanged either way.
The leaf. Take the finished icon (the whole group, with its rotate(-12 32 32) already applied) and place it with transform="translate(4 9) scale(0.72)" — 72% size, offset (4, 9) from the top-left corner.
Text box. A single <text> at x="52" y="40" (baseline y = 40, start x = 52), with font-size="30" and letter-spacing="-0.3" on the whole element.
“Organic ”. First span, font Questrial, the literal text “Organic” plus exactly one trailing space — that Questrial space is the entire gap between the words (no manual kerning). Faux-bold: fill and stroke both set to the ink color, stroke-width="1.15", stroke-linejoin="round", paint-order="stroke".
“Studios”. Second span, font Space Mono, literal text “Studios”, fill the slate color, no stroke.
™ / ® (only on those variants). Third span, font Arimo, font-size="13", dy="-11" (raised), fill the trademark color; the glyph is ™ (U+2122) or ® (U+00AE).
Colors, by background. Light — Organic#18241E, Studios#5E6E64, ™/® #A7B3AB. Dark — Organic#EAF2EC, Studios#9FB0A6, ™/® #56635B.
Canonical source — the file wordmarks/wordmark-light.svg. The embedded-font data-URI is shortened to “…” below; the real file carries the full base64. (This shows the tight primary; the -safe file is the same content, padded.) Reproduce these bytes exactly and the result is identical, to the pixel:
At favicon sizes (down to 16px) the full icon’s detail muddies, so the favicon is a deliberately simplified, bolder cut of the same leaf — same 64 × 64 canvas, same origin and axes, same −12° tilt, same two colors (emerald #2E9E63 strokes, node-green #7ED6A0 dots). It keeps the outline, midrib, the lower vein pair, and three nodes, and drops the upper vein pair and its two nodes, with every stroke thickened so it stays crisp when it’s only a few pixels wide. The complete source is at the end — match those bytes and the result is identical.
Outline — same leaf, a touch fuller and taller; stroke 5.5 (icon: 4)
One vein pair — from (32, 39) to (22, 31) and (42, 31); the upper pair is dropped
Three nodes — the two vein tips plus the midrib top, radius 3.6 (icon: 3, five nodes)
Step by step — a straightedge-and-compass construction
Same method as the icon — work upright on the 64-grid, tilt once at the end — with fewer parts and heavier strokes. Draw in this order; later parts paint on top.
Outline (draw first). One closed path of two cubic Béziers, mirror-symmetric about x = 32 — fuller than the icon’s (control points pushed out to x = 13 / 51) and a little taller (apex (32, 7), base (32, 53)). Move to (32, 53); curve to (32, 7) with control points (13, 38) then (13, 19); curve to (32, 53) with control points (51, 19) then (51, 38); close. Exactly: M32 53 C 13 38, 13 19, 32 7 C 51 19, 51 38, 32 53 Z. Style: fill="none", stroke #2E9E63, stroke-width="5.5", stroke-linejoin="round".
Midrib. A straight line from (32, 50) to (32, 12): M32 50 L32 12. Style: stroke #2E9E63, stroke-width="3.2", stroke-linecap="round", fill="none".
One vein pair. Two straight lines from (32, 39) to (22, 31) and to (42, 31). Style: stroke #2E9E63, stroke-width="2.6", stroke-linecap="round". The icon’s upper vein pair is omitted entirely.
Nodes — draw last, on top. Three circles of radius 3.6, fill="#7ED6A0", no stroke, centred at (22, 31), (42, 31), and (32, 12) — the two vein tips and the midrib top.
Tilt — once, at the end. Wrap every element above in a single group carrying transform="rotate(-12 32 32)": rotate −12° about the exact centre (32, 32). Apply it to the whole group — do not bake it into the coordinates or re-round anything.
Canonical source — the file icons/favicon.svg. It is the favicon master; the shipped favicons (favicon.ico at 16/32/48, favicon-96x96.png, and favicon.svg) are all rendered from it. Reproduce these bytes exactly and the result is identical, to the pixel:
