Brand

How to present Ortam. Use the files below as they are; please don’t redraw them.

Logo

The mark joins the product’s two status glyphs, running ◆ and stopped ◇: a machine that keeps its disk when it stops.

Clear space: Keep at least half the mark’s height free on every side.
Minimum size: 16 px for the mark, 80 px wide for the logo.
Color: Ink on light backgrounds, white on dark ones, with no other colors, gradients or effects. The app icon keeps its dark tile.
Don’t: Stretch, rotate, outline or redraw the files, or set the name in another typeface.

Ortam is neutral gray. Color is kept for meaning: green for ready, amber for a warning, red for an error or an action that can’t be undone.

Success #387663. It marks a successful or ready state. Amber #a17832 marks a warning and red #b34549 an error; each comes with a word.

In the dark theme: Night #101113 background, #eff0f2 text, #a5a7ae secondary text, #151618 cards, and #659e86 for success.

Geist for everything you read; Geist Mono for code, commands and small technical labels. Both are free under the SIL Open Font License.

Plain: Say what happens. “The VM shuts down and the disk stays.”
Specific: Prefer a number or a mechanism to an adjective. Skip hype words.
Honest: State the limits. “Changes after the last completed save can be lost.”
Short: One idea per sentence, and only the detail the reader needs.

Ortam: One word with a capital O, never all caps.
Sandbox, Snapshot, Execution, Connection: Product terms, capitalized like names. An Execution is one command and its record; in running text, “command” is fine. Lowercase “sandbox” only for other products’ throwaway sandboxes.
VM: Each Sandbox runs in its own VM. Don’t call it a container.

Column: One fluid column, at most 672 px wide, with 24 px margins. It reflows down to 320 px without sideways scrolling.
Spacing: Gaps come from one scale: 2, 4, 8, 12, 16, 24, 32, 40, 48, 56 and 96 px. Containers set the gaps; their children carry no margins.

Type: Reading text is 16 px with a 1.75 line height; the dashboard’s text is 14 px.
Contrast: Text keeps at least 4.5:1 against its background: secondary text is #555960 on Canvas and Card, #a5a7ae on Night. Anything that marks a control or state keeps 3:1.
Keyboard: Everything works by keyboard, and the focused control always shows a ring.
Targets: Controls are at least 24 px, or spaced 24 px apart.
Meaning: Never by color alone: a status color always comes with a word or a glyph.

Illustration: Monospace diagrams of a machine, and 1-bit dither in the text color on image surfaces. Never behind text.
Icons: Lucide, 16 px, or 14 px inside compact controls, in the text or muted color. An icon that stands alone has an accessible name.
Motion: Subtle and slow: a passing highlight, a change, or a machine starting. With reduced motion, nothing moves unless you press play.