/* * EY Motif Design System — brand tokens (curated subset). * * Dropped into non-React EYFabric apps by write-brand-tokens.sh so that * generated HTML/CSS at least matches the EY brand language (colors, type, * spacing, radius). For full Motif components + 4,172 design tokens, use a * React kit and let install-into-app.sh wire up @ey-xd/motif-components. * * Source: .agents/skills/motif-design-system/references/guides/design-tokens.md * Version: 11.1.0 * * Apply by setting class="motif-theme-light" (or motif-theme-dark) on . */ :root, .motif-theme-light { /* ---------- Brand colors ---------- */ --color-base-neutral-0: #FFF; --color-base-neutral-25: #F9F9FA; --color-base-neutral-50: #F3F3F5; --color-base-neutral-100: #DEDEE2; --color-base-neutral-200: #C3C3CB; --color-base-neutral-400: #9897A6; --color-base-neutral-600: #656579; --color-base-neutral-800: #3F3F4C; --color-base-neutral-900: #2E2E38; /* EY signature dark grey */ --color-base-neutral-1000: #1A1A24; --color-orange-200: #FF9831; --color-orange-300: #EE8300; /* EY accent orange */ --color-orange-500: #B26100; --color-yellow-300: #FFE600; /* EY signature yellow */ --color-green-300: #168736; --color-red-300: #B9251C; --color-blue-300: #155CB4; /* ---------- Semantic surface tokens ---------- */ --bg-colors-default-primary: var(--color-base-neutral-0); --bg-colors-default-secondary: var(--color-base-neutral-50); --bg-colors-default-tertiary: var(--color-base-neutral-100); --bg-colors-inverse-primary: var(--color-base-neutral-900); --text-colors-default-primary: var(--color-base-neutral-900); --text-colors-default-secondary: var(--color-base-neutral-600); --text-colors-default-tertiary: var(--color-base-neutral-400); --text-colors-default-link: var(--color-orange-300); --text-colors-default-error: var(--color-red-300); --text-colors-default-success: var(--color-green-300); --text-colors-inverse-primary: var(--color-base-neutral-0); --border-colors-default-primary: var(--color-base-neutral-200); --border-colors-default-secondary: var(--color-base-neutral-100); --border-colors-default-focus: var(--color-orange-300); /* ---------- Typography ---------- */ /* EYInterstate ships with the full Motif install via the postinstall font symlink. Without that, this gracefully degrades to the system stack. */ --font-family-primary: "EYInterstate", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-mono: "EYInterstateMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 48px; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-loose: 1.75; /* ---------- Spacing scale (px) ---------- */ --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-96: 96px; /* ---------- Radius / borders ---------- */ --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-circle: 200px; --border-width-thin: 1px; --border-width-medium: 2px; /* ---------- Elevation (subtle, EY uses borders more than shadows) ---------- */ --shadow-sm: 0 1px 2px rgba(26, 26, 36, 0.08); --shadow-md: 0 2px 6px rgba(26, 26, 36, 0.10); --shadow-lg: 0 8px 24px rgba(26, 26, 36, 0.12); } .motif-theme-dark { --bg-colors-default-primary: var(--color-base-neutral-900); --bg-colors-default-secondary: var(--color-base-neutral-800); --bg-colors-default-tertiary: var(--color-base-neutral-1000); --bg-colors-inverse-primary: var(--color-base-neutral-0); --text-colors-default-primary: var(--color-base-neutral-0); --text-colors-default-secondary: var(--color-base-neutral-200); --text-colors-default-tertiary: var(--color-base-neutral-400); --text-colors-inverse-primary: var(--color-base-neutral-900); --border-colors-default-primary: var(--color-base-neutral-700, #4E4E5D); --border-colors-default-secondary: var(--color-base-neutral-800); } /* ---------- Baseline element styles (opt-in via the body class) ---------- */ body.motif-theme-light, body.motif-theme-dark { margin: 0; font-family: var(--font-family-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); line-height: var(--line-height-normal); background-color: var(--bg-colors-default-primary); color: var(--text-colors-default-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.motif-theme-light h1, body.motif-theme-dark h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); margin: 0 0 var(--spacing-16); } body.motif-theme-light h2, body.motif-theme-dark h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-light); line-height: var(--line-height-tight); margin: 0 0 var(--spacing-12); } body.motif-theme-light h3, body.motif-theme-dark h3 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-regular); line-height: var(--line-height-tight); margin: 0 0 var(--spacing-12); } body.motif-theme-light h4, body.motif-theme-dark h4 { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); margin: 0 0 var(--spacing-8); } body.motif-theme-light a, body.motif-theme-dark a { color: var(--text-colors-default-link); text-decoration: none; } body.motif-theme-light a:hover, body.motif-theme-dark a:hover { text-decoration: underline; } body.motif-theme-light code, body.motif-theme-dark code { font-family: var(--font-family-mono); background: var(--bg-colors-default-secondary); padding: var(--spacing-2) var(--spacing-4); border-radius: var(--border-radius-sm); }