Skip to main content

Design system

Scoutello should feel warm, capable, and product-focused. The preferred look is light, generous, rounded, and editorial: clear content first, then subtle brand color, soft surfaces, and calm motion that makes the product feel responsive without becoming decorative noise.

The marketing landing page is the clearest public reference for the current visual direction. Product surfaces should reuse the shared design tokens where possible and only become more expressive when the surface is explicitly brand or marketing oriented.

Logo and Brand Assets​

Use the Scoutello logo from the public docs asset URL when an agent, integration, or generated page needs a reusable brand mark:

Prefer the SVG version for crisp rendering across screen sizes. Use the PNG version when a tool or destination cannot handle SVG. Keep enough clear space around the mark, avoid stretching or recoloring it, and place it on white, warm cream, or other calm surfaces that preserve contrast.

Brand colors​

Primary color: #ff8d49

Use the primary orange for the Scoutello accent color: primary calls to action, focused states, active navigation, small icon backgrounds, highlight text, soft glows, and warm gradients. In product code this maps to --primary: 24 100% 64% and Tailwind classes such as bg-primary, text-primary, border-primary/15, and shadow-primary/10.

Secondary color: #145466

Use the secondary deep teal as a grounding color. It works best in gradients with the primary orange, dark call-to-action panels, visual depth, and occasional high-emphasis brand moments. It should not replace primary orange as the default action color.

Supporting colors:

  • Warm cream backgrounds: #fff8f1, #fff4ea, #fcf6f1, and soft orange-50 / amber-50 surfaces.
  • Product neutrals: white cards, dark foreground text, muted text around 70-75% opacity, and light borders.
  • Tertiary blue: hsl(205 100% 51%) is available as a supporting token, but should be used sparingly so orange and teal stay recognizable as the brand pair.

Visual Style​

Prefer a clean, premium SaaS look with enough warmth to avoid feeling generic. The landing page combines cream mesh backgrounds, white cards, large product screenshots, rounded corners, and restrained gradients.

Use:

  • Rounded cards and panels, often from rounded-2xl to rounded-[2rem].
  • Soft borders such as border-primary/10, border-primary/15, ring-black/5, and light neutral borders.
  • Layered white or cream surfaces instead of heavy colored blocks.
  • Subtle shadows like shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, or custom low-opacity shadows.
  • Large product screenshots or UI mockups as proof, especially for marketing and feature storytelling.
  • Small brand moments such as orange highlight text, icon chips, rings, glows, and gradient CTAs.

Avoid:

  • Loud full-page orange backgrounds.
  • Overusing teal for ordinary controls.
  • Dense, cramped layouts.
  • Harsh shadows, sharp rectangles, or cold monochrome dashboards.
  • Decorative motion that competes with reading or task completion.

Typography​

The marketing site uses:

  • Space Grotesk for display headlines through the landing-display class.
  • Manrope for marketing body text.

Shared app and docs surfaces use system-aligned UI typography, currently closer to Inter. The style goal is consistent across surfaces: confident headings, tight headline tracking, readable body copy, and generous line height.

Headline guidance:

  • Use large, balanced headings on marketing pages.
  • Highlight only the important phrase with primary orange.
  • Keep line length controlled with max-w-* and text-balance where available.

Body copy guidance:

  • Keep paragraphs calm and direct.
  • Use muted foreground text for descriptions, usually text-foreground/70 or text-foreground/75.
  • Prefer scannable sections, short paragraphs, and clear labels.

Layout and Spacing​

Layouts should feel spacious and stable. The landing page uses a max-w-7xl container with responsive horizontal padding and large vertical sections.

Common patterns:

  • Section padding around py-16, py-20, or larger for major marketing sections.
  • Cards arranged in responsive grids with consistent gaps.
  • Hero sections with a strong left content column and product screenshots or device compositions on the right.
  • Centered section headers for broad product promises; left-aligned headers for story or workflow sections.
  • Mobile-first layouts that stack cleanly before becoming multi-column on larger screens.

Use whitespace as part of the design. If a section feels unclear, simplify the content and increase breathing room before adding more decoration.

Components and Surfaces​

Scoutello surfaces should feel tactile but lightweight:

  • Buttons: rounded pills for prominent marketing CTAs; standard product buttons elsewhere.
  • Cards: white or cream, rounded, bordered, and lightly elevated.
  • Icons: small, simple line icons in orange-tinted chips.
  • Stats and trust elements: restrained cards with orange-tinted borders or gradients.
  • Forms: clear labels, direct helper text, and enough spacing for mobile use.
  • Screenshots: large, crisp, and slightly elevated. Use them as concrete evidence of the product.

When building product UI, start from existing shared UI components and tokens rather than custom one-off styling. When building marketing UI, use the landing primitives and landing classes where they fit.

Motion​

Motion should make the interface feel polished, not busy. The landing page uses short reveal animations, device rise effects, glow bloom effects, and small hover lifts.

Preferred motion:

  • Reveal up from 12-24px with soft opacity.
  • Hover cards lifting by only a few pixels.
  • CTA hover states that slightly lift and deepen the shadow.
  • Staggered section entrances where they support narrative scanning.

Always respect reduced-motion preferences. Avoid animations that can hide content, block interaction, or feel required for understanding the page.

Voice and Content Design​

The visual system works best with direct, concrete copy. Prefer language that explains what an organization can publish, manage, or automate in Scoutello.

Use:

  • Product-specific nouns: landing pages, tiles, tours, events, organizations, dashboard, guests, QR codes, translations.
  • Outcome-oriented descriptions that connect guest experiences with operator workflows.
  • Gender-neutral language in German and other localized copy.

Avoid:

  • Vague platform language without examples.
  • Overly formal enterprise jargon.
  • Long paragraphs where a scannable section would work better.

Practical Rules​

  • Use #ff8d49 as the main brand accent and #145466 as the secondary grounding color.
  • Prefer tokenized classes (primary, secondary, foreground, muted, border) over hard-coded colors in product surfaces.
  • Keep marketing pages warm, spacious, rounded, screenshot-led, and lightly animated.
  • Keep dashboard and operational surfaces calmer, denser only where necessary, and more task-focused.
  • Let customer-owned guest experiences support organization branding where the product already exposes branding controls, but keep Scoutello-owned surfaces aligned with this system.

Related concepts: Routes and surfaces, Landing pages and tiles, Browser-first guest experiences.