Alignment Guide
Colour changes in Shabana's Design System 2026 page
This guide compares the current Figma colour variables with the proposal shown on
Colour Architecture_Shabana test, especially the reduced primitive palette,
the dark semantic token guide, and the usage guidance frame.
Summary
Shabana's page is primarily a palette consolidation and usage-clarity proposal. I re-checked the live Figma file through the Figma API: the variables still contain the larger token set, while Shabana's frames show the smaller palette and the semantic usage target the team should align on.
116Current colour primitive variables
34Core primitive stops shown in Shabana's proposal
6Dark semantic token values that differ from variables
Important: the live file has two dark-token frames with slightly different intent.
Colour Tokens - Dark reflects the current variable state. Colour Usage Guide - App & Web
is the clearer proposal for what Shabana wants the team to use. It changes
dark/bg/raised, dark/bg/page-subtle, dark/bg/inverse,
dark/action/selected, dark/border/subtle, and dark/icon/primary
versus current variables.
Source Of Truth
| Source | What it contains | Current finding |
|---|---|---|
Figma variables: Colour Primitives |
116 primitive colour variables | Already includes Blue-600 = #1E4FDD and the larger legacy/extended set. |
Figma variables: Semantic Light |
98 light semantic variables | Not represented in Shabana's linked frame, so no light-frame alignment decision can be made from that page alone. |
Figma variables: Semantic Dark |
97 dark semantic variables | Mostly aligns with Shabana's dark token frames; six usage-guide values differ. |
Shabana frame: Proposed Palette V2 - Aesthetic & A11y |
34 curated primitive stops | Confirmed as the intended smaller working palette. |
Shabana frame: Colour Usage Guide - App & Web |
36 visible dark semantic usage rows plus data-visualisation primitives | Confirmed as the clearest source for the semantic target values and usage intent. |
Primitive Palette
The proposal reduces the practical palette from a broad variable set to 34 core stops. The goal is not just fewer colours; it is fewer ambiguous choices. The proposal notes specifically call out reduced decision fatigue, fewer one-off hex values, and clearer role labels.
Kept Core Stops
Slate
Slate-100
Slate-300
Slate-500
Slate-800
Slate-900
Blue
Blue-100
Blue-300
Blue-500
Blue-600
Blue-800
Blue-900
Green
Green-100
Green-300
Green-400
Green-500
Green-700
Green-800
Red / Yellow
Red-100
Red-400
Red-700
Red-800
Yellow-100
Yellow-400
Yellow-700
Yellow-800
Extended
Violet
Cyan
Coral
Terracotta
Neutral
Neutral-100
Neutral-400
Neutral-500
Neutral-700
Neutral-800
Primitive Intent Changes
| Primitive | Value | Proposal intent |
|---|---|---|
Blue-600 |
#1E4FDD |
Restored as the hero brand blue and primary CTA colour. Current variables already contain this value. |
Blue-800 |
#1334AE |
Use for CTAs on light or inverse surfaces and small button text because it passes AA more comfortably. |
Green-400 |
#82FF6F |
Called out as electric lime for data visualisation and high-impact positive moments. |
Extended/Violet, Extended/Cyan, Extended/Coral, Extended/Terracotta |
Four accent primitives | Reduced accent palette intended to replace a broader, looser extended set. |
Omitted From The 34-Stop Core Palette
These are not necessarily deleted from the Figma variable collection yet. They are not shown in the proposed working palette, so they should be treated as candidates for deprecation or secondary/internal use.
| Group | Omitted examples |
|---|---|
| Slate | Slate-200, Slate-400, Slate-600, Slate-700, alpha overlays |
| Blue | Blue-200, Blue-400, Blue-700, Blue-950 |
| Green | Green-50, Green-200, Green-600, Green-750, Green-900, track subtle |
| Red | Red-200, Red-300, Red-500, Red-600, Red-900 |
| Yellow | Yellow-50, Yellow-200, Yellow-300, Yellow-500, Yellow-600, Yellow-750, Yellow-900 |
| Extended | Peach, Rose, Lavender, Indigo, Azure, Salmon, Magenta variants, light/dark variants |
| Other primitives | Gold, Sky, glass gradients, white overlays, black overlays, test token, and product-specific helper primitives |
Semantic Dark
The current Semantic Dark variable collection has 97 variables. Shabana's dark token
frames show a focused subset of 36 tokens. Of those, 33 match current variables and 3 differ in
the usage guide.
Changed Values In The Usage Guide
| Status | Semantic token | Current variable | Shabana usage guide | Interpretation |
|---|---|---|---|---|
| Changed | dark/bg/raised |
#09141C via Neutral-925 |
#092D46 via Slate-900 |
Raised cards, panels, and sheets move to the approved slate dark navy. |
| Changed | dark/bg/page-subtle |
#0D1117 via Neutral-900 |
#092D46 via Slate-900 |
Sidebars and trays move to the approved slate dark navy. |
| Changed | dark/bg/inverse |
#E6EDF3 via Neutral/100 |
#F5F9FB via Slate-100 |
Inverse light surfaces inside dark UI become lighter. |
| Changed | dark/action/selected |
rgba(255,255,255,0.2) |
#F5F9FB via Slate-100 |
Selected/active state becomes solid Slate-100 in the usage guide. |
| Changed | dark/border/subtle |
#30363D via Neutral/700 |
#1C2128 via Neutral-800 |
Hairline dividers become darker and less prominent. |
| Changed | dark/icon/primary |
#FFFFFF via White |
#F5F9FB via Slate-100 |
Primary icons move off pure white and onto the approved Slate-100 foreground. |
Shown And Unchanged
| Status | Tokens |
|---|---|
| Stayed |
dark/bg/page,
dark/bg/success, dark/bg/error, dark/bg/warning,
dark/text/primary, dark/text/secondary, dark/text/tertiary,
dark/text/disabled, dark/text/inverse, dark/text/brand,
dark/text/success, dark/text/error, dark/text/warning,
dark/action/primary, dark/action/secondary, dark/action/destructive,
dark/action/disabled, dark/border/default, dark/border/strong,
dark/border/focus, dark/border/error, dark/border/success,
dark/icon/secondary, dark/icon/inverse,
dark/icon/brand, dark/feedback/success, dark/feedback/error,
dark/feedback/warning, dark/feedback/pending, dark/feedback/info.
|
Not Shown In Shabana's Dark Guide
These still exist in the current Semantic Dark variables but are not shown in the
focused dark guide. Treat them as unresolved until Shabana confirms whether they should remain,
be deprecated, or be moved out of the primary semantic set.
| Status | Omitted semantic groups |
|---|---|
| Not shown | Disabled/inset backgrounds, info backgrounds, inverse-muted, glass, on-fill text/icon, info icon/text, disabled and tertiary icons, warning/info borders, secondary-border and disabled-text actions, overlays, base black, and all product/domain-specific dark tokens. |
Semantic Light
The file has 98 Semantic Light variables, but Shabana's linked page does not include
a light semantic proposal frame equivalent to the dark guide. Do not infer light semantic removals
from this page.
Current known light state: the variables already use
Blue-600 = #1E4FDD
for brand/action/info semantic paths, and bg/surface = #F8F9FA exists as a light semantic
literal. Any further light changes need a dedicated light frame or explicit designer confirmation.
Usage Guidance
The usage guide is the clearest part of the proposal. It explains where the curated colours should be used, and it adds accessibility notes that should be reflected in code reviews and component design.
| Token / primitive | Guidance | Accessibility note |
|---|---|---|
dark/action/primary | Main CTA: sign up, pay now, submit, create. | Large-text AA only; min 18px in the frame. |
Blue-800 | CTA text on light/inverse surfaces and any CTA text below 18px. | Full AA at 7.2:1. |
dark/text/brand | Links, brand text, in-text CTAs, active nav items. | Large-text only in the frame. |
dark/icon/brand | Feature highlight icons, brand moments, onboarding icons. | Decorative role noted. |
dark/feedback/info | Info banners, tooltip indicators, non-urgent notices. | Large-text warning in the frame. |
Green-400 | Positive trends and growth data visualisation. | Used as high-impact data colour, not a generic semantic replacement. |
Yellow-400 | Neutral or average reference line in charts. | Data visualisation primitive. |
Implementation Notes
- Do not blindly delete every primitive omitted from the 34-stop palette. Some omitted variables are overlays, glass stops, product-specific tokens, or compatibility helpers.
- If code is temporarily aligned to Shabana's page, the safest minimal semantic update is the three dark-token changes from the usage guide.
- The biggest structural decision is whether the 34-stop palette replaces the full primitive variable collection or becomes the documented "approved working palette" while legacy primitives remain available internally.
- For mobile code, preserve compatibility aliases until all consumers are audited. The current app has local-only semantic aliases that are not represented one-to-one in Figma.
Recommended alignment ask: confirm whether the 34-stop proposal is a hard deletion target
for variables, or a usage-approved subset. Then confirm the three dark semantic mismatches before code changes.
Team Tables
These are the final alignment tables to share with the team. They separate the proposed primitive palette from the semantic dark usage target shown in Shabana's guide. Primitive rows that are used directly in the usage guide are captured in the primitive table rather than duplicated as semantic tokens.
Proposed Primitive Tokens
| Family | Token | Value | Team decision |
|---|---|---|---|
| Slate | Slate-100 | #F5F9FB | Keep in proposed core palette |
| Slate | Slate-300 | #CEDBE4 | Keep in proposed core palette |
| Slate | Slate-500 | #7992A6 | Keep in proposed core palette |
| Slate | Slate-800 | #25445B | Keep in proposed core palette |
| Slate | Slate-900 | #092D46 | Hero surface / brand background primitive |
| Blue | Blue-100 | #EEF0F7 | Keep in proposed core palette |
| Blue | Blue-300 | #B9C4EE | Keep in proposed core palette |
| Blue | Blue-500 | #5D7DF4 | Keep in proposed core palette |
| Blue | Blue-600 | #1E4FDD | Hero brand blue / primary CTA / active indicator / secondary data series |
| Blue | Blue-800 | #1334AE | Small-text CTA on light/inverse surfaces |
| Blue | Blue-900 | #142871 | Keep in proposed core palette |
| Green | Green-100 | #ECFBEA | Keep in proposed core palette |
| Green | Green-300 | #AFFAA3 | Keep in proposed core palette |
| Green | Green-400 | #82FF6F | Electric lime for positive growth/data moments |
| Green | Green-500 | #31F613 | Success/live semantic value |
| Green | Green-700 | #27A414 | Positive number/action contrast value |
| Green | Green-800 | #268717 | Keep in proposed core palette |
| Red | Red-100 | #FFE7E0 | Keep in proposed core palette |
| Red | Red-400 | #FF6C47 | Error/destructive/data decline |
| Red | Red-700 | #AD2300 | Negative number/action contrast value |
| Red | Red-800 | #7A1800 | Keep in proposed core palette |
| Yellow | Yellow-100 | #FFFBE0 | Keep in proposed core palette |
| Yellow | Yellow-400 | #FFE940 | Neutral/average data reference line |
| Yellow | Yellow-700 | #9E8C00 | Warning contrast value |
| Yellow | Yellow-800 | #695C00 | Keep in proposed core palette |
| Extended | Violet | #DD97F2 | Third data series / category accent |
| Extended | Cyan | #3A9AA8 | Fourth data series / volume accent |
| Extended | Coral | #F1A297 | Keep in reduced accent quartet |
| Extended | Terracotta | #A67B4B | Keep in reduced accent quartet |
| Neutral | Neutral-100 | #E6EDF3 | Primary dark-mode text |
| Neutral | Neutral-400 | #8B949E | Tertiary text / metadata |
| Neutral | Neutral-500 | #57606A | Disabled and strong-border value |
| Neutral | Neutral-700 | #30363D | Default border / secondary action |
| Neutral | Neutral-800 | #1C2128 | Subtle border / divider-hairline target |
Semantic Dark Tokens Shabana Wants In The Usage Guide
| Group | Token | Target value | Role | Variable status |
|---|---|---|---|---|
| Surfaces | dark/bg/page | #030F1A | App canvas | Matches current variable |
| Surfaces | dark/bg/raised | #092D46 | Card, panel, sheet | Change from #09141C |
| Surfaces | dark/bg/page-subtle | #092D46 | Sidebar, tray | Change from #0D1117 |
| Surfaces | dark/bg/inverse | #F5F9FB | Light-mode islands inside dark UI | Change from #E6EDF3 |
| Surfaces | dark/bg/success | #236C18 | Success tint surface | Matches current variable |
| Surfaces | dark/bg/error | #470E00 | Error tint surface | Matches current variable |
| Surfaces | dark/bg/warning | #332D00 | Warning tint surface | Matches current variable |
| Text | dark/text/primary | #E6EDF3 | Body, headings, labels | Matches current variable |
| Text | dark/text/secondary | #C9D1D9 | Subheadings, descriptions | Matches current variable |
| Text | dark/text/tertiary | #8B949E | Placeholder, hint, ghost text | Matches current variable |
| Text | dark/text/disabled | #57606A | Disabled text | Matches current variable |
| Text | dark/text/inverse | #0D1117 | Text on light surface | Matches current variable |
| Text | dark/text/brand | #8CA1EE | Links, brand text | Matches current variable |
| Text | dark/text/success | #31F613 | Success inline text | Matches current variable |
| Text | dark/text/error | #FF6C47 | Error inline text | Matches current variable |
| Text | dark/text/warning | #FFEF75 | Warning inline text | Matches current variable |
| Actions | dark/action/primary | #1E4FDD | Hero CTA / primary button | Matches current variable |
| Actions | dark/action/secondary | #30363D | Secondary button / ghost button | Matches current variable |
| Actions | dark/action/selected | #F5F9FB | Selected / active state | Change from #FFFFFF33 |
| Actions | dark/action/destructive | #FF6C47 | Delete / remove / danger | Matches current variable |
| Actions | dark/action/disabled | #57606A | Disabled CTA | Matches current variable |
| Borders | dark/border/subtle | #1C2128 | Divider / hairline | Change from #30363D |
| Borders | dark/border/default | #30363D | Card border / input outline | Matches current variable |
| Borders | dark/border/strong | #57606A | Emphasis border / hover stroke | Matches current variable |
| Borders | dark/border/focus | #F5F9FB | Keyboard focus ring | Matches current variable |
| Borders | dark/border/error | #FF6C47 | Error outline | Matches current variable |
| Borders | dark/border/success | #31F613 | Success outline | Matches current variable |
| Icons | dark/icon/primary | #F5F9FB | Primary icon | Change from #FFFFFF |
| Icons | dark/icon/secondary | #C9D1D9 | Secondary icon | Matches current variable |
| Icons | dark/icon/inverse | #0D1117 | Icon on light surface | Matches current variable |
| Icons | dark/icon/brand | #8CA1EE | Brand icon | Matches current variable |
| Feedback | dark/feedback/success | #31F613 | Success confirmed / live | Matches current variable |
| Feedback | dark/feedback/error | #FF6C47 | Error failed / critical | Matches current variable |
| Feedback | dark/feedback/warning | #FFEF75 | Warning / caution / at-risk | Matches current variable |
| Feedback | dark/feedback/pending | #FFF5AB | Pending / processing / queued | Matches current variable |
| Feedback | dark/feedback/info | #8CA1EE | Informational neutral notice | Matches current variable |
Feedback For Shabana
This section captures the remaining alignment questions after treating Shabana's 34-colour primitive palette and dark semantic usage guide as the source of truth. It separates semantic tokens that Shabana explicitly uses from active colours that appear to be deprecated because they are not mentioned in either source. Latest checked Figma version: 2026-05-29 11:48 UTC.
14Dark semantic rows need primitive clarification
50Active deprecated colours need replacement or approval
1. Shabana Semantic Tokens Without An Approved Primitive
These semantic tokens are present in Shabana's dark usage guide, but their target values do not map to one of the 34 primitives in the proposed palette. These should either become approved primitives or be remapped by design.
| Semantic token | Shabana value | Current matching primitive | Role | Question for Shabana |
|---|---|---|---|---|
dark/bg/page | #030F1A | neutral975 | App canvas | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/bg/success | #236C18 | green900 | Success surface | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/bg/error | #470E00 | red900 | Error surface | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/bg/warning | #332D00 | yellow900 | Warning surface | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/text/secondary | #C9D1D9 | neutral300 | Secondary text | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/text/inverse | #0D1117 | neutral900 | Inverse text | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/text/brand | #8CA1EE | blue400 | Brand text | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/text/warning | #FFEF75 | yellow300 | Warning text | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/icon/secondary | #C9D1D9 | neutral300 | Secondary icon | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/icon/inverse | #0D1117 | neutral900 | Inverse icon | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/icon/brand | #8CA1EE | blue400 | Brand icon | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/feedback/warning | #FFEF75 | yellow300 | Warning feedback | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/feedback/pending | #FFF5AB | yellow200 | Pending feedback | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
dark/feedback/info | #8CA1EE | blue400 | Info feedback | Confirm whether to add this primitive to the approved palette or remap the semantic token to one of the 34 approved primitives. |
2. Active Deprecated Colours Requiring Direction
These colours are active in code through semantic mappings or direct component/file references, but they are not in Shabana's 34 approved primitive palette and are not required by her dark semantic usage guide. They need a designer decision before removal: replace, approve, or keep as an explicit internal-only exception.
| Deprecated colour | Value | Active reference | Question for Shabana |
|---|---|---|---|
black | #000000 | Semantic mapping: colors.ui.base.black, darkColors.ui.base.blackFile refs: src/screens/auth-v2/landing/widgets/NetWorthChart.variantAv2.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
blue200 | #D9DEF2 | File refs: src/design-system/components/Button/SecondaryDarkExplorer.stories.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
blue950 | #01114C | Semantic mapping: darkColors.ui.background.info, darkColors.domainSpecific.badgeTypes.info.background | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedCyanDark | #5CC8D4 | Semantic mapping: darkColors.domainSpecific.entityTypes.personal | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedCyanLight | #F0FBFC | Semantic mapping: colors.domainSpecific.entityTypes.personalBg | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedLavender | #F3D4FC | Semantic mapping: colors.domainSpecific.dealTypes.privateEquity.active, darkColors.domainSpecific.dealTypes.privateEquity.active | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedMagenta | #A65D8A | Semantic mapping: colors.domainSpecific.entityTypes.ifisa, darkColors.domainSpecific.entityTypes.ifisa | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedMagentaLight | #FAF5F8 | Semantic mapping: colors.domainSpecific.entityTypes.ifisaBg | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedPeach | #F6C999 | Semantic mapping: colors.domainSpecific.dealTypes.fixedIncome.active, darkColors.domainSpecific.dealTypes.fixedIncome.active | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedRose | #F7CED8 | Semantic mapping: colors.domainSpecific.dealTypes.realEstate.active, darkColors.domainSpecific.dealTypes.realEstate.active | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedSalmon | #F08778 | Semantic mapping: colors.domainSpecific.dealTypes.fallback.active, darkColors.domainSpecific.dealTypes.fallback.active | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedTerracottaDark | #D4A670 | Semantic mapping: darkColors.domainSpecific.entityTypes.business | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
extendedTerracottaLight | #FFFBF7 | Semantic mapping: colors.domainSpecific.entityTypes.businessBg | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
glassGradientEnd | rgba(28, 30, 32, 0.4) | File refs: src/screens/home/fundNoticePeriodChoice/screens/CompletedSummaryScreen.styled.ts, src/screens/home/fundNoticePeriodChoice/screens/ReviewScreen.styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
glassIconEnd | rgba(28, 30, 32, 0.3) | File refs: src/design-system/components/IconBadge/styled.ts, src/screens/if-isa/components/if-isa-status-card/styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
glassIconStart | rgba(105, 106, 110, 0.3) | File refs: src/design-system/components/IconBadge/styled.ts, src/screens/if-isa/components/if-isa-status-card/styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
gold200 | #F1E9D5 | Semantic mapping: colors.domainSpecific.badgeTypes.premium.background, colors.domainSpecific.premium.background, darkColors.domainSpecific.badgeTypes.premium.text, darkColors.domainSpecific.premium.text | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
gold500 | #D1BA82 | Semantic mapping: colors.domainSpecific.premium.accent, darkColors.domainSpecific.premium.accentFile refs: src/screens/onboarding-v2/sandbox/experiments/PrimaryButtonScreen.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
gold800 | #5C4A1A | Semantic mapping: colors.domainSpecific.badgeTypes.premium.text, colors.domainSpecific.premium.text, darkColors.domainSpecific.badgeTypes.premium.background, darkColors.domainSpecific.premium.background | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
green50 | #DFFBEE | Semantic mapping: colors.ui.background.success | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
green600 | #22A40D | Semantic mapping: colors.ui.feedback.success | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
green750 | #1F7512 | Semantic mapping: colors.ui.text.success, colors.ui.border.success | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutral200 | #CFD4DA | Semantic mapping: darkColors.ui.background.inverseSecondary | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutral600 | #424A53 | Semantic mapping: darkColors.ui.background.insetDisabled | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutral925 | #09141C | File refs: src/design-system/components/Button/SecondaryDarkExplorer.stories.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutralGlass | rgba(21, 25, 28, 0.5) | Semantic mapping: colors.ui.background.glass, darkColors.ui.background.glass | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutralGlass10 | rgba(21, 25, 28, 0.10) | File refs: src/screens/home/portfolio/v2/pv2Card/styled.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
neutralGlass80 | rgba(21, 25, 28, 0.80) | Semantic mapping: darkColors.ui.background.surfaceFile refs: src/screens/home/fundNoticePeriodChoice/screens/AllocationScreen.styled.ts, src/screens/home/fundNoticePeriodChoice/screens/IncomeDecisionScreen.styled.ts, src/screens/home/portfolio/v2/pv2Card/styled.tsx, src/screens/if-isa/isa-wrap/styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
overlayBlack | rgba(0, 0, 0, 1) | Semantic mapping: darkColors.ui.overlay.black | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
overlayDark | rgba(0, 0, 0, 0.8) | Semantic mapping: darkColors.ui.overlay.dark | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
overlayLight20 | rgba(0, 0, 0, 0.2) | Semantic mapping: darkColors.ui.overlay.lightFile refs: src/screens/home/portfolio/v2/pv2Card/styled.tsx | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
overlayMedium40 | rgba(0, 0, 0, 0.4) | Semantic mapping: darkColors.ui.overlay.medium | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
overlayTransparent | rgba(0, 0, 0, 0) | Semantic mapping: colors.ui.overlay.transparent, darkColors.ui.overlay.transparent | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
sky400 | #58A6FF | Semantic mapping: darkColors.ui.text.info, darkColors.ui.icon.info | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate150 | #E1E8ED | Semantic mapping: colors.ui.background.page | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate200 | #E7EFF4 | Semantic mapping: colors.ui.background.insetDisabled, colors.ui.background.disabled, colors.ui.border.subtle, colors.domainSpecific.badgeTypes.neutral.background | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate400 | #ADC2D1 | Semantic mapping: colors.ui.background.inverseSecondary, colors.ui.icon.tertiary, colors.ui.border.disabled, colors.domainSpecific.dealTypes.fallback.inactive | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate600 | #5C778A | Semantic mapping: colors.ui.text.tertiary, colors.domainSpecific.dealTypes.realEstate.inactive, colors.domainSpecific.dealTypes.privateEquity.inactive | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate700 | #3A5E78 | Semantic mapping: colors.ui.text.secondary, colors.ui.icon.secondary, colors.ui.border.strong, colors.domainSpecific.dealTypes.ventureCapital.inactive, colors.domainSpecific.badgeTypes.neutral.text | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate900Alpha20 | rgba(9, 45, 70, 0.2) | Semantic mapping: colors.ui.overlay.light | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate900Alpha40 | rgba(9, 45, 70, 0.4) | Semantic mapping: colors.ui.overlay.medium | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
slate900Alpha80 | rgba(9, 45, 70, 0.8) | Semantic mapping: colors.ui.overlay.dark | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
white | #FFFFFF | Semantic mapping: colors.ui.background.raised, colors.ui.background.surface, colors.ui.interactive.secondaryFile refs: src/screens/auth-v2/landing/widgets/NetWorthChart.component.tsx, src/screens/auth-v2/landing/widgets/NetWorthChart.variantA.tsx, src/screens/auth-v2/landing/widgets/NetWorthChart.variantAv2.tsx, src/screens/auth-v2/landing/widgets/NetWorthChart.variantB.tsx +1 more | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
whiteOverlay10 | rgba(255, 255, 255, 0.10) | File refs: src/screens/home/fundNoticePeriodChoice/components/EntityPills.styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
whiteOverlay12 | rgba(255, 255, 255, 0.12) | File refs: src/screens/home/fundNoticePeriodChoice/components/LoyaltyBoostModal.tsx, src/screens/home/fundNoticePeriodChoice/components/MemberRatesModal.tsx, src/screens/home/fundNoticePeriodChoice/components/ThreeMonthWarningModal.tsx, src/screens/home/fundNoticePeriodChoice/screens/AllocationScreen.styled.ts +3 more | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
whiteOverlay50 | rgba(255, 255, 255, 0.50) | File refs: src/screens/home/fundNoticePeriodChoice/components/ProgressBar.styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
whiteOverlay8 | rgba(255, 255, 255, 0.08) | Semantic mapping: darkColors.domainSpecific.entityTypes.personalBg, darkColors.domainSpecific.entityTypes.ifisaBg, darkColors.domainSpecific.entityTypes.businessBgFile refs: src/design-system/components/Button/SecondaryDarkExplorer.stories.tsx, src/screens/home/fundNoticePeriodChoice/components/EntityPills.styled.ts, src/screens/if-isa/isa-wrap/styled.ts | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
yellow50 | #FFF8DB | Semantic mapping: colors.ui.background.warning | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
yellow600 | #D4BB00 | Semantic mapping: colors.ui.feedback.warning | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |
yellow750 | #756800 | Semantic mapping: colors.ui.text.warning | Not in the 34 approved primitives and not required by Shabana's dark semantic guide. Needs a replacement, explicit approval, or internal-only exception. |