CINXE.COM
Design system | Civil Aviation Authority
<!DOCTYPE html> <html lang="en-gb" dir="ltr"> <head> <!-- 05-Jul-2024 07:24:38 : 20240705.1 --> <title>Design system | Civil Aviation Authority</title> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Resource to help you design, realise and develop products for the CAA"> <meta name="robots" content="noindex, follow" /> <link rel="stylesheet" href="/css/print.min.css?rel=1719836258246" media="print"> <link rel="stylesheet" href="/css/styles.min.css?rel=1719836258246"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <script id='analytics' src='/bundles/analytics?v=Ot_zozeyjiqIyNaduThA9i9uc3GbvfdJJ8NtjaurHVg1' data-tracking-id='AW-16789570203'></script> <script src="/scripts/plugins/analytics/ga4-default-consent.min.js?v=202407051"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-K1B42G6S2C"></script> <script id="ga4" src="/scripts/plugins/analytics/ga4.min.js?v=202407051" data-tracking-id="G-K1B42G6S2C"></script> <script src="/scripts/plugins/analytics/ga4-update-consent.min.js?v=202407051"></script> <script id="gtm" src="/scripts/plugins/analytics/gtm.js" data-container-id="GTM-K699PBC"></script> <script id="clarity-plugin-script" src="/scripts/plugins/clarity/clarity.min.js" data-clarity-project-id="mj5235yklj"></script> <script src="/scripts/plugins/clarity/clarity-consent-setup.min.js"></script> </head> <body class="caa"> <div id="cookieBanner" class="c-banner c-banner--info" role="region" aria-label="Cookie banner"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="c-banner__content"> <span class="c-banner__icon icon icon-info" aria-hidden="true"></span> <div class="c-banner__description"> <p>We use necessary cookies to make our website work. We'd also like to use optional cookies to understand how you use it, and to help us improve it.</p> <p>For more information, please read our <a href="/website-policies/cookie-policy/">cookie policy</a>.</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div class="c-banner__content c-banner__button-set"> <button type="submit" class="c-banner__button c-button-action c-button-action--default" data-allow-cookies="true">Accept optional cookies</button> <button type="submit" class="c-banner__button c-button-action c-button-action--invert" data-allow-cookies="false">Reject optional cookies</button> </div> </div> </div> </div> </div> <nav aria-label="Skip links"> <ul class="m-header__skip-links c-skip-links"> <li class="c-skip-links__item"> <a class="c-skip-links__link" href="#mainContent">Skip to main content</a> </li> <li class="c-skip-links__item"> <a class="c-skip-links__link" href="#mainSearch">Skip to search</a> </li> </ul> </nav> <header class="m-header"> <div class="m-header__banner"> <picture> <source srcset="/media/lfgp2cjd/home-1920-859.jpg?anchor=center&mode=crop&width=480&height=300&rnd=132902609368600000" media="(max-width: 480px)"> <source srcset="/media/lfgp2cjd/home-1920-859.jpg?anchor=center&mode=crop&width=768&height=300&rnd=132902609368600000" media="(max-width: 768px)"> <source srcset="/media/lfgp2cjd/home-1920-859.jpg?anchor=center&mode=crop&width=1024&height=300&rnd=132902609368600000" media="(max-width: 1024px)"> <img class="m-header__banner-image" src="/media/lfgp2cjd/home-1920-859.jpg?crop=0,0.42605020425057255,0,0.22470648957946232&cropmode=percentage&width=1920&height=300&rnd=132902609368600000" alt=""> </picture> <a class="m-header__link" href="/"> <img class="m-header__logo" src="/images/logo/logo.svg" alt="UK Civil Aviation Authority - Home" width="70" height="89"> </a> <div class="m-header__content m-header__content--top"> <div class="container"> <form class="m-header__search m-header__actionable-item c-search" role="search" method="get" action="/search"> <input id="mainSearch" class="c-search__input typeahead" type="text" value="" name="query" placeholder="Search CAA site" aria-label="Search" autocomplete="off" data-endpoint="/umbraco/Surface/SearchSurface/SearchSuggestions" data-displaykey="Suggestion"> <button class="c-search__button" type="submit"> <span class="u-visuallyhidden">Search</span> <span class="icon icon-loupe" aria-hidden="true"></span> </button> </form> <div class="m-header__login m-header__actionable-item"> <a href="#" role="button" class="c-button-action c-button-action--default c-button-action--default-banner-toggle c-button-action--login-toggle"> <span class="icon icon-lock" aria-hidden="true"> </span> <span> Log in </span> </a> </div> </div> </div> <div class="m-header__content m-header__content--middle"> <section id="loginPanel" class="m-login-form"> <div class="container"> <div class="row"> <div class="col-sm-6 col-sm-offset-6"> <p class="m-login-form__description">Choose a service to log in to:</p> <ul> <li> <a href="https://portal.caa.co.uk" class="c-navigation__link c-navigation__link-title"> Services online <p class="c-navigation__link-description">Access our online services</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> <li> <a href="https://register-drones.caa.co.uk/my-registration" class="c-navigation__link c-navigation__link-title"> Drones and model aircraft <p class="c-navigation__link-description">My registration</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> </ul> </div> </div> </div> </section> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="m-header__feature"> <div class="m-header__feature-text"> <h1 id="pageTitle" class="m-header__title ">Design system</h1> <p class="m-header__description">Resource to help you design, realise and develop products for the CAA</p> </div> </div> </div> </div> </div> </div> <div id="feedbackBanner" class="c-banner c-banner--feedback" data-unique-campaign-identifier="survey2"> <div class="container"> <div class="c-banner__content"> <span class="c-banner__icon icon icon-bubble2" aria-hidden="true"></span> <h2 class="c-banner__title">We would like to hear from you</h2> <div class="c-banner__description"><p>The CAA is committed to improving how we deliver services, please help us by completing a <a href="https://www.surveymonkey.com/r/L2KCJZL" target="_blank" title="Customer experience survey" rel="noopener">short survey</a> about your experiences today</p></div> <div id="feedbackBannerCloseButton" class="c-button-set" hidden> <a href="#" role="button" aria-controls="feedbackBanner" class="c-button-set__link c-button-set__link--feedback" data-close-feedback-banner="true"> <span class="icon icon-cross"> </span> <span> Close invitation </span> </a> </div> </div> </div> </div> <div class="m-header__content m-header__content--bottom"> <div class="container"> <nav class="m-header__breadcrumbs c-breadcrumbs" aria-label="Breadcrumb"> <ol class="c-breadcrumbs__list" itemscope itemtype="http://schema.org/BreadcrumbList"> <li class="c-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a class="c-breadcrumbs__link" href="/" itemprop="item"> <span itemprop="name">Home</span> </a> </li> <li class="c-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a class="c-breadcrumbs__link" href="/website-policies/" itemprop="item"> <span itemprop="name">Website policies</span> </a> </li> <li class="c-breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a class="c-breadcrumbs__link" href="/website-policies/design-system/" itemprop="item" aria-current="page"> <span itemprop="name">Design system</span> </a> </li> </ol> </nav> </div> </div> </header> <main id="mainContent" aria-labelledby="pageTitle" tabindex="-1"> <div class="container"> <div class="row"> <div class="col-md-6"> <section class="m-module" aria-label="Services and information"> <h2 id="servicesTitle" class="u-visuallyhidden">Services and information</h2> <ul class="c-navigation"> <li> <a href="/website-policies/design-system/components/" class="c-navigation__link"> <h3 class="c-navigation__link-title"> Components </h3> <p class="c-navigation__link-description">User interface elements</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> <li> <a href="/website-policies/design-system/page-templates/" class="c-navigation__link"> <h3 class="c-navigation__link-title"> Pages </h3> <p class="c-navigation__link-description">Patterns for structural navigation and static content</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> <li> <a href="/website-policies/design-system/styling/" class="c-navigation__link"> <h3 class="c-navigation__link-title"> Styling </h3> <p class="c-navigation__link-description">Colours, typography and imagery</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> <li> <a href="/website-policies/design-system/accessibility-guidance/" class="c-navigation__link"> <h3 class="c-navigation__link-title"> Accessibility guidance </h3> <p class="c-navigation__link-description">Guidance for creating accessible content</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> <li> <a href="/website-policies/design-system/download-the-caa-frontend/" class="c-navigation__link"> <h3 class="c-navigation__link-title"> Download the CAA Frontend </h3> <p class="c-navigation__link-description">Install the CAA Frontend in your project using precompiled files</p> <span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true"> <span class="path1"></span> </span> </a> </li> </ul> </section> </div> <div class="col-md-3 col-md-offset-3"> </div> </div> <div class="row"> <div class="col-md-12"> <div id="feedbackFormSection" class="c-comments clearfix" hidden> <div id="feedbackCtaWrapper" class="c-button-set"> <a href="#" id="feedbackCta" class="c-button-set__link" role="button" aria-expanded="false" aria-controls="feedbackFormWrapper"> <span class="icon icon-bubble2"> </span> <span>Provide feedback for this page</span> </a> </div> <section id="feedbackFormWrapper" aria-label="Feedback form" hidden> <h2 class="c-comments__title">Provide page feedback</h2> <div class="c-rich-text"> <p>Please enter your comments below, or use our usual <a href="/contact-us">service contacts</a> if a specific matter requires an answer.</p> <p>Fields marked with an asterisk (*) are required.</p> </div> <div class="m-search-form"> <form action="/umbraco/Surface/FormSubmissionSurface/PageFeedbackForm" enctype="multipart/form-data" id="feedbackForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="OKb-iC1Bu1Q3AuHwQLC5zwOoaXCy_QiGo9ht3XecAlzjIwhqaL9ttG4s-KCHi8PtXH1MEig0EN6IIXRc_WwOHiYSxoSkgWqTEIFbcZ-CJvA1" /><input data-val="true" data-val-required="The Page title field is required." id="FeedbackPageTitle" name="FeedbackPageTitle" type="hidden" value="" /><input data-val="true" data-val-required="The Page URL field is required." id="FeedbackPageUrl" name="FeedbackPageUrl" type="hidden" value="" /><div class="c-form__validation-summary c-form__validation-summary--valid c-rich-text" data-valmsg-summary="true"> <span class="c-banner__icon icon icon-alert" aria-hidden="true"></span> <div class="c-form__validation-summary-content"> <h2>There are problems:</h2> <ul> </ul> </div> </div> <div> <div class="c-form__group"> <label class="c-form__label c-form__label--required" for="FeedbackComment">Comment</label> <textarea aria-required="true" autocomplete="off" class="c-form__field c-form__field-character-count__field" cols="20" data-val="true" data-val-maxlength="Please limit comment to 2000 characters." data-val-maxlength-max="2000" data-val-required="The Comment field is required." id="FeedbackComment" maxlength="2000" name="FeedbackComment" rows="5"> </textarea> <span class="field-validation-valid m-search-form__message" data-valmsg-for="FeedbackComment" data-valmsg-replace="true"></span> </div> </div> <div> <div class="c-form__group"> <label class="c-form__label" for="FeedbackUserEmailAddress">Email address</label> <input aria-required="false" autocomplete="email" class="c-form__field" data-val="true" data-val-email="Please enter a valid email address." data-val-maxlength="Please enter a valid email address." data-val-maxlength-max="254" id="FeedbackUserEmailAddress" name="FeedbackUserEmailAddress" type="text" value="" /> <span class="field-validation-valid m-search-form__message" data-valmsg-for="FeedbackUserEmailAddress" data-valmsg-replace="true"></span> </div> </div> <div id="feedbackFormRecaptcha" class="m-search-form__recaptcha c-form__group"> <script src="https://www.google.com/recaptcha/api.js" async defer></script><div class="g-recaptcha" data-sitekey="6LcgpSkUAAAAAG6b2da_XTbu8HAVRJ4bxds7fSv9" data-theme="light"></div> <span id="PageFeedbackRecaptchaValidationMessage" class="m-search-form__message field-validation-valid"> </span> </div> <div class="m-search-form__advanced-buttons"> <button type="submit" class="m-search-form__button c-button-action c-button-action--default">Send feedback</button> </div> <input name="ufprt" type="hidden" value="A00D2107CC8AAD938BF68D00BF3C9B67B70D768805C0836C13E8E1ED359D82418937EA656DEAD99D594AA3E8EAD7B925247B194A47F0E902F21693B503AF5B59DCC590A40F1B41667BE814030A4CFCCA0D1DA5812954764B86EA64A35376BDCABA770CBB5FC11D737165C3EDD9CF00FCC1D3206183389D87EE8A3741B63303A5E8DD42922A0A68F07B0B8665EA513FE392A85DF4D9ED0793116621A60A08B664A5E94E8D366DEB86416E4F912C1E2DB8" /></form></div> </section> </div> </div> </div> </div> <section class="m-news m-news--global" aria-label="News from UK Civil Aviation Authority"> <div class="container"> <div class="row"> <div class="col-md-8"> <h2 class="m-news__title m-news__title--global"><a href="/newsroom/">News from UK Civil Aviation Authority</a></h2> <ol class="m-news__list"> <li class="m-news__item"> <a href="/newsroom/news/uk-regulator-unveils-new-ai-strategy/" class="m-news__link"><span>UK regulator unveils new AI strategy</span></a> <ul class="m-news__item-metadata"> <li> <span class="icon icon-calendar" aria-hidden="true"> </span> <span class="u-visuallyhidden"> Published on: </span> <time datetime="2024-11-28"> 28 November 2024 </time> </li> <li> <span class="m-news__item-metadata-separator" aria-hidden="true"></span> <span class="u-visuallyhidden"> Category: </span> News Item </li> </ul> </li> <li class="m-news__item"> <a href="/newsroom/news/uk-to-bring-aviation-experts-together-for-third-legal-summit/" class="m-news__link"><span>UK to bring aviation experts together for third legal summit</span></a> <ul class="m-news__item-metadata"> <li> <span class="icon icon-calendar" aria-hidden="true"> </span> <span class="u-visuallyhidden"> Published on: </span> <time datetime="2024-11-25"> 25 November 2024 </time> </li> <li> <span class="m-news__item-metadata-separator" aria-hidden="true"></span> <span class="u-visuallyhidden"> Category: </span> News Item </li> </ul> </li> <li class="m-news__item"> <a href="/newsroom/news/uk-civil-aviation-authority-approves-manchester-low-level-route-airspace-change/" class="m-news__link"><span>UK Civil Aviation Authority approves Manchester Low-Level Route airspace change</span></a> <ul class="m-news__item-metadata"> <li> <span class="icon icon-calendar" aria-hidden="true"> </span> <span class="u-visuallyhidden"> Published on: </span> <time datetime="2024-11-20"> 20 November 2024 </time> </li> <li> <span class="m-news__item-metadata-separator" aria-hidden="true"></span> <span class="u-visuallyhidden"> Category: </span> News Item </li> </ul> </li> </ol> </div> </div> </div> </section> </main> <!-- Footer generated: 22:54:14 --> <footer class="m-footer "> <div class="container"> <div class="m-footer__social-links c-social-links"> <h2 class="c-social-links__title">Follow us on<span class="u-visuallyhidden"> social media</span></h2> <ul class="c-social-links__list"> <li class="c-social-links__item"> <a href="https://x.com/UK_CAA" rel="noopener" class="c-social-links__link icon icon-x"> <span class="u-visuallyhidden">Follow us on X</span> </a> </li> <li class="c-social-links__item"> <a href="https://www.youtube.com/user/UKCAA" rel="noopener" class="c-social-links__link icon icon-youtube2"> <span class="u-visuallyhidden">Follow us on YouTube</span> </a> </li> <li class="c-social-links__item"> <a href="https://www.linkedin.com/company/civil-aviation-authority" rel="noopener" class="c-social-links__link icon icon-linkedin"> <span class="u-visuallyhidden">Follow us on Linkedin</span> </a> </li> </ul> </div> <nav class="m-footer__navigation" aria-label="footer navigation"> <ul class="m-footer__navigation__list"> <li class="m-footer__navigation-item"> <span class="m-footer__navigation-text">2024 漏 Civil Aviation Authority</span> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/website-policies/cookie-policy/">Cookies</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/website-policies/accessibility-statement/">Accessibility</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/website-policies/vulnerability-disclosure-policy/">Report a vulnerability</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/our-work/about-us/general-privacy-notice/">Privacy</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/our-work/information-requests/freedom-of-information/">Freedom of information</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/website-policies/html-sitemap/">Sitemap</a> </li> <li class="m-footer__navigation-item"> <a class="m-footer__navigation-link" href="/our-work/about-us/contact-us/">Contact us</a> </li> </ul> </nav> </div> </footer> <script src="/scripts/standalone/jquery-3.6.3.min.js"></script> <script src="/scripts/scripts.min.js?rel=1719836258246"></script> <script src="/bundles/pagefeedback?v=9NrT4QzIbMaxK6uccTJ26NavGZosNU26wLGQSxsZD-o1"></script> <script src="/bundles/typeahead?v=e_S4xFCd0fUN7KbXnyCSSrR4gCbK7oiUmZwP-tXNwwo1"></script> </body> </html>