Design System

Design principles and guidelines for all Frontira documents and presentations

General Guidelines

Core brand elements that apply to all document types

Brand Foundation

Mission

Our Mission: Liberating intelligent people from unintelligent processes.

Brand Personality

Expert

We know AI & automation deeply

Clear

We explain complex things simply

Confident

We deliver results, not promises

Human

Technology serves people, not the other way around

Logo

Logo Versions

Use the appropriate logo version based on the background color.

Purple Logo — For light backgrounds

assets/frontira-logo-purple.svg

White Logo — For dark/purple backgrounds

assets/frontira-logo-white.svg

Usage Rules

Always use the actual logo image, never type "Frontira" as text
Cover pages: White logo on purple gradient
Content pages: Purple logo in header (14px height)
Contact pages: White logo on purple gradient
Minimum clear space: Height of the "F" on all sides

Design Principles

1. Clarity Over Cleverness

Every element should serve a purpose. Remove anything that doesn't add value. If it needs explanation, simplify it.

2. Structure Creates Trust

Consistent layouts across all materials. Clear visual hierarchy guides the eye. White space is not wasted space.

3. Show, Don't Tell

Use diagrams over paragraphs. Real examples over abstract concepts. Data over adjectives.

4. Professional Warmth

Purple adds energy without being aggressive. Photography of real team, not stock. Patterns add life without distraction.

Color System

Primary Colors

Purple

#6F43D5

Purple Light

#8B5CF6

Purple Soft

#E8E3F3

Cyan

#8BDDD3

Acid Yellow

#EAFF95

Neutral Colors

Black

#292929

Gray

#666666

Gray Light

#999999

Off-white

#F8F8F8

Usage Guidelines

Light mode (default):

Background: White or Off-white
Text: Black (#292929)
Accents: Purple, Cyan

Dark sections (cover, contact):

Background: Purple gradient or Black
Text: White
Accents: Acid Yellow, Cyan

Typography

Font Family

Poppins — Modern, geometric, highly readable. Used across all documents.

Font Weights

Light (300) — Large display text, taglines

Liberating intelligent people

Regular (400) — Body text, descriptions

We help organizations implement practical AI solutions that deliver measurable results.

Medium (500) — Subtle emphasis

AI-powered automation for tourism organizations

Semibold (600) — Headings, labels

Project Goals

Bold (700) — Logo, key numbers

€25.000

Spacing System

Based on 4px grid. Use consistent spacing throughout all documents.

4px

8px

16px

24px

32px

48px

Token	Value	Usage
`space-1`	4px	Tight spacing
`space-2`	8px	Related elements
`space-4`	16px	Standard gap
`space-6`	24px	Section spacing
`space-8`	32px	Large sections
`space-12`	48px	Page sections

Visual Assets

Team Photos

Use circular crop for all team photos. Show name and role below each photo.

Joanna Bakas

Managing Partner

Stefan Erschwendner

Managing Partner

Sophie Schindele

AI & Automation

Fabiola Corisi

AI & Automation

Peter Riegersperger

AI & Automation

Context	Size	File
Documents	48px	`assets/team-{name}.png`
Presentations	100px	`assets/team-{name}.png`
Carousels	80px	`assets/team-{name}.png`

Client Logos

Display client logos in grayscale with reduced opacity. Use grid layout with equal columns.

Filter: grayscale(100%)
Opacity: 60%
Layout: Grid with equal columns (ensure equal number per row)
Files: assets/client-logo-{name}.svg

Patterns

Each document gets a unique pattern generated for cover and contact pages.

Pattern Example

Cover Page Background

Opacity on cover: 15%
Reuse same pattern on contact page
One unique pattern per document

Components

Cards

Use cards to group related information. Default background is light gray, highlight cards use light purple.

Default Card

Background: #F8F8F8, border-radius: 8px, padding: 20px

Highlight Card

Background: #E8E3F3 — Use for key information

Tables

Use light gray header background. No vertical borders.

Phase	Duration	Focus
Discovery	1 week	Requirements gathering
Build	3 weeks	Development & testing
Launch	1 week	Deployment & handover

Buttons

Use purple gradient for primary CTAs. Secondary buttons use light gray.

Blockquotes

Use for mission statements, key quotes, or vision statements.

The Vision: Launch a handpicked cohort of AI innovators and build a network of "go-to AI people" with hands-on experience.

Writing Style

Punctuation Rules

Do

Use colon (:) as separator between label and description

Example: "Phase 1: Discovery"

Don't

Never use em dash (—) in text

Wrong: "Phase 1 — Discovery"

Do

Use comma (,) for mid-sentence pauses

Example: "We build solutions, not presentations"

Don't

Don't use em dash for pauses

Wrong: "We build solutions — not presentations"

Content Guidelines

Every h3 heading should have intro text (1-2 sentences) below it
Mix content types: paragraphs, bullet points, boxes, tables, blockquotes
Don't overuse boxes or tables, they lose impact when overused
Use flowcharts to visualize processes when possible
Maximum 60% text coverage per page

Document Types

Specific guidelines for each document format

Proposals & Offers

A4 Portrait documents for proposals, offers, reports, and contracts. Format: 210mm × 297mm

Page Structure

Cover
Page

Executive
Summary

Content
Pages

About
Frontira

Contact
Page

Page Type	Background	Page Number
Cover	Purple gradient + pattern	None
Executive Summary	White	2
Content Pages	White	3, 4, 5...
About Frontira	White	Second-to-last
Contact	Purple gradient + pattern	None

Page Layout

Margins: 20mm top/bottom, 24mm sides
Header: "Client – Project" (left) | Frontira logo (right)
Footer: Page number only (right)
Content coverage: Maximum 60% text per page

Typography Scale

Element	Size	Weight
Cover title	42px	Semibold (600)
Section heading (h2)	18px	Semibold (600)
Subsection (h3)	13px	Semibold (600)
Body text	11px	Regular (400)
Captions	9px	Regular (400)

Quality Checklist

Content

Client name spelled correctly
Date is current
All placeholder text replaced
Contact details correct
Disclaimer present

Layout

Logo images used (not text)
Unique pattern generated
Cover page has no page number
No orphan headings
Page breaks are clean

Presentations

16:9 Landscape slides for pitch decks, workshops, training, and client meetings. Format: 960px × 540px

Design Principles Applied

Every presentation slide must embody our four core principles:

1. Clarity Over Cleverness

One idea per slide, no exceptions
If you need to explain the slide, simplify it
Remove decorative elements that don't add meaning
Use plain language, avoid jargon

2. Structure Creates Trust

Consistent title position on every slide
Same margins and padding throughout
Predictable flow: Title → Content → Contact
White space signals confidence

3. Show, Don't Tell

Replace paragraphs with diagrams
Use real screenshots, not descriptions
Numbers and data over adjectives
Before/after visuals over explanations

4. Professional Warmth

Purple gradient for energy, not aggression
Real team photos on contact slides
Patterns add life without distraction
Friendly but not casual tone

Slide Types

Title Slide

Statement

Mission

Content

Contact

Slide Type	Background	Usage
Title	Purple gradient + pattern	Opening slide with presentation title
Statement	White	Key message, single powerful line
Mission	Black (#292929)	Mission statement or bold claim
Content	White	Bullets, diagrams, tables, data
Contact	Purple gradient + pattern	Closing slide with team photo

Content Rules

Apply "Clarity Over Cleverness" ruthlessly to every slide:

Do

One idea per slide
Maximum 6 bullet points
Maximum 40 words (excluding title)
Use sentence fragments for bullets
Lead with the conclusion

Don't

Multiple topics on one slide
Full paragraphs of text
Reading your slides aloud
Bullet points as complete sentences
Building up to the point

Visual Hierarchy

"Structure Creates Trust" means consistent, predictable layouts:

Element	Position	Alignment
Slide title	Top-left, 48px from edge	Left-aligned
Subtitle	Below title, 8px gap	Left-aligned
Main content	Center area, 48px margins	Left-aligned or centered
Page indicator	Bottom-right corner	Right-aligned
Logo	Bottom-left corner (content slides)	14px height

Visual Content Priority

"Show, Don't Tell" defines what content types to prefer:

1st

Diagrams

Process flows, architecture

›

2nd

Screenshots

Real interfaces, demos

›

3rd

Data/Charts

Numbers, comparisons

›

4th

Bullets

Only when necessary

›

Last

Paragraphs

Avoid if possible

Typography Scale

Element	Size	Weight	Color
Title slide heading	48px	Semibold (600)	White (on purple)
Slide title	32px	Semibold (600)	#292929
Subtitle	18px	Regular (400)	#666666
Body text	16px	Regular (400)	#292929
Captions	12px	Regular (400)	#999999
Data numbers	48px	Bold (700)	#6F43D5

Spacing & Layout

Slide margins: 48px on all sides
Title to content: 32px gap
Between bullets: 16px gap
Between sections: 48px gap
Logo height: 14px (content slides only)

Color Usage by Slide Type

Slide Type	Background	Text	Accents
Title	Purple gradient	White	Acid Yellow, Cyan, pattern at 15%
Statement	White	#292929	Purple for emphasis
Mission	#292929	White	Acid Yellow, Cyan
Content	White	#292929	Purple for headings
Contact	Purple gradient	White	Acid Yellow, Cyan, pattern at 15%

Animations & Transitions

Keep it professional. Animations should be invisible:

Slide transitions: None or simple fade (0.3s)
Build animations: Fade in only, no fly-ins
Never use: Bounces, spins, zooms, or any "clever" effects
Rule: If anyone notices the animation, it's wrong

Social Carousels

LinkedIn carousel posts for thought leadership and engagement. Format: 1080px × 1080px (square)

Slide Structure

Cover

Content 1

Content 2

Content 3

CTA

Contact

Slide	Background	Content
Cover	Purple gradient + pattern	Big promise + outcome
Content 1	White	Problem / context
Content 2	White	Core idea / approach
Content 3	White	How it works (3-5 bullets)
CTA	White	Next steps + call to action
Contact	Purple gradient	Team photo + contact info

Layout Elements

Brand bar: 48px height at bottom, contains logo + URL
Kicker: Small label above title (e.g., "Blended Team")
Pattern: 15% opacity on cover slide only
Safe zone: 40px padding on all sides

Typography Scale

Element	Size	Weight
Cover title	56px	Semibold (600)
Slide title	40px	Semibold (600)
Body text	24px	Regular (400)
Bullets	22px	Regular (400)
Kicker	16px	Medium (500)
Brand bar	14px	Medium (500)

Contact Slide

The final slide shows the contact person with their details.

Photo: 80px circular crop
Name: 24px Semibold
Role: 18px Regular, muted color
Email/Phone: 16px Regular
Background: Purple gradient, no pattern

Diagrams & Wireframes

Visual elements for explaining processes, systems, and interfaces.

Flowcharts

Use for sequential processes or journeys. Always include a header.

Participant Journey

Selection

Organization nominates team member

Sprint Week

5 days of hands-on building

Implementation

Deploy solution locally

Architecture Diagrams

Use for system or data flow visualization. Group related components with headers.

AI-Powered Guest Communication

Data Collection

Website

Phone

AI Processing

AI Agent

Knowledge Base

Output

Response

CRM

Wireframe Mockups

Use for showing interface examples. Always on its own page with h2 headline and explanation.

AI Guest Assistant

Your Digital Travel Assistant

Hello! How can I help you?

What hiking trails are available?

I recommend the nature trail...

Wireframe Structure

Browser chrome: dots + URL bar
Screen header: logo + title
Main content area
Screen footer: meta info

Pattern Generator

Unique contour patterns for documents and presentations. Each document gets a unique pattern generated from a seed value.

Interactive Tool

Use the Pattern Generator tool in the Frontira App to create and preview patterns interactively.

Open Pattern Generator →

Presets

Six built-in color presets for different use cases.

Preset	Outer Color	Inner Color	Background	Use Case
`frontira`	#6F43D5	#C5B7E7	#F8F8F8	Default, proposals
`cyan`	#6F43D5	#8BDDD3	#F8F8F8	Tech, innovation
`acid`	#6F43D5	#EAFF95	#292929	Dark mode, bold
`sand`	#292929	#D6CEC0	#F8F8F8	Neutral, corporate
`mono`	#292929	#EEF0F1	#FFFFFF	Minimal, clean
`invert`	#C5B7E7	#6F43D5	#F8F8F8	Alternative purple

API Endpoint

Programmatic pattern generation for automation and integrations.

Endpoint


          GET /api/generate-pattern

Authentication

API key required via header or query parameter:

X-API-Key: your-api-key header
?apiKey=your-api-key query parameter

Parameters

Parameter	Type	Default	Description
`seed`	integer	random	Seed for reproducible patterns
`preset`	string	frontira	Color preset name
`colorOuter`	hex	#6F43D5	Outer contour color
`colorInner`	hex	#C5B7E7	Inner contour color
`backgroundColor`	hex	#F8F8F8	Background color
`contourCount`	integer	40	Number of contour lines
`blobSize`	integer	180	Size of the pattern blob
`strokeWidth`	float	1	Contour line thickness
`width`	integer	600	SVG width in pixels
`height`	integer	600	SVG height in pixels

Example Requests

GET Request (returns SVG image)

GET /api/generate-pattern?apiKey=KEY&seed=12345&preset=cyan

POST Request (returns JSON with SVG and base64)

POST /api/generate-pattern
Content-Type: application/json
X-API-Key: your-api-key

{
  "seed": 12345,
  "preset": "acid",
  "contourCount": 50,
  "width": 800,
  "height": 800
}

POST Response

{
  "status": "success",
  "seed": 12345,
  "svg": "<svg xmlns=...>...</svg>",
  "base64": "data:image/svg+xml;base64,..."
}

Usage in Documents

Cover pages: Pattern at 15% opacity as background overlay
Contact pages: Reuse same pattern from cover
Naming: Save as pattern-{client}-{project}.svg
One unique pattern per document, same seed = same pattern