One visual language for everything vatger.
Logos, colors, typography, user interface patterns and guides for developers in one place.
Resources and tools
The branding should feel structured, recognizable and follow consistent patterns across services and designs.
Consistent
The same design should carry across all of our services and graphic designs such as websites, event-banners, etc.
Minimalist
Less is more. Favour simple designs that follow the branding instead of complex individual designs.
Purposeful
Every color, icon and graphic used should serve a clear function and follow a hierarchy for legibility.
Select a clear and suitable logo for your design.
Use the supplied assets without modification and choose the version designed for the background on which it is placed.
Color logo - light background
Use this version on white, secondary and other light backgrounds. Specifically suitable for light-mode.
Color logo - primary background
Use this version on primary-colored surfaces and other darker backgrounds. Specifically suitable for dark-mode.
Monochrome logo - light background
Use the monochrome light-background version only where the color logo is unsuitable and on light backgrounds.
Monochrome logo - primary background
Use the monochrome dark-background version only where the color logo is unsuitable and on darker backgrounds.
Give the logo room to breathe.
Maintain a clear space around the logo equal to at least the wingspan (height) of the aircraft icon in horizontal orientation. No design elements should enter this area.
Preserve the original design.
Avoid changes that alter the original design of the logo in any way. Some examples of things that shouldn't be done with the logo:
Do not stretch, compress, skew or rotate the logo.
Do not recolor logo elements. Use only the supplied logo versions.
Do not add outlines, shadows, glows or other effects.
Do not place the logo over visually noisy content without enough contrast.
Color creates meaning and grabs attention.
Primary and secondary tones build the user interface. Accent colors supports elements of interaction, while status colors give feedback.
Theme colors
These colors define the primary interface roles used across light and dark themes. See the section web design for more details on how to utilize these colors in an actual (web-)design.
Light mode
Primary
primary-900
Secondary
secondary-900
Accent
accent-500
Success
success-700
Warning
warning-700
Danger
danger-700
Dark mode
Primary
secondary-50
Secondary
secondary-900
Accent
accent-500
Success
success-700
Warning
warning-700
Danger
danger-700
Primary
Headings, important text and large design surfaces.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Neutral backgrounds, dividers and secondary interface areas.
50
100
200
300
400
500
600
700
800
900
950
Accent
Links, selected states and visual emphasis.
50
100
200
300
400
500
600
700
800
900
950
Success
Confirmations, completed actions and positive system feedback.
50
100
200
300
400
500
600
700
800
900
950
Warning
Cautionary information and states that require additional attention.
50
100
200
300
400
500
600
700
800
900
950
Danger
Errors, destructive actions and critical/erroneous system feedback.
50
100
200
300
400
500
600
700
800
900
950
Use color deliberately.
Use primary for primary headings, important text and brand surfaces.
Use accent for links, focus, selected states and deliberate emphasis.
Use secondary for quiet backgrounds and secondary surfaces.
Use success, warning and danger only for their semantic roles.
CSS token definitions
/* Accent */
'--color-accent-50': 'oklch(0.967 0.012 17.51)',
'--color-accent-100': 'oklch(0.925 0.029 15.09)',
'--color-accent-200': 'oklch(0.861 0.056 15.58)',
'--color-accent-300': 'oklch(0.787 0.094 16.13)',
'--color-accent-400': 'oklch(0.724 0.133 17.42)',
'--color-accent-500': 'oklch(0.654 0.181 18.94)',
'--color-accent-600': 'oklch(0.557 0.183 20.14)',
'--color-accent-700': 'oklch(0.45 0.148 19.96)',
'--color-accent-800': 'oklch(0.351 0.115 20.29)',
'--color-accent-900': 'oklch(0.244 0.08 20.4)',
'--color-accent-950': 'oklch(0.196 0.065 20.49)',
/* Primary */
'--color-primary-50': 'oklch(0.966 0.009 258.36)',
'--color-primary-100': 'oklch(0.932 0.018 258.36)',
'--color-primary-200': 'oklch(0.862 0.038 256.98)',
'--color-primary-300': 'oklch(0.783 0.062 254.67)',
'--color-primary-400': 'oklch(0.716 0.085 251.73)',
'--color-primary-500': 'oklch(0.645 0.083 251.94)',
'--color-primary-600': 'oklch(0.576 0.074 251.72)',
'--color-primary-700': 'oklch(0.501 0.064 251.47)',
'--color-primary-800': 'oklch(0.43 0.054 251.03)',
'--color-primary-900': 'oklch(0.361 0.046 251.47)',
'--color-primary-950': 'oklch(0.251 0.031 249.13)',
/* Primary */
'--color-secondary-50': 'oklch(0.958 0.003 264.69)',
'--color-secondary-100': 'oklch(0.922 0.007 268.62)',
'--color-secondary-200': 'oklch(0.845 0.015 268.51)',
'--color-secondary-300': 'oklch(0.767 0.024 269.39)',
'--color-secondary-400': 'oklch(0.689 0.033 267.09)',
'--color-secondary-500': 'oklch(0.613 0.035 265.99)',
'--color-secondary-600': 'oklch(0.535 0.031 267.28)',
'--color-secondary-700': 'oklch(0.456 0.026 265.53)',
'--color-secondary-800': 'oklch(0.379 0.022 267.47)',
'--color-secondary-900': 'oklch(0.281 0.017 266.38)',
'--color-secondary-950': 'oklch(0.217 0.011 260.68)',
/* Success */
'--color-success-50': 'oklch(0.981 0.02 154.81)',
'--color-success-100': 'oklch(0.949 0.051 153.92)',
'--color-success-200': 'oklch(0.901 0.115 153.44)',
'--color-success-300': 'oklch(0.855 0.129 153.24)',
'--color-success-400': 'oklch(0.813 0.123 153.22)',
'--color-success-500': 'oklch(0.77 0.116 153.2)',
'--color-success-600': 'oklch(0.738 0.113 153.11)',
'--color-success-700': 'oklch(0.692 0.105 153.28)',
'--color-success-800': 'oklch(0.51 0.078 153.57)',
'--color-success-900': 'oklch(0.323 0.05 152.7)',
'--color-success-950': 'oklch(0.228 0.034 153.71)',
/* Warning */
'--color-warning-50': 'oklch(0.992 0.006 75.39)',
'--color-warning-100': 'oklch(0.974 0.02 77.31)',
'--color-warning-200': 'oklch(0.957 0.034 80.3)',
'--color-warning-300': 'oklch(0.931 0.058 81.44)',
'--color-warning-400': 'oklch(0.907 0.086 83.52)',
'--color-warning-500': 'oklch(0.888 0.108 84.89)',
'--color-warning-600': 'oklch(0.864 0.148 87.9)',
'--color-warning-700': 'oklch(0.839 0.147 88.09)',
'--color-warning-800': 'oklch(0.604 0.106 87.76)',
'--color-warning-900': 'oklch(0.372 0.065 88.82)',
'--color-warning-950': 'oklch(0.258 0.045 87.16)',
/* Danger */
'--color-danger-50': 'oklch(0.966 0.011 17.51)',
'--color-danger-100': 'oklch(0.942 0.019 17.58)',
'--color-danger-200': 'oklch(0.876 0.042 19.85)',
'--color-danger-300': 'oklch(0.819 0.067 19.79)',
'--color-danger-400': 'oklch(0.76 0.094 20.31)',
'--color-danger-500': 'oklch(0.705 0.127 22.57)',
'--color-danger-600': 'oklch(0.64 0.169 25.16)',
'--color-danger-700': 'oklch(0.58 0.164 25.81)',
'--color-danger-800': 'oklch(0.437 0.124 25.52)',
'--color-danger-900': 'oklch(0.286 0.081 25.74)',
'--color-danger-950': 'oklch(0.214 0.061 25.19)',
Structure and hierarchy are created through typograhpy.
Using the same typographic features across services helps consistency.
Vatger is the primary typeface.
Vatger is based on Plus Jakarta Sans and refined for improved legibility for our use-cases.
Use Vatger for all text elements. Monospaced (e.g. code-blocks) fonts are exempt from this.
Use font-semibold for headings instead of heavier display weights.
Keep body text at 16px for standard product content.
For longer text increase the line-height for improved legibility. The text on the right, for example, uses tailwind's leading-8 class.
Typography example
Radio Communication Procedures
Standard phraseology is to be used in all situations where it is prescribed. Normal expressions should only be used when standard phraseology is not suitable for the intended transmission.
Except for safety reasons, no transmission should be made to an aircraft during takeoff, the final part of an approach or rollout after landing.
Clear hierarchy
Use size, weight and spacing consistently so users can understand the intended structure.
Maintain legibility
Use a 16px base size for core content and maintain increased line-heights for longer text content.
Class definitions
Use shared Tailwind utilities and shadcn UI components instead of introducing arbitrary CSS.
Link example
Teamspeak 3
TeamSpeak is used by VATSIM Germany as the primary communication platform for members, coordination, and training sessions/lessons. TeamSpeak 3can be downloaded free of charge.
You can connect to our server using the following link:ts3server://ts3.vatsim-germany.org. If TeamSpeak is installed, your client should open automatically.
Links should be visible, not noisy.
Use the accent color to identify interactive text. Always add an underline on hover.
Use accent text for links within body content.
Underline links on hover instead of permanently underlining every link.
Use an external-link icon when navigation leaves the vatger services.
UI should feel familiar & intuitive.
Use shared components, colors and predictable interactions throughout your applications.
Shadcn registry showcase
Reserve this area for approved component examples sourced directly from the shared registry.
Consistency across all sites.
Standard UI elements should use the shared shadcn/ui foundation. Extend components through registry-backed variants in order to maintain a high standard of similarity between visual components of web-pages.
In order to make the use of shadcn as simple as possible, we recommend the use of a shadcn registry, which allow common UI components to be shared across applications.
Should you not be able to use the shadcn UI elements and registry for whatever reason, try to match the elements as closely as possible, specifically in regard to shape, color and interaction.
We have created such a custom repository for vatger components and colors. This can be found using the following URL:
https://cdn.vatsim-germany.org/shadcn/registry.json
Additionally we also have an npm package for the color-collection which can be installed using:
npm install @vatger/basecss.
One icon set throughout.
Use Lucidefor all icons. Icons should reinforce meaning rather than replace labels users need to understand. Documentation on how to use Lucide icons in your project can be found here.
Whilst it is technically possible to serve Lucide icons as static assets, through the use of their font package, this is highly discouraged due to the increased initial load-times. We will therefore also not be providing a version on our CDN for this use-case.
Clear, structured and consistent website designs.
Use the same background, surface, typography and interaction colors to create a recognizable UI across every page.
Example Application
Welcome back!
Important information should be presented on white surfaces, supported by a subtle secondary-colored page background.
Upcoming ATC Booking
Review the latest NOTAMS before logging on.
5 Unread NOTAMs
S2 Mentoring
You have a training session tonight. Please make sure to prepare well.
Fri Jul 31 2026 18:00 UTC
Light interface example
Use secondary-50 for the page background and white for cards, navigation elements and other elevated surfaces. Cards should also have a small shadow using tailwind's shadow-md class.
Page background
secondary-50
Card surface
white
Card shadow
shadow-md
Primary text
primary
Secondary text
secondary-600
Dark interface example
Use secondary-950 as the main background. Cards and raised surfaces should use secondary-900, with secondary-800 borders where additional separation is needed.
Page background
secondary-950
Card surface
secondary-900
Surface border
secondary-800
Supporting text
secondary-300
Example Application
Welcome back!
Dark interfaces should use tonal surface differences instead of pure black backgrounds or overly bright borders.
Upcoming ATC Booking
Review the latest NOTAMS before logging on.
5 Unread NOTAMs
S2 Mentoring
You have a training session tonight. Please make sure to prepare well.
Fri Jul 31 2026 18:00 UTC