# INDE DIGITAL — Brand system v1.0

Ideas Into Impact. Prepared 29 September 2026.

## Positioning

INDE DIGITAL is a digital growth partner connecting strategy, creativity, performance marketing and purposeful automation. It sits between a creative studio, growth partner and digital systems lab. Lead with the business challenge and the human idea. AI belongs inside the capability set.

Primary audience: founders and business decision-makers at startups, SMEs, B2B and D2C companies. Agriculture, pharma and life sciences, technology, education and professional services are audience contexts, not claims of completed client engagements.

## The creative idea: FLOW

The mark represents an idea. Movement represents execution. The destination represents impact. Apply this through connected layouts, restrained curves and purposeful transitions. A flowing line should connect information or direct attention; it should never exist solely as decoration.

The supplied orange symbol remains the source of truth. This v1 provides a smooth vector trace of its silhouette, preserving the dot, connected loops, counters and rising terminal. The work standardises colour, logo lockups, typography, clear space and digital behaviour. It does not replace the original with a new monogram. A future optical refinement should be compared with the original at actual size before replacing this master.

## Logo family

- Primary: stacked colour lockup, orange symbol with navy Manrope wordmark.
- Secondary / navbar: horizontal colour lockup.
- Compact: symbol only.
- Wordmark: INDE in ExtraBold; DIGITAL in Regular.
- Colour variants: colour, orange, navy, black, white/reversed.
- Footer: orange symbol and white wordmark on navy.
- Avatar: orange symbol centred on a navy square.
- Favicon: orange symbol on navy tile, supplied at 16, 32, 64 and 180px.

SVG lettering is outlined, so exports do not depend on a locally installed font. PNG versions have transparency except deliberately coloured applications. Preserve the SVG viewBox and aspect ratio. Do not stretch or skew the logo.

Clear space: at least the height of the separate dot around the visible mark or complete lockup. Clear space is measured from the visible artwork, not the export's canvas edge. Keep competing text outside this area.

Digital minimums: horizontal logo 160px wide; stacked logo 160px wide; wordmark 120px wide; symbol ideally 48px wide or larger. Use the supplied favicon tile below 32px. At 16px the silhouette carries recognition; use accompanying text when the brand name must be understood. Do not put the full wordmark in a favicon.

Print: use SVG in a vector-aware layout application; obtain a printer proof at final size. PNG is for routine office and screen use. Do not assume PNG is a press-ready file.

Do not add drop shadows, bevels, outlines, glow or gradients. Do not reconstruct the symbol with a different font. Do not replace it with an infinity sign, brain, rocket, circuit, generic D or upward arrow.

## Colour

| Role | HEX | RGB | Approximate CMYK % |
|---|---|---|---|
| Energy / primary orange | #FF6200 | 255, 98, 0 | 0, 62, 100, 0 |
| Trust / primary navy | #0B2347 | 11, 35, 71 | 85, 51, 0, 72 |
| Clarity / white | #FFFFFF | 255, 255, 255 | 0, 0, 0, 0 |
| Off white | #F7F7F5 | 247, 247, 245 | 0, 0, 1, 3 |
| Soft orange | #FFF0E8 | 255, 240, 232 | 0, 6, 9, 0 |
| Supporting grey | #667085 | 102, 112, 133 | 23, 16, 0, 48 |
| Accessible large orange text | #E85600 | 232, 86, 0 | 0, 63, 100, 9 |

The older supplied kit specified #FD5F03. This system follows the newer brief's #FF6200. Do not alternate between those oranges in new work.

Aim for 80% clean space, 15% navy and 5% orange across a composition. This is a balance guide, not a literal pixel requirement. A focused navy case-study panel or social tile is appropriate.

Calculated sRGB contrast: navy/white 15.61:1; navy/orange 5.20:1; white/orange approximately 3.00:1; supporting grey/off white 4.64:1. Avoid white body text on orange. Use navy labels on orange buttons or white labels on navy. Primary orange on off white does not meet the 3:1 large-text threshold; #E85600 on off white provides 3.40:1 and is used for large orange website headlines. For small orange text, use #BF4900 or navy and verify against the actual surface.

CMYK figures are simple mathematical approximations, not calibrated press values. Profile, paper and ink affect the result. Ask the printer to proof the orange; choose a spot colour only after physical comparison.

## Typography

Manrope is the only brand family. Self-host the variable webfont. Use the supplied SIL Open Font License when redistributing the font.

| Use | Weight | Desktop / mobile | Line height | Tracking |
|---|---|---|---|---|
| Hero | 800 | 120–164px / 58–100px | 0.99 | −0.06em, optically checked |
| Section heading | 700 or 600 | 48–76px / 35–55px | 1.12 | −0.04em |
| Subheading | 600 | 24–32px / 22–26px | 1.25 | −0.02em |
| Navigation | 500–600 | 14px / 14px | 1.5 | 0 |
| Body | 400 | 18–22px / 16–18px | 1.65 | 0 |
| Secondary metadata | 500 | 12–13px | 1.6 | +0.04em |

Use short, sentence-case headlines. Uppercase is reserved for brief labels and capability lines. Keep paragraphs within roughly 55–75 characters per line. Avoid excessively tight line spacing in multi-line body copy. Never compress letter spacing until characters overlap.

## Layout and UI

Desktop uses a 12-column proportional grid. Common spans: label 4 + content 8; paired narrative 6 + 6; process 3 + 3 + 3 + 3. Use 24px mobile gutters, expanding to roughly 4.3vw on desktop. Spacing scale: 8, 12, 16, 24, 32, 48, 64, 96, 112px.

Use off white for the page, white for quiet editorial sections and navy for a deliberate change of pace. Keep service content in generous ruled rows rather than a wall of cards. Use 1px light-grey dividers, modest 2–4px corners and minimal shadows.

Buttons: navy fill, white text, 44px minimum touch height. A rightward or diagonal arrow can reinforce an intended action, following the supplied brief. Hover raises the button by at most 3px. Visible focus uses a 2px orange outline with separation from the control.

Forms: persistent labels, visible required indicators, native email validation, accessible grouping and explicit feedback. Never show a sent/success state unless a real delivery service has accepted the enquiry. The current preview downloads a local brief and clearly states that nothing is sent.

Navigation: Work, Services, About, Insights, Contact. Mobile uses a labelled Menu button, a disclosed navigation list and keyboard-accessible links. Footer repeats navigation and offers motion control.

## Graphic and motion language

Use the dot sparingly. Curves should feel like a continuation of the mark. Arrows are simple line or typographic arrows, not a separate illustration style. Icons use one consistent line weight.

Interaction timings: 180–240ms for controls; around 600ms for a reveal; up to 1,500ms for the logo entrance or process line. Ease out smoothly. Move elements by small distances. Animate transforms and opacity wherever possible.

The hero introduces the real symbol. Desktop pointer movement tilts it by no more than three degrees. The process line draws once when the section enters view. Work artwork responds subtly to hover. There are no unverified number counters.

No scroll hijacking, blocking loader, auto-playing audio or perpetual essential motion. Honour prefers-reduced-motion and the user's motion toggle. The information must remain visible and understandable with motion disabled.

## Voice

Smart, direct, human, curious and quietly confident. Write like a strategist speaking to a founder. Explain what changes for the business. Prefer concrete verbs and short copy.

Examples: “We build. We test. We learn.” / “Good ideas. Better execution.” / “Let’s make something matter.”

Avoid “unlock the power”, “cutting-edge”, “one-stop solution”, “unparalleled synergy” and unsupported superlatives. Use AI terminology only when it explains a real capability or decision. Do not invent size, awards, client logos, testimonials or results.

## Applications

Actual SVG and PNG templates are included for: LinkedIn banner (1584×396), square post (1080×1080), story (1080×1920), presentation cover (1920×1080), proposal cover (794×1123), business card front/back (1050×600), and avatar (800×800).

Keep story content inside the central safe area. Preview social uploads in the platform before publishing, since crop behaviour can vary. For business cards, use a 3.5×2in trim size; add the printer's required bleed, typically 3mm, before press output. Current templates are artwork, not imposed press files.

Additional specifications:

- YouTube banner: 2560×1440 artwork, with essential mark and headline within the central 1546×423 safe area. Navy type, off-white ground, restrained orange mark.
- Open Graph card: 1200×630. Horizontal logo top left; “Ideas Into Impact.” as the principal message; no more than one supporting line. Render a PNG/JPEG and set an absolute production URL only after the production domain is known.
- Letterhead: A4, 20mm margins; horizontal logo 45mm wide at top left; navy body at 10.5–11pt; small verified contact line at the foot; one orange rule.
- Email signature: supplied HTML template, name and role above verified contact information. Replace every bracketed field before use. Keep images optional for email-client compatibility.
- Proposal cover: replace client, project and date fields. Presentation cover uses the same grid. Both are editable vector artwork, not a completed proposal or presentation deck.

## Website information architecture

Homepage: hero → difference → studio work → four capabilities → belief → four-stage process → audience sectors → three perspectives → project brief → footer.

Brand guide: idea → logo family → colour and contrast → type → graphics and motion → applications.

The work data model supports challenge, insight, idea, what we built, execution, results, impact and sourced metrics. The current example is INDE's own identity in development, not a fabricated client project. Original insight copy is proposed editorial content for owner review.

## Reference study

Reviewed 29 September 2026. These references inform craft, never provide borrowed assets or templates.

- [Locomotive](https://locomotive.ca/en): bespoke digital identities, work-led structure and an expressive relationship between design and code. Apply the integrated thinking, without copying its visual signatures.
- [ustwo](https://ustwo.com/): clear human-centred positioning, readable stories and technology tied to people’s needs. Apply the clarity and conversational confidence.
- [BASIC/DEPT®](https://www.basicagency.com/): work-led storytelling and an explicit relationship between culture and business value. Apply the editorial confidence and disciplined framing.
- [Webenza](https://www.webenza.com/): a broad expertise and service structure. For INDE, keep detailed service lists behind concise capability summaries.
- [Schbang](https://www.schbang.com/): a large-scale integrated agency story. For INDE, lead with its own way of working, without borrowing scale claims.

## Before public launch

Owner approval of brand and copy; verified business/contact details; approved case studies and evidence; live enquiry delivery, spam protection and privacy wording; production domain, canonical URLs and social metadata; final browser and accessibility review. Remove preview noindex only when approved for search indexing.

The delivered website is a working local preview. It has no marketing analytics, external form transmission or connected CMS. It provides typed content structures ready for a future CMS adapter. Its source and pre-rendered production output are included.