Flags

The official flags of the Principality of Kaharagia represent the nation, its people, and royal institutions.

Official Flags

Saint Michael's Flag
National Flag

Saint Michael's Flag

The official flag of the Principality of Kaharagia since the foundation of the nation.

Download SVG →
Kaharagian Civil Flag
Civil Flag

Kaharagian Civil Flag

The common Kaharagian flag combining the colours of the Royal Family and the Order of Saint Michael.

Download SVG →
Royal Family Banner
Cultural Flag

Royal Family Banner

The banner of the Royal Family, displaying the colours from the Royal Family Arms.

Download SVG →
Saint Michael's Banner
Cultural Flag

Saint Michael's Banner

The original civil flag of Kaharagia, derived from the Order of Saint Michael colours.

Download SVG →

Usage Guidelines

  • Always maintain the 3:2 aspect ratio
  • Do not alter the colours or proportions
  • Minimum display size: 90×60 pixels
  • Use a subtle shadow when displayed on light backgrounds
  • Provide descriptive alt text for accessibility

Display Guidelines

Aspect Ratio

All Kaharagian flags use a 3:2 aspect ratio. When displaying flags, ensure this ratio is preserved to maintain the correct proportions.

/* CSS to maintain flag aspect ratio */
.flag {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 3 / 2;
}

/* Alternative using padding */
.flag-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding-bottom: 66.67%; /* 2/3 = 66.67% */
}

.flag-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Minimum Size

Flags should not be displayed smaller than 90×60 pixels to ensure visibility and recognisability of the design elements.

Background Considerations

When displaying flags on light backgrounds, add a subtle shadow or border to ensure the flag edges are visible:

<img
  src="/flags/stm_flag.svg"
  alt="Saint Michael's Flag"
  class="flag"
  style="box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
>

Accessibility

  • Always include descriptive alt text identifying the specific flag
  • Do not rely on flag colours alone to convey information
  • Provide text labels alongside flags when used for selection or navigation

HTML Example

<!-- Display the Saint Michael's Flag -->
<figure class="flag-figure">
  <img
    src="/flags/stm_flag.svg"
    alt="Saint Michael's Flag - Official flag of the Principality of Kaharagia"
    class="flag"
  >
  <figcaption>The Saint Michael's Flag</figcaption>
</figure>