access-nyc-patterns
Version:
User Interface Patterns for Benefits Access
641 lines (635 loc) • 56.6 kB
HTML
<!DOCTYPE html>
<html class="bg-color-white text-size-0" lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" />
<link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" />
<link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" />
<link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" />
<link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" />
<link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" />
<link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" />
<link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" />
<link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" />
<link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" />
<link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
<link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
<link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
<meta content="#112E51" name="msapplication-TileColor" />
<meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" />
<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
<link href="styles/site-default.css" rel="stylesheet" />
<title>Colors | ACCESS NYC Patterns</title><noscript>
<style>
body {
visibility: visible !important;
}
</style>
</noscript>
<script type="text/javascript">
function load() {
document.body.style.visibility = 'visible'
};
</script>
</head>
<body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a>
<div class="bg-color-white">
<header class="color-light-background px-2">
<div class="border-b border-color-grey-light">
<div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2">
<div>
<h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden">
<use xlink:href="#icon-logo-mark"></use>
</svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block">
<use xlink:href="#icon-logo-full"></use>
</svg></a></h1>
</div>
<div class="flex items-center">
<h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2>
<h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2>
<nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav>
</div>
</div>
</div>
</header>
<aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px">
<div class="page-wrapper py-4 animated">
<div class="screen-tablet:flex">
<nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav>
<nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav>
</div>
<div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div>
</div>
</aside>
<main class="color-light-background pt-4" id="main-content">
<article class="pt-4">
<header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body">
<div class="my-0 w-full">
<h1 class="text-color-blue-dark px-2 pb-4 mb-4">Colors</h1>
</div>
</header>
<section class="pb-4 mb-4" id="combinations">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#combinations">Combinations</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/utilities/color">src/utilities/color/color-combinations</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The ACCESS NYC Patterns color palette builds on top of the <a href="https://designsystem.digital.gov/components/colors/">U.S. Web Design System</a>. Specific combinations were tested for adequate contrast following the distinguishability guideline of the Web Content Accessibility Guidelines (WCAG) 2.0.</p>
<p>Body text color is black on white and heading text color is dark blue, meeting compliance and using the brand colors of ACCESS NYC. Because we can’t illustrate all interactive elements solely with color, hyperlinks are also underlined to accommodate color blindness.</p>
<p>Primary and secondary colors highlight interactions with buttons and hyperlinks. Each state of interaction, including default, hover, and focus states, conform to the WCAG AA standard at a base level.</p>
<p>Below are swatches with examples of the approved color combinations. Please note that WCAG AA compliance depends on the base text size. The examples below may not be fully compliant because their font-size is set to a smaller size.</p></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">light background</h3>
<article class="color-light-background w-full py-4 p-2 mb-2">
<h1 class="type-h4 text-font-size-normal m-0">Headings h1, h3, h5</h1>
<h2 class="type-h5 text-font-size-normal color-light-background__alt">Alternative Text</h2>
<div class="capitalize">light background Text</div><a href="#">Hyperlinks</a>
</article>
<p class="mb-0 flex justify-between">Selector<code>.color-light-background</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">mid background</h3>
<article class="color-mid-background w-full py-4 p-2 mb-2">
<h1 class="type-h4 text-font-size-normal m-0">Headings h1, h3, h5</h1>
<h2 class="type-h5 text-font-size-normal color-mid-background__alt">Alternative Text</h2>
<div class="capitalize">mid background Text</div><a href="#">Hyperlinks</a>
</article>
<p class="mb-0 flex justify-between">Selector<code>.color-mid-background</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">dark background</h3>
<article class="color-dark-background w-full py-4 p-2 mb-2">
<h1 class="type-h4 text-font-size-normal m-0">Headings h1, h3, h5</h1>
<h2 class="type-h5 text-font-size-normal color-dark-background__alt">Alternative Text</h2>
<div class="capitalize">dark background Text</div><a href="#">Hyperlinks</a>
</article>
<p class="mb-0 flex justify-between">Selector<code>.color-dark-background</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">primary button</h3>
<article class="color-primary-button w-full py-4 p-2 mb-2">
<div class="capitalize">primary button Text</div>
</article>
<p class="mb-0 flex justify-between">Selector<code>.color-primary-button</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">secondary button</h3>
<article class="color-secondary-button w-full py-4 p-2 mb-2">
<div class="capitalize">secondary button Text</div>
</article>
<p class="mb-0 flex justify-between">Selector<code>.color-secondary-button</code></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="statuses">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#statuses">Statuses</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/utilities/color">src/utilities/color/color-statuses</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The background colors assigned to each status (info, success, warning, and urgent) can be used through their corresponding <code>.bg-status-<status></code> utility.</p></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">success Background</h3>
<article class="bg-status-success w-full py-4 p-2 mb-2">
<div class="capitalize">success Text</div>
</article>
<p class="mb-1 flex justify-between">selector<code>.bg-status-success</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">info Background</h3>
<article class="bg-status-info w-full py-4 p-2 mb-2">
<div class="capitalize">info Text</div>
</article>
<p class="mb-1 flex justify-between">selector<code>.bg-status-info</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">warning Background</h3>
<article class="bg-status-warning w-full py-4 p-2 mb-2">
<div class="capitalize">warning Text</div>
</article>
<p class="mb-1 flex justify-between">selector<code>.bg-status-warning</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">urgent Background</h3>
<article class="bg-status-urgent w-full py-4 p-2 mb-2">
<div class="capitalize">urgent Text</div>
</article>
<p class="mb-1 flex justify-between">selector<code>.bg-status-urgent</code></p>
</div>
</div>
</div>
<div> </div>
</div>
</div>
</div>
</section>
<section class="pb-4 mb-4" id="utilities">
<div class="page-wrapper px-2">
<header class="layout--home-body">
<div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light">
<h2 class="m-0"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#utilities">Utilities</a></h2>
<div class="pt-2">
<p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/utilities/color">src/utilities/color/color-utilities</a></code></p>
</div>
</div>
</header>
<div class="layout--home-body">
<div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>With the help of <a href="https://tailwindcss.com/docs/colors#customizing">Tailwind CSS</a> every color in ACCESS NYC Patterns can be used as a utility class for static, hover, and responsive states of the <a href="https://tailwindcss.com/docs/text-color">text</a>, <a href="https://tailwindcss.com/docs/border-color">border</a>, and <a href="https://tailwindcss.com/docs/background-color">background</a> properties. Refer to the <a href="https://tailwindcss.com/docs">Tailwind CSS Docs</a> for full details. In order to maintain WCAG AA compliance, custom combinations of text and background colors must be tested for adequate contrast. The <a href="https://webaim.org/resources/contrastchecker/">WebAIM Color Contrast Checker</a> makes testing easy.</p>
<p>Below are examples of the color utilities and their corresponding selectors. Please note, not all of the text color examples are accessible because they show the color utility in use on a white background.</p></div>
</div>
<div class="layout--gutter screen-tablet:layout--gutter justify-between pt-4">
<div class="layout--gutter screen-mobile:layout--two-columns-gutter screen-tablet:layout--three-columns-gutter">
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color blue light</h3>
<div class="border border-color-blue-light w-full p-1 mb-2">
<div class="text-color-blue-light pb-1 text-center capitalize">Text color blue light</div>
<div class="bg-color-blue-light w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#E1EEFF</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-blue-light</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-blue-light</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-blue-light</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color blue bright</h3>
<div class="border border-color-blue-bright w-full p-1 mb-2">
<div class="text-color-blue-bright pb-1 text-center capitalize">Text color blue bright</div>
<div class="bg-color-blue-bright w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#118DF0</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-blue-bright</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-blue-bright</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-blue-bright</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color blue</h3>
<div class="border border-color-blue w-full p-1 mb-2">
<div class="text-color-blue pb-1 text-center capitalize">Text color blue</div>
<div class="bg-color-blue w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#184E9E</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-blue</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-blue</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-blue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color blue dark</h3>
<div class="border border-color-blue-dark w-full p-1 mb-2">
<div class="text-color-blue-dark pb-1 text-center capitalize">Text color blue dark</div>
<div class="bg-color-blue-dark w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#112E51</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-blue-dark</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-blue-dark</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-blue-dark</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color yellow light</h3>
<div class="border border-color-yellow-light w-full p-1 mb-2">
<div class="text-color-yellow-light pb-1 text-center capitalize">Text color yellow light</div>
<div class="bg-color-yellow-light w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#FFE6A9</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-yellow-light</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-yellow-light</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-yellow-light</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color yellow access</h3>
<div class="border border-color-yellow-access w-full p-1 mb-2">
<div class="text-color-yellow-access pb-1 text-center capitalize">Text color yellow access</div>
<div class="bg-color-yellow-access w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#FBB720</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-yellow-access</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-yellow-access</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-yellow-access</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color green light</h3>
<div class="border border-color-green-light w-full p-1 mb-2">
<div class="text-color-green-light pb-1 text-center capitalize">Text color green light</div>
<div class="bg-color-green-light w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#D4FFE7</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-green-light</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-green-light</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-green-light</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color green</h3>
<div class="border border-color-green w-full p-1 mb-2">
<div class="text-color-green pb-1 text-center capitalize">Text color green</div>
<div class="bg-color-green w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#05CE7C</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-green</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-green</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-green</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color green mid</h3>
<div class="border border-color-green-mid w-full p-1 mb-2">
<div class="text-color-green-mid pb-1 text-center capitalize">Text color green mid</div>
<div class="bg-color-green-mid w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#0D6D3B</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-green-mid</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-green-mid</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-green-mid</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color green dark</h3>
<div class="border border-color-green-dark w-full p-1 mb-2">
<div class="text-color-green-dark pb-1 text-center capitalize">Text color green dark</div>
<div class="bg-color-green-dark w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#094727</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-green-dark</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-green-dark</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-green-dark</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color pink light</h3>
<div class="border border-color-pink-light w-full p-1 mb-2">
<div class="text-color-pink-light pb-1 text-center capitalize">Text color pink light</div>
<div class="bg-color-pink-light w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#F1B3bD</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-pink-light</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-pink-light</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-pink-light</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color pink</h3>
<div class="border border-color-pink w-full p-1 mb-2">
<div class="text-color-pink pb-1 text-center capitalize">Text color pink</div>
<div class="bg-color-pink w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#F1647C</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-pink</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-pink</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-pink</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color red</h3>
<div class="border border-color-red w-full p-1 mb-2">
<div class="text-color-red pb-1 text-center capitalize">Text color red</div>
<div class="bg-color-red w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#C6252b</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-red</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-red</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-red</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color purple</h3>
<div class="border border-color-purple w-full p-1 mb-2">
<div class="text-color-purple pb-1 text-center capitalize">Text color purple</div>
<div class="bg-color-purple w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#4C2C92</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-purple</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-purple</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-purple</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color grey light</h3>
<div class="border border-color-grey-light w-full p-1 mb-2">
<div class="text-color-grey-light pb-1 text-center capitalize">Text color grey light</div>
<div class="bg-color-grey-light w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#D1D5D9</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-grey-light</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-grey-light</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-grey-light</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color grey lightest</h3>
<div class="border border-color-grey-lightest w-full p-1 mb-2">
<div class="text-color-grey-lightest pb-1 text-center capitalize">Text color grey lightest</div>
<div class="bg-color-grey-lightest w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#EEF3F7</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-grey-lightest</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-grey-lightest</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-grey-lightest</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color grey mid</h3>
<div class="border border-color-grey-mid w-full p-1 mb-2">
<div class="text-color-grey-mid pb-1 text-center capitalize">Text color grey mid</div>
<div class="bg-color-grey-mid w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#505C66</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-grey-mid</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-grey-mid</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-grey-mid</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color grey dark</h3>
<div class="border border-color-grey-dark w-full p-1 mb-2">
<div class="text-color-grey-dark pb-1 text-center capitalize">Text color grey dark</div>
<div class="bg-color-grey-dark w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#172129</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-grey-dark</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-grey-dark</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-grey-dark</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color black</h3>
<div class="border border-color-black w-full p-1 mb-2">
<div class="text-color-black pb-1 text-center capitalize">Text color black</div>
<div class="bg-color-black w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#000000</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-black</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-black</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-black</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color white</h3>
<div class="border border-color-white w-full p-1 mb-2">
<div class="text-color-white pb-1 text-center capitalize">Text color white</div>
<div class="bg-color-white w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#ffffff</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-white</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-white</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-white</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">color transparent</h3>
<div class="border border-color-transparent w-full p-1 mb-2">
<div class="text-color-transparent pb-1 text-center capitalize">Text color transparent</div>
<div class="bg-color-transparent w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>rgba(255,255,255,0)</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-color-transparent</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-color-transparent</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-color-transparent</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">eighth avenue</h3>
<div class="border border-eighth-avenue w-full p-1 mb-2">
<div class="text-eighth-avenue pb-1 text-center capitalize">Text eighth avenue</div>
<div class="bg-eighth-avenue w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#2850AD</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-eighth-avenue</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-eighth-avenue</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-eighth-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">sixth avenue</h3>
<div class="border border-sixth-avenue w-full p-1 mb-2">
<div class="text-sixth-avenue pb-1 text-center capitalize">Text sixth avenue</div>
<div class="bg-sixth-avenue w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#FF6319</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-sixth-avenue</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-sixth-avenue</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-sixth-avenue</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">crosstown</h3>
<div class="border border-crosstown w-full p-1 mb-2">
<div class="text-crosstown pb-1 text-center capitalize">Text crosstown</div>
<div class="bg-crosstown w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#6CBE45</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-crosstown</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-crosstown</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-crosstown</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">canarsie</h3>
<div class="border border-canarsie w-full p-1 mb-2">
<div class="text-canarsie pb-1 text-center capitalize">Text canarsie</div>
<div class="bg-canarsie w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#A7A9AC</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-canarsie</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-canarsie</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-canarsie</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">nassau</h3>
<div class="border border-nassau w-full p-1 mb-2">
<div class="text-nassau pb-1 text-center capitalize">Text nassau</div>
<div class="bg-nassau w-full py-4"></div>
</div>
<p class="mb-1 flex justify-between">Hex<code>#996633</code></p>
<p class="mb-1 flex justify-between">Border<code>.border-nassau</code></p>
<p class="mb-1 flex justify-between">Text<code>.text-nassau</code></p>
<p class="mb-0 flex justify-between">Background<code>.bg-nassau</code></p>
</div>
</div>
</div>
<div class="flex flex-col justify-between items-center border border-color-grey-lightest p-2">
<div class="w-full">
<div class="text-font-size-small">
<h3 class="text-font-size-small capitalize mb-2">broadway</h3>
<div class="border border-broadway w-full p-1 mb-2">
<div class="text-broadway pb-1 text-center capitalize">Text broadway</div>
<div c