/* ========================================================================= * PART 1: DESIGN SYSTEM CORE * ------------------------------------------------------------------------- * * Author: NISHANTH RAVINDARAN * Company: Ōumĕon * Email: sentience@oumeon.com * * Created: 10 October 2025 * Last Updated: 15 October 2025 * Version: 1.5.0 * License: MIT * * ----------------------------------------------------------------------------- * * ## DESCRIPTION * * This file is the single source of truth for the project's visual design * language. It defines all foundational "design primitives" or "tokens" * as CSS custom properties within the `:root` scope, making them globally * accessible. * * ----------------------------------------------------------------------------- * * ## TABLE OF CONTENTS * * PART 1: DESIGN SYSTEM CORE (VARIABLES) * 1.0 CORE PRIMITIVES * 1.1 Layout & Viewport * 1.2 Colour System * 1.2.1 Day Mode Primitives * 1.2.2 Night Mode Primitives * 1.2.3 Shared System Colours * 1.2.4 Social Colours * 1.3 Typography * 1.3.1 Font Families * 1.3.2 Fluid & Fallback Font Sizes (Conditional) * 1.3.3 Font Weights * 1.3.4 Line Heights * 1.3.5 Letter Spacing * 1.4 Spacing (Conditional) * 1.5 Borders * 1.5.1 Border Radius * 1.5.2 Border Width * 1.6 Stacking (Z-Index) * 1.7 Shadows * * 2.0 THEME MAP (SEMANTIC TOKENS) * 2.1 Day Mode Theme (Default) * 2.2 Night Mode Theme * * ----------------------------------------------------------------------------- * * ## NAMING CONVENTION * --oumeon-{category}-{sub-category}-{mode}__{role}--{grade} * Examples: * --oumeon-colour-brand-day__primary--500 * --oumeon-font-size--base * --oumeon-space--700 * * ----------------------------------------------------------------------------- * * ## GENERATION * – Colours: * - CoreFramework (https://coreframework.com/) * - Atlassian (https://atlassian.design/) * - Tailwind (https://tailwindcss.com/docs/colors) * – Type & space: Fluid Type Scale Calculator (https://www.fluid-type-scale.com) * – Shadows: Material Design (https://m3.material.io/, https://htmlcssfreebies.com/material-design-box-shadows/) * – Z-index: Nord Health (https://nordhealth.design/) * * ----------------------------------------------------------------------------- * * ## LICENSE * * MIT License * * © 2025 Ōumĕon. All rights reserved. * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. * * ----------------------------------------------------------------------------- */ :root { /* ========================================================================== MARK: 1.0 MARK: CORE PRIMITIVES ========================================================================== */ /* * ------------------------------------------------------------------------ * MARK: 1.1 Layout & Viewport * ------------------------------------------------------------------------ */ /* Viewport Boundaries */ --oumeon-viewport-width--min: 320px; /* Min Screen Width */ --oumeon-viewport-width--max: 1366px; /* Max Screen Width */ --oumeon-viewport-height--min: 100vh; /* Full Screen Height */ /* Content Boundaries */ --oumeon-paragraph-width--max: 700px; /* Optimal reading line length */ --oumeon-container-padding--inline: clamp( 1.25rem, 5vw, 2.5rem ); /* Site gutter */ /* Structural Dimensions */ --oumeon-header-height--mobile: 60px; --oumeon-header-height--desktop: 100px; /* * ------------------------------------------------------------------------ * MARK: 1.2 Colour System * ------------------------------------------------------------------------ */ /* Day & Night Mode Primitives are generated using CoreFramework */ /* * ------------------------------------------------------------------------ * MARK: 1.2.1 Day Mode Primitives * ------------------------------------------------------------------------ */ /* PRIMARY Colour: Day */ --oumeon-colour-brand-day__primary--100: #d3d9e4; /* Tint */ --oumeon-colour-brand-day__primary--200: #a6b2c9; /* Tint */ --oumeon-colour-brand-day__primary--300: #7d91b0; /* Tint */ --oumeon-colour-brand-day__primary--400: #547096; /* Tint */ --oumeon-colour-brand-day__primary--500: #244e7c; /* Base */ --oumeon-colour-brand-day__primary--600: #224368; /* Shade */ --oumeon-colour-brand-day__primary--700: #1e3552; /* Shade */ --oumeon-colour-brand-day__primary--800: #19293e; /* Shade */ --oumeon-colour-brand-day__primary--900: #141c29; /* Shade */ --oumeon-colour-brand-day__primary--1000: #0e131b; /* Shade */ /* SECONDARY Colour: Day */ --oumeon-colour-brand-day__secondary--100: #fff7d6; /* Subtlest */ --oumeon-colour-brand-day__secondary--200: #ffefad; /* Subtler */ --oumeon-colour-brand-day__secondary--300: #ffe785; /* Subtle */ --oumeon-colour-brand-day__secondary--400: #ffe057; /* Medium Subtle */ --oumeon-colour-brand-day__secondary--500: #fbd914; /* Base */ --oumeon-colour-brand-day__secondary--600: #cbb11a; /* Medium Bold */ --oumeon-colour-brand-day__secondary--700: #a08a1c; /* Bold */ --oumeon-colour-brand-day__secondary--800: #74651a; /* Bolder */ --oumeon-colour-brand-day__secondary--900: #4f4517; /* Boldest */ --oumeon-colour-brand-day__secondary--1000: #282310; /* Deep */ /* TERTIARY Colour: Day */ --oumeon-colour-brand-day__tertiary--100: #dbe8f5; --oumeon-colour-brand-day__tertiary--200: #b3cfea; --oumeon-colour-brand-day__tertiary--300: #8fbae0; --oumeon-colour-brand-day__tertiary--400: #62a1d5; --oumeon-colour-brand-day__tertiary--500: #258dcb; /* Base */ --oumeon-colour-brand-day__tertiary--600: #2675a6; --oumeon-colour-brand-day__tertiary--700: #245e84; --oumeon-colour-brand-day__tertiary--800: #204560; --oumeon-colour-brand-day__tertiary--900: #1b3041; --oumeon-colour-brand-day__tertiary--1000: #121a21; /* ACCENT Colour: Day */ --oumeon-colour-brand-day__accent--100: #fae8e5; --oumeon-colour-brand-day__accent--200: #f3cdc8; --oumeon-colour-brand-day__accent--300: #edb8b1; --oumeon-colour-brand-day__accent--400: #e49f96; --oumeon-colour-brand-day__accent--500: #db887f; /* Base */ --oumeon-colour-brand-day__accent--600: #b4716a; --oumeon-colour-brand-day__accent--700: #8d5953; --oumeon-colour-brand-day__accent--800: #69433f; --oumeon-colour-brand-day__accent--900: #452e2b; --oumeon-colour-brand-day__accent--1000: #241a19; /* * ------------------------------------------------------------------------ * MARK: 1.2.2 Night Mode Primitives * ------------------------------------------------------------------------ */ /* PRIMARY Colour: Night */ --oumeon-colour-brand-night__primary--100: #d3d9e4; --oumeon-colour-brand-night__primary--200: #a6b2c9; --oumeon-colour-brand-night__primary--300: #7d91b0; --oumeon-colour-brand-night__primary--400: #547096; --oumeon-colour-brand-night__primary--500: #244e7c; /* Base */ --oumeon-colour-brand-night__primary--600: #224368; --oumeon-colour-brand-night__primary--700: #1e3552; --oumeon-colour-brand-night__primary--800: #19293e; --oumeon-colour-brand-night__primary--900: #141c29; --oumeon-colour-brand-night__primary--1000: #0e131b; /* SECONDARY Colour: Night */ --oumeon-colour-brand-night__secondary--100: #fff7d6; --oumeon-colour-brand-night__secondary--200: #ffefad; --oumeon-colour-brand-night__secondary--300: #ffe785; --oumeon-colour-brand-night__secondary--400: #ffe057; --oumeon-colour-brand-night__secondary--500: #fbd914; /* Base */ --oumeon-colour-brand-night__secondary--600: #cbb11a; --oumeon-colour-brand-night__secondary--700: #a08a1c; --oumeon-colour-brand-night__secondary--800: #74651a; --oumeon-colour-brand-night__secondary--900: #4f4517; --oumeon-colour-brand-night__secondary--1000: #282310; /* TERTIARY Colour: Night */ --oumeon-colour-brand-night__tertiary--100: #d0d9e2; --oumeon-colour-brand-night__tertiary--200: #a4b6c6; --oumeon-colour-brand-night__tertiary--300: #7892ab; --oumeon-colour-brand-night__tertiary--400: #4c7190; --oumeon-colour-brand-night__tertiary--500: #155175; /* Base */ --oumeon-colour-brand-night__tertiary--600: #16425f; --oumeon-colour-brand-night__tertiary--700: #17384f; --oumeon-colour-brand-night__tertiary--800: #162b3c; --oumeon-colour-brand-night__tertiary--900: #13202b; --oumeon-colour-brand-night__tertiary--1000: #0c1218; /* ACCENT Colour: Night */ --oumeon-colour-brand-night__accent--100: #f8dad3; --oumeon-colour-brand-night__accent--200: #edb6ab; --oumeon-colour-brand-night__accent--300: #df9081; --oumeon-colour-brand-night__accent--400: #d16c5c; --oumeon-colour-brand-night__accent--500: #be4336; /* Base */ --oumeon-colour-brand-night__accent--600: #9e392e; --oumeon-colour-brand-night__accent--700: #7d3026; --oumeon-colour-brand-night__accent--800: #5c261e; --oumeon-colour-brand-night__accent--900: #401d17; --oumeon-colour-brand-night__accent--1000: #25140e; /* * ------------------------------------------------------------------------ * MARK: 1.2.3 Shared System Colours * ------------------------------------------------------------------------ */ /* MARK: Monochromatic */ --oumeon-colour-system-day-night__white: #ffffff; --oumeon-colour-system-day-night__black: #000000; /* System Palette Colours derived from the Atlassian Design System. */ /* https://atlassian.design/foundations/color-new/color-palette-new */ /* Neutral 100-400 from Tailwind Slate, 600-1100 from Atlassian Dark mode */ /* Alphs 100A-500A from Core Framework */ /* NEUTRAL Colour: Day */ /* Solid */ --oumeon-colour-system-day__neutral--0: #ffffff; /* White */ --oumeon-colour-system-day__neutral--100: #f1f5f9; /* BG of Cards */ --oumeon-colour-system-day__neutral--200: #e2e8f0; /* Subtle Accents */ --oumeon-colour-system-day__neutral--300: #cbd5e1; /* Borders */ --oumeon-colour-system-day__neutral--400: #94a3b8; --oumeon-colour-system-day__neutral--500: #596773; /* Base */ --oumeon-colour-system-day__neutral--600: #454f59; --oumeon-colour-system-day__neutral--700: #2c333a; --oumeon-colour-system-day__neutral--800: #22272b; --oumeon-colour-system-day__neutral--900: #1d2125; /* Light Text */ --oumeon-colour-system-day__neutral--1000: #161a1d; /* Body */ --oumeon-colour-system-day__neutral--1100: #131516; /* Heading */ /* Alpha */ --oumeon-colour-system-day__neutral--100A: #0f172a1a; --oumeon-colour-system-day__neutral--200A: #0f172a33; --oumeon-colour-system-day__neutral--300A: #0f172a4d; --oumeon-colour-system-day__neutral--400A: #0f172a66; --oumeon-colour-system-day__neutral--500A: #0f172a80; --oumeon-colour-system-day__neutral--600A: #0f172a99; --oumeon-colour-system-day__neutral--700A: #0f172ab3; --oumeon-colour-system-day__neutral--800A: #0f172acc; --oumeon-colour-system-day__neutral--900A: #0f172ae6; /* NEUTRAL Colour: Night */ /* Solid */ --oumeon-colour-system-night__neutral--0: #161a1d; --oumeon-colour-system-night__neutral--100: #1d2125; --oumeon-colour-system-night__neutral--200: #22272b; --oumeon-colour-system-night__neutral--250: #282e33; --oumeon-colour-system-night__neutral--300: #2c333a; --oumeon-colour-system-night__neutral--350: #38414a; --oumeon-colour-system-night__neutral--400: #454f59; --oumeon-colour-system-night__neutral--500: #596773; /* Base */ --oumeon-colour-system-night__neutral--600: #94a3b8; --oumeon-colour-system-night__neutral--700: #cbd5e1; --oumeon-colour-system-night__neutral--800: #e2e8f0; --oumeon-colour-system-night__neutral--900: #f1f5f9; --oumeon-colour-system-night__neutral--1000: #f8fafc; --oumeon-colour-system-night__neutral--1100: #dee4ea; /* Alpha */ --oumeon-colour-system-night__neutral--100A: #0f172ae6; --oumeon-colour-system-night__neutral--200A: #0f172acc; --oumeon-colour-system-night__neutral--300A: #0f172ab3; --oumeon-colour-system-night__neutral--400A: #0f172a99; --oumeon-colour-system-night__neutral--500A: #0f172a80; --oumeon-colour-system-night__neutral--600A: #0f172a66; --oumeon-colour-system-night__neutral--700A: #0f172a4d; --oumeon-colour-system-night__neutral--800A: #0f172a33; --oumeon-colour-system-night__neutral--900A: #0f172a1a; /* RED Saturated Colour: Day & Night */ --oumeon-colour-system__red--100: #ffeceb; --oumeon-colour-system__red--200: #ffd5d2; --oumeon-colour-system__red--300: #fd9891; --oumeon-colour-system__red--400: #f87168; --oumeon-colour-system__red--500: #f15b50; /* Base in Day Mode */ --oumeon-colour-system__red--600: #e2483d; /* Base in Night Mode */ --oumeon-colour-system__red--700: #c9372c; --oumeon-colour-system__red--800: #ae2e24; --oumeon-colour-system__red--900: #5d1f1a; --oumeon-colour-system__red--1000: #42221f; /* GREEN Saturated Colour: Day & Night */ --oumeon-colour-system__green--100: #dcfff1; --oumeon-colour-system__green--200: #baf3db; --oumeon-colour-system__green--300: #7ee2b8; --oumeon-colour-system__green--400: #4bce97; --oumeon-colour-system__green--500: #2abb7f; /* Base in Day Mode */ --oumeon-colour-system__green--600: #22a06b; /* Base in Night Mode */ --oumeon-colour-system__green--700: #1f845a; --oumeon-colour-system__green--800: #216e4e; --oumeon-colour-system__green--900: #164b35; --oumeon-colour-system__green--1000: #1c3329; /* BLUE Saturated Colour: Day & Night */ --oumeon-colour-system__blue--100: #e9f2ff; --oumeon-colour-system__blue--200: #cce0ff; --oumeon-colour-system__blue--300: #85b8ff; --oumeon-colour-system__blue--400: #579dff; --oumeon-colour-system__blue--500: #388bff; /* Base in Day Mode */ --oumeon-colour-system__blue--600: #1d7afc; /* Base in Night Mode */ --oumeon-colour-system__blue--700: #0c66e4; --oumeon-colour-system__blue--800: #0055cc; --oumeon-colour-system__blue--900: #09326c; --oumeon-colour-system__blue--1000: #1c2b41; /* TEAL Saturated Colour: Day & Night */ --oumeon-colour-system__teal--100: #e7f9ff; --oumeon-colour-system__teal--200: #c6edfb; --oumeon-colour-system__teal--300: #9dd9ee; --oumeon-colour-system__teal--400: #6cc3e0; --oumeon-colour-system__teal--500: #42b2d7; /* Base in Day Mode */ --oumeon-colour-system__teal--600: #2898bd; /* Base in Night Mode */ --oumeon-colour-system__teal--700: #227d9b; --oumeon-colour-system__teal--800: #206a83; --oumeon-colour-system__teal--900: #164555; --oumeon-colour-system__teal--1000: #1e3137; /* MAGENTA Saturated Colour: Day & Night */ --oumeon-colour-system__magenta--100: #ffecf8; --oumeon-colour-system__magenta--200: #fdd0ec; --oumeon-colour-system__magenta--300: #f797d2; --oumeon-colour-system__magenta--400: #e774bb; --oumeon-colour-system__magenta--500: #da62ac; /* Base in Day Mode */ --oumeon-colour-system__magenta--600: #cd519d; /* Base in Night Mode */ --oumeon-colour-system__magenta--700: #ae4787; --oumeon-colour-system__magenta--800: #943d73; --oumeon-colour-system__magenta--900: #50253f; --oumeon-colour-system__magenta--1000: #3d2232; /* YELLOW Saturated Colour: Day & Night */ --oumeon-colour-system__yellow--100: #fff7d6; --oumeon-colour-system__yellow--200: #f8e6a0; --oumeon-colour-system__yellow--300: #f5cd47; --oumeon-colour-system__yellow--400: #e2b203; --oumeon-colour-system__yellow--500: #cf9f02; /* Base in Day Mode */ --oumeon-colour-system__yellow--600: #b38600; /* Base in Night Mode */ --oumeon-colour-system__yellow--700: #946f00; --oumeon-colour-system__yellow--800: #7f5f01; --oumeon-colour-system__yellow--900: #533f04; --oumeon-colour-system__yellow--1000: #332e1b; /* ORANGE Saturated Colour: Day & Night */ --oumeon-colour-system__orange--100: #fff3eb; --oumeon-colour-system__orange--200: #fedec8; --oumeon-colour-system__orange--300: #fec195; --oumeon-colour-system__orange--400: #fea362; --oumeon-colour-system__orange--500: #f38a3f; /* Base in Day Mode */ --oumeon-colour-system__orange--600: #e56910; /* Base in Night Mode */ --oumeon-colour-system__orange--700: #c25100; --oumeon-colour-system__orange--800: #a54800; --oumeon-colour-system__orange--900: #702e00; --oumeon-colour-system__orange--1000: #38291e; /* LIME Saturated Colour: Day & Night */ --oumeon-colour-system__lime--100: #efffd6; --oumeon-colour-system__lime--200: #d3f1a7; --oumeon-colour-system__lime--300: #b3df72; --oumeon-colour-system__lime--400: #94c748; --oumeon-colour-system__lime--500: #82b536; /* Base in Day Mode */ --oumeon-colour-system__lime--600: #6a9a23; /* Base in Night Mode */ --oumeon-colour-system__lime--700: #5b7f24; --oumeon-colour-system__lime--800: #4c6b1f; --oumeon-colour-system__lime--900: #37471f; --oumeon-colour-system__lime--1000: #28311b; /* PURPLE Saturated Colour: Day & Night */ --oumeon-colour-system__purple--100: #ffecf8; --oumeon-colour-system__purple--200: #fdd0ec; --oumeon-colour-system__purple--300: #f797d2; --oumeon-colour-system__purple--400: #e774bb; --oumeon-colour-system__purple--500: #da62ac; /* Base in Day Mode */ --oumeon-colour-system__purple--600: #cd519d; /* Base in Night Mode */ --oumeon-colour-system__purple--700: #ae4787; --oumeon-colour-system__purple--800: #943d73; --oumeon-colour-system__purple--900: #50253f; --oumeon-colour-system__purple--1000: #3d2232; /* * ------------------------------------------------------------------------ * MARK: 1.2.4 Social Colours * ------------------------------------------------------------------------ */ /* Facebook */ --oumeon-colour-system__social-facebook: #4267b2; --oumeon-colour-system__social-facebook--hover: #587fd8; --oumeon-colour-system__social-facebook--active: #33528b; /* X (Twitter) */ --oumeon-colour-system__social-x: #000000; --oumeon-colour-system__social-x--hover: #333333; /* Slightly visible grey on hover */ --oumeon-colour-system__social-x--active: #000000; /* LinkedIn */ --oumeon-colour-system__social-linkedin: #0077b5; --oumeon-colour-system__social-linkedin--hover: #0090de; --oumeon-colour-system__social-linkedin--active: #006399; /* Instagram */ --oumeon-colour-system__social-instagram: #833ab4; /* Using the deep purple accent */ --oumeon-colour-system__social-instagram--hover: #9d53d6; --oumeon-colour-system__social-instagram--active: #6a2f96; /* WhatsApp */ --oumeon-colour-system__social-whatsapp: #25d366; --oumeon-colour-system__social-whatsapp--hover: #1da851; --oumeon-colour-system__social-whatsapp--active: #168a4a; /* Telegram */ --oumeon-colour-system__social-telegram: #24a1de; --oumeon-colour-system__social-telegram--hover: #3ab3f5; --oumeon-colour-system__social-telegram--active: #1d85b7; /* Reddit */ --oumeon-colour-system__social-reddit: #ff4500; --oumeon-colour-system__social-reddit--hover: #ff6c33; --oumeon-colour-system__social-reddit--active: #cc3700; /* Quora */ --oumeon-colour-system__social-quora: #b92b27; --oumeon-colour-system__social-quora--hover: #d53a36; --oumeon-colour-system__social-quora--active: #942320; /* Pinterest */ --oumeon-colour-system__social-pinterest: #e60023; --oumeon-colour-system__social-pinterest--hover: #ff3350; --oumeon-colour-system__social-pinterest--active: #b8001c; /* Mastodon */ --oumeon-colour-system__social-mastodon: #6364ff; --oumeon-colour-system__social-mastodon--hover: #8686ff; --oumeon-colour-system__social-mastodon--active: #4f50cc; /* YouTube */ --oumeon-colour-system__social-youtube: #ff0000; --oumeon-colour-system__social-youtube--hover: #ff3333; --oumeon-colour-system__social-youtube--active: #cc0000; /* * ------------------------------------------------------------------------ * MARK: 1.3 Typography * ------------------------------------------------------------------------ */ /* * ------------------------------------------------------------------------ * MARK: 1.3.1 Font Families * ------------------------------------------------------------------------ */ /* Font Family: Brand Fonts */ --oumeon-font-family__brand--heading: 'Inter'; --oumeon-font-family__brand--subheading: 'Inter'; --oumeon-font-family__brand--body: 'Inter'; /* Base */ --oumeon-font-family__brand--commerce: 'Inter'; --oumeon-font-family__brand--monospace: 'Inter'; --oumeon-font-family__brand--cursive: 'Inter'; /* Font Family: System Fonts */ --oumeon-font-family__default--sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, Verdana, 'Trebuchet MS', Tahoma, 'Lucida Grande', 'Noto Sans', 'Open Sans', 'Droid Sans', 'DejaVu Sans', 'Liberation Sans', 'Ubuntu', 'FreeSans', 'Bitstream Vera Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --oumeon-font-family__default--serif: ui-serif, Georgia, 'Times New Roman', Merriweather, 'Palatino Linotype', Garamond, Baskerville, Bookman, Cambria, 'Liberation Serif', 'DejaVu Serif', 'FreeSerif', serif; --oumeon-font-family__default--monospace: ui-monospace, SFMono-Regular, Menlo, 'Courier New', 'Lucida Console', Consolas, Monaco, 'DejaVu Sans Mono', 'Liberation Mono', 'Source Code Pro', 'Fira Code', 'Inconsolata', 'Droid Sans Mono', 'Ubuntu Mono', monospace; --oumeon-font-family__default--cursive: ui-serif, 'Comic Sans MS', 'Brush Script MT', 'Lucida Handwriting', 'Segoe Script', 'DejaVu Sans', 'Droid Sans', cursive; } /* * ------------------------------------------------------------------------ * MARK: 1.3.2 Fluid Font Sizes * ------------------------------------------------------------------------ */ /* |-------------------------------------------------------------------------- | Fluid Font Size System Documentation |-------------------------------------------------------------------------- | | Generated using Fluid Type Scale Calculator: | https://www.fluid-type-scale.com/calculate?minFontSize=15&minWidth=320&minRatio=1.067&maxFontSize=17&maxWidth=1366&maxRatio=1.125&steps=4xs%2C3xs%2C2xs%2Cxs%2Cs%2Cbase%2Cl%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl%2C7xl&baseStep=base&prefix=oumeon-font-size-&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=10&decimals=2&previewFont=Inter&previewText=Unleash+your+style+with+Hype+Funda&previewWidth=1280 | | VIEWPORT BOUNDARIES & RATIOS: | ----------------------------- | Minimum (Mobile) | - Base font size (px): 15 | - Screen width (px): 320 | - Type scale ratio: 1.067 (Minor Second) | | Maximum (Desktop) | - Base font size (px): 17 | - Screen width (px): 1366 | - Type scale ratio: 1.125 (Major Second) | | REM VALUE: 10 pixels (Assumes root font size is set to 62.5%) | |-------------------------------------------------------------------------- | Fluid Font Size Mapping (Usage Roles) |-------------------------------------------------------------------------- | Maps utility size levels to their primary usage roles. | | LEVEL | USAGE ROLE |-------------------------------------------------------------------------- | 7XL | Display Large | 6XL | Display | 5XL | H1, Body 2XL | 4XL | H2 | 3XL | H3, Body XL | 2XL | H4 | XL | H5, Body Large, Sub-heading Large | L | H6, Sub-heading | Base | Body, Sub-heading Small | S | Body Small | XS | Body Extra Small | 2XS | Auxiliary Text (e.g., Copyright, Utility) | 3XS | Fine Print / Micro Text | 4XS | Ultra Fine Print |-------------------------------------------------------------------------- */ /* For browsers that support clamp */ @supports (font-size: clamp(1rem, 1vi, 1rem)) { :root { --oumeon-font-size--4xs: clamp(1.08rem, -0.14vi + 1.13rem, 0.94rem); --oumeon-font-size--3xs: clamp(1.16rem, -0.09vi + 1.19rem, 1.06rem); --oumeon-font-size--2xs: clamp(1.23rem, -0.04vi + 1.25rem, 1.19rem); --oumeon-font-size--xs: clamp(1.32rem, 0.02vi + 1.31rem, 1.34rem); --oumeon-font-size--s: clamp(1.41rem, 0.1vi + 1.37rem, 1.51rem); --oumeon-font-size--base: clamp(1.5rem, 0.19vi + 1.44rem, 1.7rem); --oumeon-font-size--l: clamp(1.6rem, 0.3vi + 1.51rem, 1.91rem); --oumeon-font-size--xl: clamp(1.71rem, 0.42vi + 1.57rem, 2.15rem); --oumeon-font-size--2xl: clamp(1.82rem, 0.57vi + 1.64rem, 2.42rem); --oumeon-font-size--3xl: clamp(1.94rem, 0.74vi + 1.71rem, 2.72rem); --oumeon-font-size--4xl: clamp(2.07rem, 0.95vi + 1.77rem, 3.06rem); --oumeon-font-size--5xl: clamp(2.21rem, 1.18vi + 1.84rem, 3.45rem); --oumeon-font-size--6xl: clamp(2.36rem, 1.45vi + 1.9rem, 3.88rem); --oumeon-font-size--7xl: clamp(2.52rem, 1.76vi + 1.96rem, 4.36rem); } } /* For browsers that don't support clamp */ @supports not (font-size: clamp(1rem, 1vi, 1rem)) { :root { --oumeon-font-size--4xs: 1.08rem; --oumeon-font-size--3xs: 1.16rem; --oumeon-font-size--2xs: 1.23rem; --oumeon-font-size--xs: 1.32rem; --oumeon-font-size--s: 1.41rem; --oumeon-font-size--base: 1.5rem; --oumeon-font-size--l: 1.6rem; --oumeon-font-size--xl: 1.71rem; --oumeon-font-size--2xl: 1.82rem; --oumeon-font-size--3xl: 1.94rem; --oumeon-font-size--4xl: 2.07rem; --oumeon-font-size--5xl: 2.21rem; --oumeon-font-size--6xl: 2.36rem; --oumeon-font-size--7xl: 2.52rem; } @media screen and (min-width: 1366px) { :root { --oumeon-font-size--4xs: 0.94rem; --oumeon-font-size--3xs: 1.06rem; --oumeon-font-size--2xs: 1.19rem; --oumeon-font-size--xs: 1.34rem; --oumeon-font-size--s: 1.51rem; --oumeon-font-size--base: 1.7rem; --oumeon-font-size--l: 1.91rem; --oumeon-font-size--xl: 2.15rem; --oumeon-font-size--2xl: 2.42rem; --oumeon-font-size--3xl: 2.72rem; --oumeon-font-size--4xl: 3.06rem; --oumeon-font-size--5xl: 3.45rem; --oumeon-font-size--6xl: 3.88rem; --oumeon-font-size--7xl: 4.36rem; } } } :root { /* * ------------------------------------------------------------------------ * MARK: 1.3.3 Font Weights * ------------------------------------------------------------------------ */ --oumeon-font-weight--100: 100; --oumeon-font-weight--200: 200; --oumeon-font-weight--300: 300; --oumeon-font-weight--400: 400; /* Body */ --oumeon-font-weight--500: 500; --oumeon-font-weight--600: 600; /* H3, H4, H5, H6 */ --oumeon-font-weight--700: 700; /* H1, H2 */ --oumeon-font-weight--800: 800; --oumeon-font-weight--900: 900; --oumeon-font-weight--950: 950; /* * ------------------------------------------------------------------------ * MARK: 1.3.4 Line Heights * ------------------------------------------------------------------------ */ --oumeon-line-height--200: 1.2; /* H1, H2, H3 */ --oumeon-line-height--300: 1.3; /* H4, H5 */ --oumeon-line-height--400: 1.4; /* H6 */ --oumeon-line-height--500: 1.5; /* Ideal Line Height as per WCAG Standards. */ --oumeon-line-height--600: 1.6; --oumeon-line-height--700: 1.7; --oumeon-line-height--800: 1.8; --oumeon-line-height--900: 1.9; --oumeon-line-height--1000: 2; /* * ------------------------------------------------------------------------ * MARK: 1.3.5 Letter Spacing * ------------------------------------------------------------------------ */ --oumeon-letter-spacing--400: -0.05em; --oumeon-letter-spacing--500: 0; /* Base */ --oumeon-letter-spacing--600: 0.05em; --oumeon-letter-spacing--700: 0.1em; --oumeon-letter-spacing--800: 0.15em; --oumeon-letter-spacing--900: 0.2em; } /* * ------------------------------------------------------------------------ * MARK: 1.4 Spacing * ------------------------------------------------------------------------ */ /* Generated using Fluid Type Scale Calculator: https://www.fluid-type-scale.com/calculate?minFontSize=15&minWidth=320&minRatio=1.25&maxFontSize=26&maxWidth=1366&maxRatio=1.414&steps=250%2C300%2C350%2C400%2C450%2C500%2C550%2C600%2C650%2C700%2C750%2C800%2C850%2C900&baseStep=500&prefix=oumeon-space-&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=10&decimals=2&previewFont=Inter&previewText=Unleash%20your%20style%20with%20Hype%20Funda&previewWidth=1280 Minimum (Mobile) - Base font size (px): 15 - Screen width (px): 320 - Type scale ratio: 1.25 (Major Third) Maximum (Desktop) - Base font size (px): 26 - Screen width (px): 1366 - Type scale ratio: 1.414 (Augmented Fourth) Rem value (pixels): 10 (If you set your root font size to 62.5%, then 1rem equals 10px.) */ /* For browsers that support clamp */ @supports (font-size: clamp(1rem, 1vi, 1rem)) { :root { --oumeon-space--250: clamp(0.49rem, -0.03vi + 0.5rem, 0.46rem); --oumeon-space--300: clamp(0.61rem, 0.03vi + 0.6rem, 0.65rem); --oumeon-space--350: clamp(0.77rem, 0.14vi + 0.72rem, 0.92rem); --oumeon-space--400: clamp(0.96rem, 0.33vi + 0.86rem, 1.3rem); --oumeon-space--450: clamp(1.2rem, 0.61vi + 1rem, 1.84rem); --oumeon-space--500: clamp(1.5rem, 1.05vi + 1.16rem, 2.6rem); /* Base */ --oumeon-space--550: clamp(1.88rem, 1.72vi + 1.32rem, 3.68rem); --oumeon-space--600: clamp(2.34rem, 2.73vi + 1.47rem, 5.2rem); --oumeon-space--650: clamp(2.93rem, 4.23vi + 1.58rem, 7.35rem); --oumeon-space--700: clamp(3.66rem, 6.44vi + 1.6rem, 10.39rem); --oumeon-space--750: clamp(4.58rem, 9.67vi + 1.48rem, 14.7rem); --oumeon-space--800: clamp(5.72rem, 14.4vi + 1.12rem, 20.78rem); --oumeon-space--850: clamp(7.15rem, 21.25vi + 0.35rem, 29.38rem); --oumeon-space--900: clamp(8.94rem, 31.18vi + -1.04rem, 41.55rem); } } /* For browsers that don't support clamp */ @supports not (font-size: clamp(1rem, 1vi, 1rem)) { :root { --oumeon-space--250: 0.49rem; --oumeon-space--300: 0.61rem; --oumeon-space--350: 0.77rem; --oumeon-space--400: 0.96rem; --oumeon-space--450: 1.2rem; --oumeon-space--500: 1.5rem; /* Base */ --oumeon-space--550: 1.88rem; --oumeon-space--600: 2.34rem; --oumeon-space--650: 2.93rem; --oumeon-space--700: 3.66rem; --oumeon-space--750: 4.58rem; --oumeon-space--800: 5.72rem; --oumeon-space--850: 7.15rem; --oumeon-space--900: 8.94rem; } @media screen and (min-width: 1366px) { :root { --oumeon-space--250: 0.46rem; --oumeon-space--300: 0.65rem; --oumeon-space--350: 0.92rem; --oumeon-space--400: 1.3rem; --oumeon-space--450: 1.84rem; --oumeon-space--500: 2.6rem; /* Base */ --oumeon-space--550: 3.68rem; --oumeon-space--600: 5.2rem; --oumeon-space--650: 7.35rem; --oumeon-space--700: 10.39rem; --oumeon-space--750: 14.7rem; --oumeon-space--800: 20.78rem; --oumeon-space--850: 29.38rem; --oumeon-space--900: 41.55rem; } } } :root { /* * ------------------------------------------------------------------------ * MARK: 1.5 Borders * ------------------------------------------------------------------------ */ /* * ------------------------------------------------------------------------ * MARK: 1.5.1 Border Radius * ------------------------------------------------------------------------ */ /* Generated using CoreFramework */ --oumeon-border-radius--0: 0; --oumeon-border-radius--100: clamp(0.4rem, calc(0vw + 0.4rem), 0.4rem); --oumeon-border-radius--200: clamp(0.6rem, calc(-0.19vw + 0.86rem), 0.8rem); --oumeon-border-radius--300: clamp(1rem, calc(-0.19vw + 1.26rem), 1.2rem); --oumeon-border-radius--400: clamp(1.6rem, calc(-0.38vw + 2.12rem), 2rem); --oumeon-border-radius--500: clamp(2.6rem, calc(-0.57vw + 3.38rem), 3.2rem); --oumeon-border-radius--800: 999rem; --oumeon-border-radius--900: 50%; --oumeon-border-radius--default: var(--oumeon-border-radius--400); --oumeon-border-radius--mobile: var(--oumeon-border-radius--200); /* * ------------------------------------------------------------------------ * MARK: 1.5.2 Border Width * ------------------------------------------------------------------------ */ --oumeon-border-width--0: 0; --oumeon-border-width--50: 0.5px; --oumeon-border-width--100: 1px; /* Base */ --oumeon-border-width--200: 2px; --oumeon-border-width--300: 3px; --oumeon-border-width--400: 4px; --oumeon-border-width--500: 5px; /* * ------------------------------------------------------------------------ * MARK: 1.6 Stacking (Z-Index) * ------------------------------------------------------------------------ */ /* Taken from https://nordhealth.design */ --oumeon-zindex--neg99: -999999; /* Used to stack something behind everything else. */ --oumeon-zindex--neg5: -5; /* Used to stack something behind default. */ --oumeon-zindex--0: 0; /* The default z-index for components and elements inside components. */ --oumeon-zindex--100: 100; /* Default z-index for masked interface elements. */ --oumeon-zindex--200: 200; /* Default z-index for dropdown interface elements. */ --oumeon-zindex--300: 300; /* Default z-index for sticky interface elements. */ --oumeon-zindex--400: 400; /* Default z-index for navigation. */ --oumeon-zindex--500: 500; /* Default z-index for top bar. */ --oumeon-zindex--600: 600; /* Default z-index for modal and popup overlays. */ --oumeon-zindex--700: 700; /* Default z-index for spinners, stacking on top of overlay. */ --oumeon-zindex--800: 800; /* Default z-index for popouts that stacks on top of all other elements. */ --oumeon-zindex--900: 900; /* Default z-index for toast messages. */ --oumeon-zindex--1000: 1000; /* Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible. */ /* * ------------------------------------------------------------------------ * MARK: 1.7 Shadows * ------------------------------------------------------------------------ */ /* Taken from Material Design: https://htmlcssfreebies.com/material-design-box-shadows/ */ --oumeon-box-shadow--100: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); --oumeon-box-shadow--200: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); --oumeon-box-shadow--300: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); --oumeon-box-shadow--400: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); --oumeon-box-shadow--500: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); --oumeon-box-shadow--600: 0 29px 52px rgba(0, 0, 0, 0.4), 0 25px 16px rgba(0, 0, 0, 0.2); --oumeon-box-shadow--700: 0 45px 65px rgba(0, 0, 0, 0.5), 0 35px 22px rgba(0, 0, 0, 0.16); --oumeon-box-shadow--800: 0 60px 80px rgba(0, 0, 0, 0.6), 0 45px 26px rgba(0, 0, 0, 0.14); --oumeon-box-shadow--bold-black: 6px 12px 0 var(--oumeon-colour-black); --oumeon-box-shadow--bold-primary: 6px 12px 0 var(--oumeon-colour-primary-500); --oumeon-box-shadow--bold-secondary: 6px 12px 0 var(--oumeon-colour-secondary-500); --oumeon-box-shadow--bold-accent: 6px 12px 0 var(--oumeon-colour-accent-500); } /* ========================================================================== MARK: 2.0 THEME MAP (SEMANTIC TOKENS) ========================================================================== */ /* * ------------------------------------------------------------------------ * MARK: 2.1 Day Mode Theme (Default) * ------------------------------------------------------------------------ */ :root, .brxc-light-colors, html[data-theme='dark'] .brxc-reversed-colors, html[data-theme='light'] .brxc-initial-colors { /* Monochromatic */ --oumeon-colour-white: var(--oumeon-colour-system-day-night__white); --oumeon-colour-black: var(--oumeon-colour-system-day-night__black); /* PRIMARY Colour: Day */ --oumeon-colour-primary-100: var(--oumeon-colour-brand-day__primary--100); --oumeon-colour-primary-200: var(--oumeon-colour-brand-day__primary--200); --oumeon-colour-primary-300: var(--oumeon-colour-brand-day__primary--300); --oumeon-colour-primary-400: var(--oumeon-colour-brand-day__primary--400); --oumeon-colour-primary-500: var(--oumeon-colour-brand-day__primary--500); --oumeon-colour-primary-600: var(--oumeon-colour-brand-day__primary--600); --oumeon-colour-primary-700: var(--oumeon-colour-brand-day__primary--700); --oumeon-colour-primary-800: var(--oumeon-colour-brand-day__primary--800); --oumeon-colour-primary-900: var(--oumeon-colour-brand-day__primary--900); --oumeon-colour-primary-1000: var(--oumeon-colour-brand-day__primary--1000); /* SECONDARY Colour: Day */ --oumeon-colour-secondary-100: var( --oumeon-colour-brand-day__secondary--100 ); --oumeon-colour-secondary-200: var( --oumeon-colour-brand-day__secondary--200 ); --oumeon-colour-secondary-300: var( --oumeon-colour-brand-day__secondary--300 ); --oumeon-colour-secondary-400: var( --oumeon-colour-brand-day__secondary--400 ); --oumeon-colour-secondary-500: var( --oumeon-colour-brand-day__secondary--500 ); --oumeon-colour-secondary-600: var( --oumeon-colour-brand-day__secondary--600 ); --oumeon-colour-secondary-700: var( --oumeon-colour-brand-day__secondary--700 ); --oumeon-colour-secondary-800: var( --oumeon-colour-brand-day__secondary--800 ); --oumeon-colour-secondary-900: var( --oumeon-colour-brand-day__secondary--900 ); --oumeon-colour-secondary-1000: var( --oumeon-colour-brand-day__secondary--1000 ); /* TERTIARY Colour: Day */ --oumeon-colour-tertiary-100: var(--oumeon-colour-brand-day__tertiary--100); --oumeon-colour-tertiary-200: var(--oumeon-colour-brand-day__tertiary--200); --oumeon-colour-tertiary-300: var(--oumeon-colour-brand-day__tertiary--300); --oumeon-colour-tertiary-400: var(--oumeon-colour-brand-day__tertiary--400); --oumeon-colour-tertiary-500: var(--oumeon-colour-brand-day__tertiary--500); --oumeon-colour-tertiary-600: var(--oumeon-colour-brand-day__tertiary--600); --oumeon-colour-tertiary-700: var(--oumeon-colour-brand-day__tertiary--700); --oumeon-colour-tertiary-800: var(--oumeon-colour-brand-day__tertiary--800); --oumeon-colour-tertiary-900: var(--oumeon-colour-brand-day__tertiary--900); --oumeon-colour-tertiary-1000: var( --oumeon-colour-brand-day__tertiary--1000 ); /* ACCENT Colour: Day */ --oumeon-colour-accent-100: var(--oumeon-colour-brand-day__accent--100); --oumeon-colour-accent-200: var(--oumeon-colour-brand-day__accent--200); --oumeon-colour-accent-300: var(--oumeon-colour-brand-day__accent--300); --oumeon-colour-accent-400: var(--oumeon-colour-brand-day__accent--400); --oumeon-colour-accent-500: var(--oumeon-colour-brand-day__accent--500); --oumeon-colour-accent-600: var(--oumeon-colour-brand-day__accent--600); --oumeon-colour-accent-700: var(--oumeon-colour-brand-day__accent--700); --oumeon-colour-accent-800: var(--oumeon-colour-brand-day__accent--800); --oumeon-colour-accent-900: var(--oumeon-colour-brand-day__accent--900); --oumeon-colour-accent-1000: var(--oumeon-colour-brand-day__accent--1000); /* NEUTRAL Colour: Day */ /* Solid */ --oumeon-colour-neutral-0: var(--oumeon-colour-system-day__neutral--0); --oumeon-colour-neutral-100: var(--oumeon-colour-system-day__neutral--100); --oumeon-colour-neutral-200: var(--oumeon-colour-system-day__neutral--200); --oumeon-colour-neutral-300: var(--oumeon-colour-system-day__neutral--300); --oumeon-colour-neutral-400: var(--oumeon-colour-system-day__neutral--400); --oumeon-colour-neutral-500: var(--oumeon-colour-system-day__neutral--500); --oumeon-colour-neutral-600: var(--oumeon-colour-system-day__neutral--600); --oumeon-colour-neutral-700: var(--oumeon-colour-system-day__neutral--700); --oumeon-colour-neutral-800: var(--oumeon-colour-system-day__neutral--800); --oumeon-colour-neutral-900: var(--oumeon-colour-system-day__neutral--900); --oumeon-colour-neutral-1000: var( --oumeon-colour-system-day__neutral--1000 ); --oumeon-colour-neutral-1100: var( --oumeon-colour-system-day__neutral--1100 ); /* Alpha */ --oumeon-colour-neutral-100A: var( --oumeon-colour-system-day__neutral--100A ); --oumeon-colour-neutral-200A: var( --oumeon-colour-system-day__neutral--200A ); --oumeon-colour-neutral-300A: var( --oumeon-colour-system-day__neutral--300A ); --oumeon-colour-neutral-400A: var( --oumeon-colour-system-day__neutral--400A ); --oumeon-colour-neutral-500A: var( --oumeon-colour-system-day__neutral--500A ); --oumeon-colour-neutral-600A: var( --oumeon-colour-system-day__neutral--600A ); --oumeon-colour-neutral-700A: var( --oumeon-colour-system-day__neutral--700A ); --oumeon-colour-neutral-800A: var( --oumeon-colour-system-day__neutral--800A ); --oumeon-colour-neutral-900A: var( --oumeon-colour-system-day__neutral--900A ); /* RED Saturated Colour: Day */ --oumeon-colour-red-100: var(--oumeon-colour-system__red--100); --oumeon-colour-red-200: var(--oumeon-colour-system__red--200); --oumeon-colour-red-300: var(--oumeon-colour-system__red--300); --oumeon-colour-red-400: var(--oumeon-colour-system__red--400); --oumeon-colour-red-500: var(--oumeon-colour-system__red--500); --oumeon-colour-red-600: var(--oumeon-colour-system__red--600); --oumeon-colour-red-700: var(--oumeon-colour-system__red--700); --oumeon-colour-red-800: var(--oumeon-colour-system__red--800); --oumeon-colour-red-900: var(--oumeon-colour-system__red--900); --oumeon-colour-red-1000: var(--oumeon-colour-system__red--1000); /* GREEN Saturated Colour: Day */ --oumeon-colour-green-100: var(--oumeon-colour-system__green--100); --oumeon-colour-green-200: var(--oumeon-colour-system__green--200); --oumeon-colour-green-300: var(--oumeon-colour-system__green--300); --oumeon-colour-green-400: var(--oumeon-colour-system__green--400); --oumeon-colour-green-500: var(--oumeon-colour-system__green--500); --oumeon-colour-green-600: var(--oumeon-colour-system__green--600); --oumeon-colour-green-700: var(--oumeon-colour-system__green--700); --oumeon-colour-green-800: var(--oumeon-colour-system__green--800); --oumeon-colour-green-900: var(--oumeon-colour-system__green--900); --oumeon-colour-green-1000: var(--oumeon-colour-system__green--1000); /* BLUE Saturated Colour: Day */ --oumeon-colour-blue-100: var(--oumeon-colour-system__blue--100); --oumeon-colour-blue-200: var(--oumeon-colour-system__blue--200); --oumeon-colour-blue-300: var(--oumeon-colour-system__blue--300); --oumeon-colour-blue-400: var(--oumeon-colour-system__blue--400); --oumeon-colour-blue-500: var(--oumeon-colour-system__blue--500); --oumeon-colour-blue-600: var(--oumeon-colour-system__blue--600); --oumeon-colour-blue-700: var(--oumeon-colour-system__blue--700); --oumeon-colour-blue-800: var(--oumeon-colour-system__blue--800); --oumeon-colour-blue-900: var(--oumeon-colour-system__blue--900); --oumeon-colour-blue-1000: var(--oumeon-colour-system__blue--1000); /* TEAL Saturated Colour: Day */ --oumeon-colour-teal-100: var(--oumeon-colour-system__teal--100); --oumeon-colour-teal-200: var(--oumeon-colour-system__teal--200); --oumeon-colour-teal-300: var(--oumeon-colour-system__teal--300); --oumeon-colour-teal-400: var(--oumeon-colour-system__teal--400); --oumeon-colour-teal-500: var(--oumeon-colour-system__teal--500); --oumeon-colour-teal-600: var(--oumeon-colour-system__teal--600); --oumeon-colour-teal-700: var(--oumeon-colour-system__teal--700); --oumeon-colour-teal-800: var(--oumeon-colour-system__teal--800); --oumeon-colour-teal-900: var(--oumeon-colour-system__teal--900); --oumeon-colour-teal-1000: var(--oumeon-colour-system__teal--1000); /* MAGENTA Saturated Colour: Day */ --oumeon-colour-magenta-100: var(--oumeon-colour-system__magenta--100); --oumeon-colour-magenta-200: var(--oumeon-colour-system__magenta--200); --oumeon-colour-magenta-300: var(--oumeon-colour-system__magenta--300); --oumeon-colour-magenta-400: var(--oumeon-colour-system__magenta--400); --oumeon-colour-magenta-500: var(--oumeon-colour-system__magenta--500); --oumeon-colour-magenta-600: var(--oumeon-colour-system__magenta--600); --oumeon-colour-magenta-700: var(--oumeon-colour-system__magenta--700); --oumeon-colour-magenta-800: var(--oumeon-colour-system__magenta--800); --oumeon-colour-magenta-900: var(--oumeon-colour-system__magenta--900); --oumeon-colour-magenta-1000: var(--oumeon-colour-system__magenta--1000); /* YELLOW Saturated Colour: Day */ --oumeon-colour-yellow-100: var(--oumeon-colour-system__yellow--100); --oumeon-colour-yellow-200: var(--oumeon-colour-system__yellow--200); --oumeon-colour-yellow-300: var(--oumeon-colour-system__yellow--300); --oumeon-colour-yellow-400: var(--oumeon-colour-system__yellow--400); --oumeon-colour-yellow-500: var(--oumeon-colour-system__yellow--500); --oumeon-colour-yellow-600: var(--oumeon-colour-system__yellow--600); --oumeon-colour-yellow-700: var(--oumeon-colour-system__yellow--700); --oumeon-colour-yellow-800: var(--oumeon-colour-system__yellow--800); --oumeon-colour-yellow-900: var(--oumeon-colour-system__yellow--900); --oumeon-colour-yellow-1000: var(--oumeon-colour-system__yellow--1000); /* ORANGE Saturated Colour: Day */ --oumeon-colour-orange-100: var(--oumeon-colour-system__orange--100); --oumeon-colour-orange-200: var(--oumeon-colour-system__orange--200); --oumeon-colour-orange-300: var(--oumeon-colour-system__orange--300); --oumeon-colour-orange-400: var(--oumeon-colour-system__orange--400); --oumeon-colour-orange-500: var(--oumeon-colour-system__orange--500); --oumeon-colour-orange-600: var(--oumeon-colour-system__orange--600); --oumeon-colour-orange-700: var(--oumeon-colour-system__orange--700); --oumeon-colour-orange-800: var(--oumeon-colour-system__orange--800); --oumeon-colour-orange-900: var(--oumeon-colour-system__orange--900); --oumeon-colour-orange-1000: var(--oumeon-colour-system__orange--1000); /* LIME Saturated Colour: Day */ --oumeon-colour-lime-100: var(--oumeon-colour-system__lime--100); --oumeon-colour-lime-200: var(--oumeon-colour-system__lime--200); --oumeon-colour-lime-300: var(--oumeon-colour-system__lime--300); --oumeon-colour-lime-400: var(--oumeon-colour-system__lime--400); --oumeon-colour-lime-500: var(--oumeon-colour-system__lime--500); --oumeon-colour-lime-600: var(--oumeon-colour-system__lime--600); --oumeon-colour-lime-700: var(--oumeon-colour-system__lime--700); --oumeon-colour-lime-800: var(--oumeon-colour-system__lime--800); --oumeon-colour-lime-900: var(--oumeon-colour-system__lime--900); --oumeon-colour-lime-1000: var(--oumeon-colour-system__lime--1000); /* PURPLE Saturated Colour: Day & Night */ --oumeon-colour-purple-100: var(--oumeon-colour-system__purple--100); --oumeon-colour-purple-200: var(--oumeon-colour-system__purple--200); --oumeon-colour-purple-300: var(--oumeon-colour-system__purple--300); --oumeon-colour-purple-400: var(--oumeon-colour-system__purple--400); --oumeon-colour-purple-500: var(--oumeon-colour-system__purple--500); --oumeon-colour-purple-600: var(--oumeon-colour-system__purple--600); --oumeon-colour-purple-700: var(--oumeon-colour-system__purple--700); --oumeon-colour-purple-800: var(--oumeon-colour-system__purple--800); --oumeon-colour-purple-900: var(--oumeon-colour-system__purple--900); --oumeon-colour-purple-1000: var(--oumeon-colour-system__purple--1000); } /* * ------------------------------------------------------------------------ * MARK: 2.2 Night Mode Theme * ------------------------------------------------------------------------ */ html[data-theme='dark'], .brxc-dark-colors, html[data-theme='light'] .brxc-reversed-colors, html[data-theme='dark'] .brxc-initial-colors { /* Monochromatic */ --oumeon-colour-white: var(--oumeon-colour-system-day-night__white); --oumeon-colour-black: var(--oumeon-colour-system-day-night__black); /* PRIMARY Colour: Night */ --oumeon-colour-primary-100: var(--oumeon-colour-brand-night__primary--100); --oumeon-colour-primary-200: var(--oumeon-colour-brand-night__primary--200); --oumeon-colour-primary-300: var(--oumeon-colour-brand-night__primary--300); --oumeon-colour-primary-400: var(--oumeon-colour-brand-night__primary--400); --oumeon-colour-primary-500: var(--oumeon-colour-brand-night__primary--500); --oumeon-colour-primary-600: var(--oumeon-colour-brand-night__primary--600); --oumeon-colour-primary-700: var(--oumeon-colour-brand-night__primary--700); --oumeon-colour-primary-800: var(--oumeon-colour-brand-night__primary--800); --oumeon-colour-primary-900: var(--oumeon-colour-brand-night__primary--900); --oumeon-colour-primary-1000: var( --oumeon-colour-brand-night__primary--1000 ); /* SECONDARY Colour: Night */ --oumeon-colour-secondary-100: var( --oumeon-colour-brand-night__secondary--100 ); --oumeon-colour-secondary-200: var( --oumeon-colour-brand-night__secondary--200 ); --oumeon-colour-secondary-300: var( --oumeon-colour-brand-night__secondary--300 ); --oumeon-colour-secondary-400: var( --oumeon-colour-brand-night__secondary--400 ); --oumeon-colour-secondary-500: var( --oumeon-colour-brand-night__secondary--500 ); --oumeon-colour-secondary-600: var( --oumeon-colour-brand-night__secondary--600 ); --oumeon-colour-secondary-700: var( --oumeon-colour-brand-night__secondary--700 ); --oumeon-colour-secondary-800: var( --oumeon-colour-brand-night__secondary--800 ); --oumeon-colour-secondary-900: var( --oumeon-colour-brand-night__secondary--900 ); --oumeon-colour-secondary-1000: var( --oumeon-colour-brand-night__secondary--1000 ); /* TERTIARY Colour: Night */ --oumeon-colour-tertiary-100: var( --oumeon-colour-brand-night__tertiary--100 ); --oumeon-colour-tertiary-200: var( --oumeon-colour-brand-night__tertiary--200 ); --oumeon-colour-tertiary-300: var( --oumeon-colour-brand-night__tertiary--300 ); --oumeon-colour-tertiary-400: var( --oumeon-colour-brand-night__tertiary--400 ); --oumeon-colour-tertiary-500: var( --oumeon-colour-brand-night__tertiary--500 ); --oumeon-colour-tertiary-600: var( --oumeon-colour-brand-night__tertiary--600 ); --oumeon-colour-tertiary-700: var( --oumeon-colour-brand-night__tertiary--700 ); --oumeon-colour-tertiary-800: var( --oumeon-colour-brand-night__tertiary--800 ); --oumeon-colour-tertiary-900: var( --oumeon-colour-brand-night__tertiary--900 ); --oumeon-colour-tertiary-1000: var( --oumeon-colour-brand-night__tertiary--1000 ); /* ACCENT Colour: Night */ --oumeon-colour-accent-100: var(--oumeon-colour-brand-night__accent--100); --oumeon-colour-accent-200: var(--oumeon-colour-brand-night__accent--200); --oumeon-colour-accent-300: var(--oumeon-colour-brand-night__accent--300); --oumeon-colour-accent-400: var(--oumeon-colour-brand-night__accent--400); --oumeon-colour-accent-500: var(--oumeon-colour-brand-night__accent--500); --oumeon-colour-accent-600: var(--oumeon-colour-brand-night__accent--600); --oumeon-colour-accent-700: var(--oumeon-colour-brand-night__accent--700); --oumeon-colour-accent-800: var(--oumeon-colour-brand-night__accent--800); --oumeon-colour-accent-900: var(--oumeon-colour-brand-night__accent--900); --oumeon-colour-accent-1000: var(--oumeon-colour-brand-night__accent--1000); /* NEUTRAL Colour: Night */ /* Solid */ --oumeon-colour-neutral-0: var(--oumeon-colour-system-night__neutral--0); --oumeon-colour-neutral-100: var( --oumeon-colour-system-night__neutral--100 ); --oumeon-colour-neutral-200: var( --oumeon-colour-system-night__neutral--200 ); --oumeon-colour-neutral-300: var( --oumeon-colour-system-night__neutral--300 ); --oumeon-colour-neutral-400: var( --oumeon-colour-system-night__neutral--400 ); --oumeon-colour-neutral-500: var( --oumeon-colour-system-night__neutral--500 ); --oumeon-colour-neutral-600: var( --oumeon-colour-system-night__neutral--600 ); --oumeon-colour-neutral-700: var( --oumeon-colour-system-night__neutral--700 ); --oumeon-colour-neutral-800: var( --oumeon-colour-system-night__neutral--800 ); --oumeon-colour-neutral-900: var( --oumeon-colour-system-night__neutral--900 ); --oumeon-colour-neutral-1000: var( --oumeon-colour-system-night__neutral--1000 ); --oumeon-colour-neutral-1100: var( --oumeon-colour-system-night__neutral--1100 ); /* Alpha */ --oumeon-colour-neutral-100A: var( --oumeon-colour-system-night__neutral--100A ); --oumeon-colour-neutral-200A: var( --oumeon-colour-system-night__neutral--200A ); --oumeon-colour-neutral-300A: var( --oumeon-colour-system-night__neutral--300A ); --oumeon-colour-neutral-400A: var( --oumeon-colour-system-night__neutral--400A ); --oumeon-colour-neutral-500A: var( --oumeon-colour-system-night__neutral--500A ); --oumeon-colour-neutral-600A: var( --oumeon-colour-system-night__neutral--600A ); --oumeon-colour-neutral-700A: var( --oumeon-colour-system-night__neutral--700A ); --oumeon-colour-neutral-800A: var( --oumeon-colour-system-night__neutral--800A ); --oumeon-colour-neutral-900A: var( --oumeon-colour-system-night__neutral--900A ); /* RED Saturated Colour: Night */ --oumeon-colour-red-100: var(--oumeon-colour-system__red--1000); --oumeon-colour-red-200: var(--oumeon-colour-system__red--900); --oumeon-colour-red-300: var(--oumeon-colour-system__red--800); --oumeon-colour-red-400: var(--oumeon-colour-system__red--700); --oumeon-colour-red-500: var(--oumeon-colour-system__red--600); --oumeon-colour-red-600: var(--oumeon-colour-system__red--500); --oumeon-colour-red-700: var(--oumeon-colour-system__red--400); --oumeon-colour-red-800: var(--oumeon-colour-system__red--300); --oumeon-colour-red-900: var(--oumeon-colour-system__red--200); --oumeon-colour-red-1000: var(--oumeon-colour-system__red--100); /* GREEN Saturated Colour: Night */ --oumeon-colour-green-100: var(--oumeon-colour-system__green--1000); --oumeon-colour-green-200: var(--oumeon-colour-system__green--900); --oumeon-colour-green-300: var(--oumeon-colour-system__green--800); --oumeon-colour-green-400: var(--oumeon-colour-system__green--700); --oumeon-colour-green-500: var(--oumeon-colour-system__green--600); --oumeon-colour-green-600: var(--oumeon-colour-system__green--500); --oumeon-colour-green-700: var(--oumeon-colour-system__green--400); --oumeon-colour-green-800: var(--oumeon-colour-system__green--300); --oumeon-colour-green-900: var(--oumeon-colour-system__green--200); --oumeon-colour-green-1000: var(--oumeon-colour-system__green--100); /* BLUE Saturated Colour: Night */ --oumeon-colour-blue-100: var(--oumeon-colour-system__blue--1000); --oumeon-colour-blue-200: var(--oumeon-colour-system__blue--900); --oumeon-colour-blue-300: var(--oumeon-colour-system__blue--800); --oumeon-colour-blue-400: var(--oumeon-colour-system__blue--700); --oumeon-colour-blue-500: var(--oumeon-colour-system__blue--600); --oumeon-colour-blue-600: var(--oumeon-colour-system__blue--500); --oumeon-colour-blue-700: var(--oumeon-colour-system__blue--400); --oumeon-colour-blue-800: var(--oumeon-colour-system__blue--300); --oumeon-colour-blue-900: var(--oumeon-colour-system__blue--200); --oumeon-colour-blue-1000: var(--oumeon-colour-system__blue--100); /* TEAL Saturated Colour: Night */ --oumeon-colour-teal-100: var(--oumeon-colour-system__teal--1000); --oumeon-colour-teal-200: var(--oumeon-colour-system__teal--900); --oumeon-colour-teal-300: var(--oumeon-colour-system__teal--800); --oumeon-colour-teal-400: var(--oumeon-colour-system__teal--700); --oumeon-colour-teal-500: var(--oumeon-colour-system__teal--600); --oumeon-colour-teal-600: var(--oumeon-colour-system__teal--500); --oumeon-colour-teal-700: var(--oumeon-colour-system__teal--400); --oumeon-colour-teal-800: var(--oumeon-colour-system__teal--300); --oumeon-colour-teal-900: var(--oumeon-colour-system__teal--200); --oumeon-colour-teal-1000: var(--oumeon-colour-system__teal--100); /* MAGENTA Saturated Colour: Night */ --oumeon-colour-magenta-100: var(--oumeon-colour-system__magenta--1000); --oumeon-colour-magenta-200: var(--oumeon-colour-system__magenta--900); --oumeon-colour-magenta-300: var(--oumeon-colour-system__magenta--800); --oumeon-colour-magenta-400: var(--oumeon-colour-system__magenta--700); --oumeon-colour-magenta-500: var(--oumeon-colour-system__magenta--600); --oumeon-colour-magenta-600: var(--oumeon-colour-system__magenta--500); --oumeon-colour-magenta-700: var(--oumeon-colour-system__magenta--400); --oumeon-colour-magenta-800: var(--oumeon-colour-system__magenta--300); --oumeon-colour-magenta-900: var(--oumeon-colour-system__magenta--200); --oumeon-colour-magenta-1000: var(--oumeon-colour-system__magenta--100); /* YELLOW Saturated Colour: Night */ --oumeon-colour-yellow-100: var(--oumeon-colour-system__yellow--1000); --oumeon-colour-yellow-200: var(--oumeon-colour-system__yellow--900); --oumeon-colour-yellow-300: var(--oumeon-colour-system__yellow--800); --oumeon-colour-yellow-400: var(--oumeon-colour-system__yellow--700); --oumeon-colour-yellow-500: var(--oumeon-colour-system__yellow--600); --oumeon-colour-yellow-600: var(--oumeon-colour-system__yellow--500); --oumeon-colour-yellow-700: var(--oumeon-colour-system__yellow--400); --oumeon-colour-yellow-800: var(--oumeon-colour-system__yellow--300); --oumeon-colour-yellow-900: var(--oumeon-colour-system__yellow--200); --oumeon-colour-yellow-1000: var(--oumeon-colour-system__yellow--100); /* ORANGE Saturated Colour: Night */ --oumeon-colour-orange-100: var(--oumeon-colour-system__orange--1000); --oumeon-colour-orange-200: var(--oumeon-colour-system__orange--900); --oumeon-colour-orange-300: var(--oumeon-colour-system__orange--800); --oumeon-colour-orange-400: var(--oumeon-colour-system__orange--700); --oumeon-colour-orange-500: var(--oumeon-colour-system__orange--600); --oumeon-colour-orange-600: var(--oumeon-colour-system__orange--500); --oumeon-colour-orange-700: var(--oumeon-colour-system__orange--400); --oumeon-colour-orange-800: var(--oumeon-colour-system__orange--300); --oumeon-colour-orange-900: var(--oumeon-colour-system__orange--200); --oumeon-colour-orange-1000: var(--oumeon-colour-system__orange--100); /* LIME Saturated Colour: Night */ --oumeon-colour-lime-100: var(--oumeon-colour-system__lime--1000); --oumeon-colour-lime-200: var(--oumeon-colour-system__lime--900); --oumeon-colour-lime-300: var(--oumeon-colour-system__lime--800); --oumeon-colour-lime-400: var(--oumeon-colour-system__lime--700); --oumeon-colour-lime-500: var(--oumeon-colour-system__lime--600); --oumeon-colour-lime-600: var(--oumeon-colour-system__lime--500); --oumeon-colour-lime-700: var(--oumeon-colour-system__lime--400); --oumeon-colour-lime-800: var(--oumeon-colour-system__lime--300); --oumeon-colour-lime-900: var(--oumeon-colour-system__lime--200); --oumeon-colour-lime-1000: var(--oumeon-colour-system__lime--100); /* PURPLE Saturated Colour: Day & Night */ --oumeon-colour-purple-100: var(--oumeon-colour-system__purple--1000); --oumeon-colour-purple-200: var(--oumeon-colour-system__purple--900); --oumeon-colour-purple-300: var(--oumeon-colour-system__purple--800); --oumeon-colour-purple-400: var(--oumeon-colour-system__purple--700); --oumeon-colour-purple-500: var(--oumeon-colour-system__purple--600); --oumeon-colour-purple-600: var(--oumeon-colour-system__purple--500); --oumeon-colour-purple-700: var(--oumeon-colour-system__purple--400); --oumeon-colour-purple-800: var(--oumeon-colour-system__purple--300); --oumeon-colour-purple-900: var(--oumeon-colour-system__purple--200); --oumeon-colour-purple-1000: var(--oumeon-colour-system__purple--100); } /* END DESIGN SYSTEM CORE */