# Ortha Studio — brand context for AI tools Version: 1.0 · Updated: 2026-09-27 This is a portable working brief for writing, design, and image generation. It combines Ortha’s brand guidelines with three visual references supplied by the brand owner. It does not depend on access to an external website to be useful. ## Start here Ortha Studio is an independent design and engineering studio. It builds websites, custom software, and AI workflows for mid-market teams in the US and Europe, delivered on retainer by the people who do the work. Its character is direct, specific, calm, and quietly excellent. Its visual language is editorial and systematic: confident sans-serif typography, generous negative space, disciplined alignment, and one clear focal point. Ink `#01011A` and White/Paper form the grounds. Violet `#4500F9` is the signal. Neue Einstellung is the display face; Inter is the approved fallback and body/UI face; JetBrains Mono is for code and machine output. Use the supplied Ortha logo artwork exactly. Do not invent, redraw, or approximate the burst mark. For images, choose one of three supplied directions: light statement, dark statement, or tactile object imagery with a localized Violet focal point. Avoid generic startup decoration, competing accents, visual clutter, and unsupported marketing claims. ## How to use this file - **For a text LLM:** attach this Markdown file, then describe your audience, deliverable, goal, and any facts it may use. - **For an image tool:** attach the relevant reference PNG and the original SVG logo alongside this brief. If the tool accepts only images, paste the “Start here” paragraph plus the matching image prompt below. - **For the complete ZIP:** extract it first if the tool cannot read archives. The brief is at the root; images are in `references/`; logos are in `logos/`. - **For exact branded output:** image models may distort lettering and logo geometry. Generate the scene or composition first, then place the original SVG and typeset the supplied copy in a design tool. If exact asset placement is unavailable, leave clean space for the logo instead of fabricating it. - **Task-specific direction:** the owner’s explicit brief determines the deliverable. If a new request conflicts with these guidelines, surface the conflict rather than silently inventing a new brand rule. ## 1. Brand foundation **Name:** Ortha Studio. **Domain / visual text:** `ortha.studio`. **Positioning:** an independent design and engineering studio building websites, custom software, and AI workflows for mid-market teams in the US and Europe — delivered on retainer, by the people who actually do the work. **What matters:** 1. **No hand-off.** The people who scope the work build it. 2. **Retainer-led.** Continuous improvement, not only a one-off launch. 3. **Engineered.** Design decisions must survive production. **Values as behaviours:** - **One loud thing:** let the mark, the color, or the headline carry the energy. Never make all three compete. - **Show the build:** share working progress; working links beat status updates. - **Own the outcome:** scope is a promise; do not disappear after launch. - **Quietly excellent:** let the work speak louder than self-promotion. **Vision:** “A studio where design and engineering are one conversation, not two invoices.” This guides internal decisions; do not automatically turn mission/vision text into a website hero. ## 2. Voice and messaging Write like a senior engineer speaking to a founder they respect. Be clear, calm, concrete, and brief. Use technical terms when they help. Explain the work and its practical result. Use sentence case. Avoid inflated adjectives, jargon, hype, vague transformation claims, and self-congratulation. Examples from the supplied artwork: - “Your website has a job to do.” - “Looking good is the start. Here’s what comes next.” - “Design and engineering. One conversation.” Useful tone: “A clearer booking flow. Fewer steps between interest and enquiry.” Avoid: “We craft revolutionary digital experiences that transform your business.” Never invent client names, testimonials, project results, awards, conversion metrics, prices, or delivery guarantees. Numeric examples in a guideline are not evidence of actual client performance. Use only facts supplied for the task. ## 3. Color system Use these exact HEX values for flat graphics and interfaces. Lighting and materials may vary in photographic renders; do not redefine the palette by sampling shadows or highlights from those renders. | Token | HEX | Role | | --- | --- | --- | | Ortha Ink | `#01011A` | Main dark ground and primary text | | Ortha Violet | `#4500F9` | Signal, active state, one primary action or focal point | | White | `#FFFFFF` | Light ground and text on dark surfaces | | Paper | `#E1E4E1` | Quiet ground, structure, supporting surfaces | | Deep Blue | `#0A1E8F` | Alternate dark ground; light statement reference uses blue headline text | | Iris | `#8762FA` | Supporting accent | | Lilac | `#CD82FF` | Supporting accent, including against Deep Blue | | Graphite | `#6E7370` | Secondary type where contrast permits | **Hierarchy:** the source specifies 60% ground, 30% structure, and 8% signal; the remaining approximately 2% is support. Treat this as a hierarchy guide, not a literal pixel quota for every photograph. One ground and one dominant signal per view. A statement poster can use no Violet at all. **Supporting/status palette:** Signal Red `#E5484D`, Orange `#FF6B2C`, Amber `#FFB224`, Yellow `#FFE44D`, Green `#30A46C`, Teal `#17B0BF`, Sky `#3B9EFF`, Pink `#FF5FA2`. Reserve these for status, data, categories, or illustration. They are not logo colors or full-page grounds. Keep them below 10% of a layout and set Ink on top. Red/Amber/Green grounds read as system alerts. **Pairing rules:** - Use Ink on White/Paper; White on Ink; White on Violet. - Pair a Deep Blue ground with White or Lilac, not Violet. - Avoid Violet text on Ink and White text on Lilac. - Graphite on Paper and White on Iris are large-text-only pairings in the source contrast table; use stronger pairings for small text. - For flat gradients: two approved stops, 135° by default. Approved pairs are Ink → Violet, Violet → Lilac, and Violet → Iris. Use sparingly on large grounds, never on type, behind body copy, or beneath the primary logo. ## 4. Typography and layout **Display:** Neue Einstellung, licensed. Used for headlines, section titles, and display numbers. Light, Regular, Medium, Bold. The source guidelines use Inter as a stand-in until the licensed face is installed; use Inter when the font file is unavailable. Do not claim that a raster reference proves which font was used. **Text/UI:** Inter Regular, Medium, Semi Bold. Body, interface, labels, tables, data. Enable tabular figures for aligned numeric columns. **Machine output:** JetBrains Mono Regular, Medium, Bold. Code, paths, terminal output, versions, ticket references. Not a general marketing or paragraph face. Code-editor ligatures may be enabled; elsewhere use literal characters. | Style | Size / line height / tracking | Face | | --- | --- | --- | | H1 | 72 px / 100% / −2% | Neue Einstellung or Inter fallback | | H2 | 40 px / 110% / −1.5% | Neue Einstellung or Inter fallback | | H3 | 28 px / 120% / −1% | Neue Einstellung or Inter fallback | | Body large | 18 px / 150% / −0.5% | Inter | | Body | 16 px / 150% / −0.5% | Inter | | Caption | 14 px / 140% / 0% | Inter | | Label | 12 px / 130% / +9%, uppercase | Inter | These are website reference sizes, not a requirement to set a 2160 px poster headline at 72 px. Scale typography to the output and preserve hierarchy. Use Medium for headings, Regular for body; emphasize with weight. Cap paragraph measure at 75 characters. Avoid justified body copy, long centred passages, and decorative letterspacing on lowercase words. Small uppercase labels are appropriate. **Layout:** work on an 8 px spacing baseline. Desktop ≥1440: 12 columns, 24 px gutters, 80 px outer margins. Tablet 768–1439: 8 columns, 20 px gutters, 40 px margins. Mobile <768: 4 columns, 16 px gutters, 20 px margins. Keep edges aligned and leave real breathing room. **Social formats:** 1080×1080 feed, 1080×1350 portrait, 1080×1920 story, 1200×627 LinkedIn. The supplied PNGs are 2160×2700, a 4:5 portrait at twice the 1080×1350 output. The formal social template calls for a 64 px safe margin at 1080 px width; scale margins proportionally. Match the references’ generous spacing rather than filling every available area. ## 5. Logo assets and usage The burst is a supplied piece of artwork, not a generic starburst. It represents output, signal, and ignition. Preserve the diagonal cut, stroke shapes, proportions, spacing, and orientation by placing the original asset. Do not recreate it with text, an icon library, hand-drawing, or a generated approximation. | Supplied filename | Contents | | --- | --- | | `ortha full black.svg` | Full horizontal logo, black; 1000×300 canvas | | `ortha full white.svg` | Full horizontal logo, white; 1000×300 canvas | | `ortha logo.svg` | Standalone burst, black; 1080×1080 canvas | | `ortha logo (1).svg` | Standalone burst, white; 1080×1080 canvas | The original black SVG fill is `#010101`; the brand Ink token is `#01011A`. Preserve original SVG artwork rather than silently recoloring the files. **Primary lockup:** horizontal, at least 160 px wide digitally or 30 mm in print. Clear space on all sides equals the cap height of the O. There is no approved stacked primary lockup. **Standalone mark:** at least 24 px digitally or 8 mm in print, with half the mark height as clear space on each side. Use where the lockup will not fit or the brand is already established. Favicons are a special compact use of the mark alone. **App icon:** the mark occupies 56% of the canvas, optically centred. Follow platform corner shape. Ink is the default ground. Never stretch, rotate, re-space, add outlines, shadows, glows, or gradients to the primary logo. Avoid busy grounds. A watermark or logo applied to a photographed object is a secondary expressive use, not a replacement for the exact primary lockup. ## 6. The three supplied visual directions These observations describe the owner's supplied artwork. They are concrete art-direction references, not evidence of new universal brand rules. Use the original PNGs to match composition and mood. ### A. Light statement — `Post02.png` - 4:5 portrait, White ground, blue statement typography, Ink masthead and footer, muted category label. - Small `ortha.studio` at top-left; `STATEMENT` at top-right. - Oversized, left-aligned headline in the upper half: “Your website has a job to do.” - Supporting copy: “Looking good is the start. Here’s what comes next.” - Large, very pale burst in the lower-left area. It remains subordinate to the words and does not run behind the body copy. - Footer: `DESIGN & ENGINEERING` at left; `SWIPE TO EXPLORE ↗` at right. - The feeling is quiet, spacious, direct, and editorial. Flat color; no decorative shadows, gradients, or extra graphic motifs. ### B. Dark statement — `Post03.png` - Same 4:5 family, Ink ground, White statement typography, subdued gray label. - Top-left masthead and top-right `STATEMENT` label. - Large, left-aligned “Design and engineering. One conversation.” with deliberate short line breaks. - A low-contrast burst occupies the lower-left space without competing with the headline. - Footer: `DESIGN & ENGINEERING` and `STUDIO NOTES`. - Strong contrast, generous empty space, no Violet needed. The headline is the loud element. ### C. Tactile object visual — `Post01.png` - 4:5 portrait with a macro view of sculptural keyboard keys. - One raised Violet key is the focal object; neighboring keys are black and white. - Oblique camera angle, convincing material texture, shallow depth of field, dark surroundings, and localized Violet light. - The supplied burst appears on the key’s top; Ortha Studio lettering appears on its side. Neighboring legends include “Create”, “your”, and “edge”. - Quiet top-left `ortha.studio` masthead and top-right `VISUALS` label. - The material object carries the energy. Do not add a huge competing headline, multicolor neon, chrome ornaments, or a second hero object. **How to resolve apparent differences:** the supplied posters use a large faint watermark, while the formal social template describes a small bottom-left mark. The object reference also uses perspective and lighting on a physical surface. Follow the supplied reference when reproducing that specific campaign direction; follow the formal primary-logo rules for headers, documents, and logo exports. Do not turn an expressive treatment into a redesigned logo. Pixel-like keyboard legends are object details, not a new marketing typeface. Some older application boards mention Geist; the dedicated type chapter specifies Neue Einstellung, Inter, and JetBrains Mono for the current type system. ## 7. Ready-to-use prompts ### Writing prompt Using the attached Ortha Studio brand context, write three concise headline and supporting-copy options for a post about why a business website needs a clear purpose. Speak to founders and growing teams. Be direct, specific, calm, and useful. Use sentence case, no hype, and no invented metrics or client claims. Keep each headline under 12 words and each supporting passage under 30 words. Explain the practical idea in plain language. Return the copy only. ### Light statement image prompt Create a 4:5 portrait statement graphic for Ortha Studio, using the attached Post02.png as the composition reference. White ground, Deep Blue #0A1E8F headline, Ink #01011A masthead and footer, generous margins, disciplined left alignment. Set the exact headline “Your website has a job to do.” prominently in the upper half, with the supporting copy “Looking good is the start. Here’s what comes next.” below. Use Neue Einstellung Medium if supplied, otherwise Inter Medium; Inter Regular for the supporting line. Place small ortha.studio at top-left and STATEMENT at top-right. Keep a large, very faint burst in the lower-left area using the attached original mark, leaving text unobstructed. Footer: DESIGN & ENGINEERING at left and SWIPE TO EXPLORE ↗ at right. One clear hierarchy, no invented decoration. Preserve the reference’s whitespace. If exact lettering or logo placement cannot be preserved, produce the clean background/composition with reserved areas for later typesetting and SVG placement. ### Dark statement image prompt Create a 4:5 portrait Ortha Studio statement graphic using attached Post03.png as the composition reference. Flat Ink #01011A ground with White typography. Large, left-aligned headline: “Design and engineering. One conversation.” Use confident sans-serif type, short deliberate line breaks, and generous empty space. Small ortha.studio at top-left, STATEMENT at top-right in a subdued tone. Place the exact supplied burst as a very low-contrast secondary watermark in the lower-left area, separate from the words. Footer: DESIGN & ENGINEERING at left, STUDIO NOTES at right. Quiet, editorial, precise. No extra colors or visual effects. If the tool cannot place the logo and words accurately, leave those areas clean for final composition. ### Object image prompt Create a 4:5 portrait macro image for Ortha Studio, guided by attached Post01.png. A single raised Violet #4500F9 keyboard key is the focal object among black and white keys. Oblique close camera, tactile keycap surfaces, realistic edge reflections, shallow depth of field, an almost-black Ink environment, and concentrated Violet illumination. Reserve the upper band as a quiet area for a small masthead. The image should feel precise, physical, and considered. Keep one focal object and restrained color. Use the attached burst artwork as a faithful surface decal only if the tool can preserve it; otherwise leave the top face and side clean so the original logo and Ortha Studio lettering can be composited afterward. Do not invent a starburst or an alternative wordmark. Do not add a giant headline or unrelated tech symbolism. **Avoid for all image prompts:** random starbursts, distorted logos, fake type, illegible extra text, rainbow gradients, decorative glass panels, unrelated neon, generic AI brains or robots, stock handshake imagery, dense dashboards as decoration, multiple competing focal points, invented client brands, and automatic recoloring of the original logo files. Natural lighting in an object image is allowed; a glow applied to the flat logo is not. ## 8. Before delivering an asset - Is the audience and single message clear? - Does one element carry the energy? - Are flat brand colors exact and small text readable? - Are original logo geometry and appropriate clear space preserved? - Are headlines and body text set in the approved type system or its disclosed fallback? - Does the format match the requested output with safe margins and intentional line breaks? - Does the image match the chosen reference direction without combining all three styles at once? - Are all claims supplied facts rather than invented proof? - Have you identified anything still needing exact typesetting or logo compositing? ## Sources and package contents Primary source: Ortha Studio’s supplied brand guidelines. The written system above draws on the 48-board guidelines used to build Ortha’s brand identity page. The three reference PNGs and four SVGs were supplied directly by the brand owner. Observations of the PNGs are marked as visual directions; prompts are reusable applications of those directions, not additional facts about the business. Complete kit layout: ```text ortha-brand-context.md references/Post01.png references/Post02.png references/Post03.png logos/ortha full black.svg logos/ortha full white.svg logos/ortha logo.svg logos/ortha logo (1).svg ``` The standalone Markdown file contains the written context, not embedded image or font data. Attach the relevant original images and logos for visual fidelity. Licensed Neue Einstellung files are not included.