تخطَّ إلى المحتوى
كود المنصاتEnglish

الألوان

ألوان DGA الأساسية، والرموز الدلالية للوضعين الفاتح والداكن، ونسب تباينها وفق WCAG.

الإصدار 0.2.0 ·

تأتي ألوان DGA في طبقتين. الألوان الأساسية (Primitives) هي اللوحات الخام (الأخضر السعودي والذهبي والخزامي والمحايد وألوان الحالة). والرموز الدلالية (--text-primary و--background-body …) تشير إلى الألوان الأساسية وتتبدل بين الفاتح والداكن. استخدم الرموز الدلالية في المكوّنات ليعمل الوضع الداكن من تلقاء نفسه.

الرموز الدلالية في سياقها
الاتجاه
السمة
حجم العرض
ألوان الحالة والتعبئات
الاتجاه
السمة
حجم العرض

للوضع الداكن صفحة خاصة: الوضع الداكن تشرح القواعد وتعرض Button وBadge وTag وLink وأسطح الحالة في الوضعين جنبًا إلى جنب.

الأدوات (Utilities)

لكل رمز دلالي أداتا Tailwind.

النوعالقاعدةمثال
مطابقة لـ Figma{utility}-{اسم الرمز}، مطابقة واحد لواحد لمتغير Figmatext-text-primary وbg-background-body وborder-border-primary
اسم مختصراسم الرمز دون بادئة فئتهtext-primary وbg-body وborder-primary

لا توجد الأسماء المختصرة إلا لرموز background-* وtext-* وborder-*. ويُتجاوز الاسم المختصر عندما يحجب لونًا أساسيًا (bg-white وbg-neutral-50 تبقى للوحة الخام) أو يغيّر معنى أداة في shadcn (bg-primary وbg-secondary تبقى لـ shadcn). في هذه الحالات استخدم الصيغة المطابقة لـ Figma.

page.tsx
tsx
<p className="text-primary-paragraph">…</p>      {/* اسم مختصر */}
<p className="text-text-primary-paragraph">…</p> {/* مطابق لـ Figma، اللون نفسه */}

الرموز الدلالية

تعرض الشارة أدنى نسبة تباين من الأزواج المفحوصة في ذلك الوضع، مثل رمز نص على أسطح الصفحة والأبيض والبطاقة. وفي التعبئات تعرض نص اللون الموضوع فوقها. الرموز الموسومة بـ معدَّل تختلف عن Figma؛ انظر الاختلافات.

23 من 449 رمزًا

  • --text-primaryText/text-primary
    text-primaryمعدَّل
    الفاتح
    #1b8354colors-primary-sa-flag-600-primary4.53:1 AA
    الداكن
    #88d8adcolors-primary-sa-flag-3008.74:1 AAA
  • --text-displayText/text-display
    text-displayمعدَّل
    الفاتح
    #1f2a37colors-neutral-80013.91:1 AAA
    الداكن
    #f0f5f3colors-neutral-dark-5015.87:1 AAA
  • --text-primary-paragraphText/text-primary-paragraph
    text-primary-paragraphمعدَّل
    الفاتح
    #384250colors-neutral-7009.73:1 AAA
    الداكن
    #d0d8d5colors-neutral-dark-20012.04:1 AAA
  • --text-secondary-paragraphText/text-secondary-paragraph
    text-secondary-paragraphمعدَّل
    الفاتح
    #6c737fcolors-neutral-5004.57:1 AA
    الداكن
    #b6c0bdcolors-neutral-dark-3009.38:1 AAA
  • --text-successText/text-success
    text-successمعدَّل
    الفاتح
    #067647colors-green-7005.39:1 AA
    الداكن
    #75e0a7colors-green-3009.08:1 AAA
  • --text-infoText/text-info
    text-infoمعدَّل
    الفاتح
    #175cd3colors-blue-7005.57:1 AA
    الداكن
    #84caffcolors-blue-3008.53:1 AAA
  • --text-warningText/text-warning
    text-warningمعدَّل
    الفاتح
    #b54708colors-yellow-7005.19:1 AA
    الداكن
    #fec84bcolors-yellow-3009.75:1 AAA
  • --text-errorText/text-error
    text-errorمعدَّل
    الفاتح
    #b42318colors-red-7006.04:1 AA
    الداكن
    #fda29bcolors-red-3007.94:1 AAA
  • --text-oncolor-primaryText/text-oncolor-primary
    text-oncolor-primary
    الفاتح
    #ffffffcolors-base-white4.56:1 AA
    الداكن
    #ffffffcolors-base-white4.56:1 AA
  • --text-defaultText/text-default
    text-defaultمعدَّل
    الفاتح
    #161616colors-base-black17.31:1 AAA
    الداكن
    #f0f5f3colors-neutral-dark-5015.87:1 AAA
  • --text-form-titleForm/text-form-title
    text-form-title
    الفاتح
    #161616text-default17.31:1 AAA
    الداكن
    #f0f5f3text-default15.87:1 AAA
  • --text-form-paragraphForm/text-form-paragraph
    text-form-paragraph
    الفاتح
    #6c737ftext-secondary-paragraph4.57:1 AA
    الداكن
    #b6c0bdtext-secondary-paragraph9.38:1 AAA
  • --text-default-disabledGlobal/text-default-disabled
    text-default-disabledمعدَّل
    الفاتح
    #9da4aecolors-neutral-400
    الداكن
    #939e9acolors-neutral-dark-400
  • --text-default-oncolor-disabledGlobal/text-default-oncolor-disabled
    text-default-oncolor-disabled
    الفاتح
    #ffffff66alpha-white-40
    الداكن
    #ffffff66alpha-black-40
  • --text-primary-lightText/text-primary-light
    text-primary-lightمعدَّل
    الفاتح
    #88d8adcolors-primary-sa-flag-3005.08:1 AA
    الداكن
    #88d8adcolors-primary-sa-flag-30010.38:1 AAA
  • --text-primary-sa-flagText/text-primary-sa-flag
    text-primary-sa-flag
    الفاتح
    #14573acolors-primary-sa-flag-8008.18:1 AAA
    الداكن
    #dff6e7colors-primary-sa-flag-10015.38:1 AAA
  • --text-oncolor-secondaryText/text-oncolor-secondary
    text-oncolor-secondaryمعدَّل
    الفاتح
    #ffffffccalpha-white-806.13:1 AA
    الداكن
    #ffffffcccolors-alpha-alpha-white-806.13:1 AA
  • --text-oncolor-tertiaryText/text-oncolor-tertiary
    text-oncolor-tertiaryمعدَّل
    الفاتح
    #ffffffb2alpha-white-705.09:1 AA
    الداكن
    #ffffffb2colors-alpha-alpha-white-705.09:1 AA
  • --text-secondary
    معدَّلمن CSS الموقع فقط
    الفاتح
    #945c01colors-secondary-gold-8005.30:1 AA
    الداكن
    #f7d54dcolors-secondary-gold-40012.14:1 AAA
  • --text-tertiary
    text-tertiaryمعدَّلمن CSS الموقع فقط
    الفاتح
    #80519fcolors-tertiary-lavender-500-primary5.58:1 AA
    الداكن
    #ccadd9colors-tertiary-lavender-3008.78:1 AAA
  • --text-secondary-light
    text-secondary-lightمن CSS الموقع فقط
    الفاتح
    #fae996colors-secondary-gold-3006.99:1 AA
    الداكن
    #fae996colors-secondary-gold-30014.29:1 AAA
  • --text-tertiary-light
    text-tertiary-lightمعدَّلمن CSS الموقع فقط
    الفاتح
    #e1cce8colors-tertiary-lavender-2005.70:1 AA
    الداكن
    #ccadd9colors-tertiary-lavender-3008.78:1 AAA
  • --text-on-gold
    text-on-goldمعدَّلكود المنصات
    الفاتح
    #161616colors-base-black7.85:1 AAA
    الداكن
    #161616colors-base-black7.85:1 AAA

الأسماء المختصرة

الاسم المختصر:text-primaryالأداة المطابقة لـ Figma:text-text-primaryالرمز:--text-primary
الاسم المختصر:border-neutral-primaryالأداة المطابقة لـ Figma:border-border-neutral-primaryالرمز:--border-neutral-primary
الاسم المختصر:border-neutral-secondaryالأداة المطابقة لـ Figma:border-border-neutral-secondaryالرمز:--border-neutral-secondary
الاسم المختصر:border-neutral-tertiaryالأداة المطابقة لـ Figma:border-border-neutral-tertiaryالرمز:--border-neutral-tertiary
الاسم المختصر:bg-primary-50الأداة المطابقة لـ Figma:bg-background-primary-50الرمز:--background-primary-50
الاسم المختصر:bg-secondary-50الأداة المطابقة لـ Figma:bg-background-secondary-50الرمز:--background-secondary-50
الاسم المختصر:bg-tertiary-50الأداة المطابقة لـ Figma:bg-background-tertiary-50الرمز:--background-tertiary-50
الاسم المختصر:bg-success-50الأداة المطابقة لـ Figma:bg-background-success-50الرمز:--background-success-50
الاسم المختصر:bg-info-50الأداة المطابقة لـ Figma:bg-background-info-50الرمز:--background-info-50
الاسم المختصر:bg-warning-50الأداة المطابقة لـ Figma:bg-background-warning-50الرمز:--background-warning-50
الاسم المختصر:bg-error-50الأداة المطابقة لـ Figma:bg-background-error-50الرمز:--background-error-50
الاسم المختصر:text-displayالأداة المطابقة لـ Figma:text-text-displayالرمز:--text-display
الاسم المختصر:text-primary-paragraphالأداة المطابقة لـ Figma:text-text-primary-paragraphالرمز:--text-primary-paragraph
الاسم المختصر:text-secondary-paragraphالأداة المطابقة لـ Figma:text-text-secondary-paragraphالرمز:--text-secondary-paragraph
الاسم المختصر:text-successالأداة المطابقة لـ Figma:text-text-successالرمز:--text-success
الاسم المختصر:text-infoالأداة المطابقة لـ Figma:text-text-infoالرمز:--text-info
الاسم المختصر:text-warningالأداة المطابقة لـ Figma:text-text-warningالرمز:--text-warning
الاسم المختصر:text-errorالأداة المطابقة لـ Figma:text-text-errorالرمز:--text-error
الاسم المختصر:border-successالأداة المطابقة لـ Figma:border-border-successالرمز:--border-success
الاسم المختصر:border-infoالأداة المطابقة لـ Figma:border-border-infoالرمز:--border-info
الاسم المختصر:border-warningالأداة المطابقة لـ Figma:border-border-warningالرمز:--border-warning
الاسم المختصر:border-errorالأداة المطابقة لـ Figma:border-border-errorالرمز:--border-error
الاسم المختصر:border-background-whiteالأداة المطابقة لـ Figma:border-border-background-whiteالرمز:--border-background-white
الاسم المختصر:border-background-neutralالأداة المطابقة لـ Figma:border-border-background-neutralالرمز:--border-background-neutral
الاسم المختصر:border-primary-lightالأداة المطابقة لـ Figma:border-border-primary-lightالرمز:--border-primary-light
الاسم المختصر:text-oncolor-primaryالأداة المطابقة لـ Figma:text-text-oncolor-primaryالرمز:--text-oncolor-primary
الاسم المختصر:text-defaultالأداة المطابقة لـ Figma:text-text-defaultالرمز:--text-default
الاسم المختصر:text-form-titleالأداة المطابقة لـ Figma:text-text-form-titleالرمز:--text-form-title
الاسم المختصر:text-form-paragraphالأداة المطابقة لـ Figma:text-text-form-paragraphالرمز:--text-form-paragraph
الاسم المختصر:border-primaryالأداة المطابقة لـ Figma:border-border-primaryالرمز:--border-primary
الاسم المختصر:bg-successالأداة المطابقة لـ Figma:bg-background-successالرمز:--background-success
الاسم المختصر:bg-infoالأداة المطابقة لـ Figma:bg-background-infoالرمز:--background-info
الاسم المختصر:bg-warningالأداة المطابقة لـ Figma:bg-background-warningالرمز:--background-warning
الاسم المختصر:bg-errorالأداة المطابقة لـ Figma:bg-background-errorالرمز:--background-error
الاسم المختصر:border-success-lightالأداة المطابقة لـ Figma:border-border-success-lightالرمز:--border-success-light
الاسم المختصر:border-info-lightالأداة المطابقة لـ Figma:border-border-info-lightالرمز:--border-info-light
الاسم المختصر:border-warning-lightالأداة المطابقة لـ Figma:border-border-warning-lightالرمز:--border-warning-light
الاسم المختصر:border-error-lightالأداة المطابقة لـ Figma:border-border-error-lightالرمز:--border-error-light
الاسم المختصر:bg-sa-flagالأداة المطابقة لـ Figma:bg-background-sa-flagالرمز:--background-sa-flag
الاسم المختصر:text-default-disabledالأداة المطابقة لـ Figma:text-text-default-disabledالرمز:--text-default-disabled
الاسم المختصر:text-default-oncolor-disabledالأداة المطابقة لـ Figma:text-text-default-oncolor-disabledالرمز:--text-default-oncolor-disabled
الاسم المختصر:border-white-40الأداة المطابقة لـ Figma:border-border-white-40الرمز:--border-white-40
الاسم المختصر:bg-disabledالأداة المطابقة لـ Figma:bg-background-disabledالرمز:--background-disabled
الاسم المختصر:bg-bodyالأداة المطابقة لـ Figma:bg-background-bodyالرمز:--background-body
الاسم المختصر:bg-primary-25الأداة المطابقة لـ Figma:bg-background-primary-25الرمز:--background-primary-25
الاسم المختصر:bg-secondary-25الأداة المطابقة لـ Figma:bg-background-secondary-25الرمز:--background-secondary-25
الاسم المختصر:bg-tertiary-25الأداة المطابقة لـ Figma:bg-background-tertiary-25الرمز:--background-tertiary-25
الاسم المختصر:bg-success-25الأداة المطابقة لـ Figma:bg-background-success-25الرمز:--background-success-25
الاسم المختصر:bg-info-25الأداة المطابقة لـ Figma:bg-background-info-25الرمز:--background-info-25
الاسم المختصر:bg-warning-25الأداة المطابقة لـ Figma:bg-background-warning-25الرمز:--background-warning-25
الاسم المختصر:bg-error-25الأداة المطابقة لـ Figma:bg-background-error-25الرمز:--background-error-25
الاسم المختصر:bg-menuالأداة المطابقة لـ Figma:bg-background-menuالرمز:--background-menu
الاسم المختصر:bg-inverse-disabledالأداة المطابقة لـ Figma:bg-background-inverse-disabledالرمز:--background-inverse-disabled
الاسم المختصر:border-transparent-10الأداة المطابقة لـ Figma:border-border-transparent-10الرمز:--border-transparent-10
الاسم المختصر:text-primary-lightالأداة المطابقة لـ Figma:text-text-primary-lightالرمز:--text-primary-light
الاسم المختصر:bg-disabled-primaryالأداة المطابقة لـ Figma:bg-background-disabled-primaryالرمز:--background-disabled-primary
الاسم المختصر:text-primary-sa-flagالأداة المطابقة لـ Figma:text-text-primary-sa-flagالرمز:--text-primary-sa-flag
الاسم المختصر:bg-cardالأداة المطابقة لـ Figma:bg-background-cardالرمز:--background-card
الاسم المختصر:bg-primary-400الأداة المطابقة لـ Figma:bg-background-primary-400الرمز:--background-primary-400
الاسم المختصر:border-oncolor-transparent-30الأداة المطابقة لـ Figma:border-border-oncolor-transparent-30الرمز:--border-oncolor-transparent-30
الاسم المختصر:text-oncolor-secondaryالأداة المطابقة لـ Figma:text-text-oncolor-secondaryالرمز:--text-oncolor-secondary
الاسم المختصر:text-oncolor-tertiaryالأداة المطابقة لـ Figma:text-text-oncolor-tertiaryالرمز:--text-oncolor-tertiary
الاسم المختصر:bg-notification-whiteالأداة المطابقة لـ Figma:bg-background-notification-whiteالرمز:--background-notification-white
الاسم المختصر:bg-primary-200الأداة المطابقة لـ Figma:bg-background-primary-200الرمز:--background-primary-200
الاسم المختصر:bg-warning-lightالأداة المطابقة لـ Figma:bg-background-warning-lightالرمز:--background-warning-light
الاسم المختصر:bg-error-lightالأداة المطابقة لـ Figma:bg-background-error-lightالرمز:--background-error-light
الاسم المختصر:bg-brand-lightالأداة المطابقة لـ Figma:bg-background-brand-lightالرمز:--background-brand-light
الاسم المختصر:bg-info-lightالأداة المطابقة لـ Figma:bg-background-info-lightالرمز:--background-info-light
الاسم المختصر:bg-success-lightالأداة المطابقة لـ Figma:bg-background-success-lightالرمز:--background-success-light
الاسم المختصر:border-disabledالأداة المطابقة لـ Figma:border-border-disabledالرمز:--border-disabled
الاسم المختصر:bg-nav-headerالأداة المطابقة لـ Figma:bg-background-nav-headerالرمز:--background-nav-header
الاسم المختصر:bg-surface-oncolorالأداة المطابقة لـ Figma:bg-background-surface-oncolorالرمز:--background-surface-oncolor
الاسم المختصر:bg-tertiaryالأداة المطابقة لـ Figma:bg-background-tertiaryالرمز:--background-tertiary
الاسم المختصر:text-tertiaryالأداة المطابقة لـ Figma:text-text-tertiaryالرمز:--text-tertiary
الاسم المختصر:text-secondary-lightالأداة المطابقة لـ Figma:text-text-secondary-lightالرمز:--text-secondary-light
الاسم المختصر:text-tertiary-lightالأداة المطابقة لـ Figma:text-text-tertiary-lightالرمز:--text-tertiary-light
الاسم المختصر:border-secondary-lightالأداة المطابقة لـ Figma:border-border-secondary-lightالرمز:--border-secondary-light
الاسم المختصر:border-tertiaryالأداة المطابقة لـ Figma:border-border-tertiaryالرمز:--border-tertiary
الاسم المختصر:border-tertiary-lightالأداة المطابقة لـ Figma:border-border-tertiary-lightالرمز:--border-tertiary-light
الاسم المختصر:text-on-goldالأداة المطابقة لـ Figma:text-text-on-goldالرمز:--text-on-gold

متغيرات shadcn

تستخدم مكوّنات shadcn --background و--primary وغيرها. ويربط كود المنصات كلًّا منها برمز دلالي من DGA، فتتفق أدوات shadcn وDGA دائمًا.

متغير shadcn:--backgroundرمز DGA:--background-bodyالفاتح:الداكن:
متغير shadcn:--foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--cardرمز DGA:--background-cardالفاتح:الداكن:
متغير shadcn:--card-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--popoverرمز DGA:--background-menuالفاتح:الداكن:
متغير shadcn:--popover-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--primaryرمز DGA:--background-primaryالفاتح:الداكن:
متغير shadcn:--primary-foregroundرمز DGA:--text-oncolor-primaryالفاتح:الداكن:
متغير shadcn:--secondaryرمز DGA:--button-background-neutral-defaultالفاتح:الداكن:
متغير shadcn:--secondary-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--mutedرمز DGA:--background-neutral-50الفاتح:الداكن:
متغير shadcn:--muted-foregroundرمز DGA:--text-secondary-paragraphالفاتح:الداكن:
متغير shadcn:--accentرمز DGA:--background-neutral-100الفاتح:الداكن:
متغير shadcn:--accent-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--destructiveرمز DGA:--background-errorالفاتح:الداكن:
متغير shadcn:--destructive-foregroundرمز DGA:--text-oncolor-primaryالفاتح:الداكن:
متغير shadcn:--borderرمز DGA:--border-neutral-secondaryالفاتح:الداكن:
متغير shadcn:--inputرمز DGA:--border-neutral-primaryالفاتح:الداكن:
متغير shadcn:--ringرمز DGA:--border-blackالفاتح:الداكن:
متغير shadcn:--chart-1رمز DGA:--charts-greenالفاتح:الداكن:
متغير shadcn:--chart-2رمز DGA:--charts-goldالفاتح:الداكن:
متغير shadcn:--chart-3رمز DGA:--charts-blueالفاتح:الداكن:
متغير shadcn:--chart-4رمز DGA:--charts-lavenderالفاتح:الداكن:
متغير shadcn:--chart-5رمز DGA:--charts-redالفاتح:الداكن:
متغير shadcn:--sidebarرمز DGA:--background-whiteالفاتح:الداكن:
متغير shadcn:--sidebar-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--sidebar-primaryرمز DGA:--background-primaryالفاتح:الداكن:
متغير shadcn:--sidebar-primary-foregroundرمز DGA:--text-oncolor-primaryالفاتح:الداكن:
متغير shadcn:--sidebar-accentرمز DGA:--background-neutral-100الفاتح:الداكن:
متغير shadcn:--sidebar-accent-foregroundرمز DGA:--text-defaultالفاتح:الداكن:
متغير shadcn:--sidebar-borderرمز DGA:--border-neutral-secondaryالفاتح:الداكن:
متغير shadcn:--sidebar-ringرمز DGA:--border-blackالفاتح:الداكن:

الألوان الأساسية

تستخدم أدوات اللوحة اسم Figma (bg-primary-sa-flag-600-primary) أو اسمًا قصيرًا للون في ألوان العلامة (bg-sa-flag-600 وbg-gold-600 وbg-lavender-500 وbg-white وbg-black).

العلامة والمحايد

الأساس

  • Aa
    base-white#ffffff
    1.00:1 Fail18.09:1 AAA
  • Aa
    base-black#161616
    18.09:1 AAA1.00:1 Fail

المحايد

  • Aa
    neutral-25#fcfcfd
    1.02:1 Fail17.64:1 AAA
  • Aa
    neutral-50#f9fafb
    1.04:1 Fail17.31:1 AAA
  • Aa
    neutral-100#f3f4f6
    1.10:1 Fail16.44:1 AAA
  • Aa
    neutral-200#e5e7eb
    1.23:1 Fail14.61:1 AAA
  • Aa
    neutral-300#d2d6db
    1.46:1 Fail12.39:1 AAA
  • Aa
    neutral-400#9da4ae
    2.51:1 Fail7.19:1 AAA
  • Aa
    neutral-500#6c737f
    4.77:1 AA3.78:1 Fail
  • Aa
    neutral-600#4d5761
    7.36:1 AAA2.45:1 Fail
  • Aa
    neutral-700#384250
    10.17:1 AAA1.77:1 Fail
  • Aa
    neutral-800#1f2a37
    14.53:1 AAA1.24:1 Fail
  • Aa
    neutral-900#111927
    17.61:1 AAA1.02:1 Fail
  • Aa
    neutral-950#0d121c
    18.74:1 AAA1.03:1 Fail

أخضر علم السعودية (الأساسي)

  • Aa
    primary-sa-flag-25#f7fdf9
    1.03:1 Fail17.55:1 AAA
  • Aa
    primary-sa-flag-50#f3fcf6
    1.04:1 Fail17.29:1 AAA
  • Aa
    primary-sa-flag-100#dff6e7
    1.13:1 Fail15.91:1 AAA
  • Aa
    primary-sa-flag-200#b8eacb
    1.34:1 Fail13.50:1 AAA
  • Aa
    primary-sa-flag-300#88d8ad
    1.68:1 Fail10.74:1 AAA
  • Aa
    primary-sa-flag-400#54c08a
    2.26:1 Fail8.00:1 AAA
  • Aa
    primary-sa-flag-500#25935f
    3.87:1 Fail4.66:1 AA
  • Aa
    primary-sa-flag-600-primary#1b8354
    4.74:1 AA3.80:1 Fail
  • Aa
    primary-sa-flag-700#166a45
    6.60:1 AA2.74:1 Fail
  • Aa
    primary-sa-flag-800#14573a
    8.55:1 AAA2.11:1 Fail
  • Aa
    primary-sa-flag-900#104631
    10.81:1 AAA1.67:1 Fail
  • Aa
    primary-sa-flag-950#092a1e
    15.42:1 AAA1.17:1 Fail

الذهبي (الثانوي)

  • Aa
    secondary-gold-25#fffef7
    1.01:1 Fail17.89:1 AAA
  • Aa
    secondary-gold-50#fffef2
    1.01:1 Fail17.84:1 AAA
  • Aa
    secondary-gold-100#fffce6
    1.03:1 Fail17.50:1 AAA
  • Aa
    secondary-gold-200#fcf3bd
    1.12:1 Fail16.10:1 AAA
  • Aa
    secondary-gold-300#fae996
    1.22:1 Fail14.78:1 AAA
  • Aa
    secondary-gold-400#f7d54d
    1.44:1 Fail12.56:1 AAA
  • Aa
    secondary-gold-500#f5bd02
    1.72:1 Fail10.48:1 AAA
  • Aa
    secondary-gold-600-primary#dba102
    2.30:1 Fail7.85:1 AAA
  • Aa
    secondary-gold-700#b87b02
    3.57:1 Fail5.06:1 AA
  • Aa
    secondary-gold-800#945c01
    5.54:1 AA3.26:1 Fail
  • Aa
    secondary-gold-900#6e3c00
    9.09:1 AAA1.99:1 Fail
  • Aa
    secondary-gold-950#472400
    13.81:1 AAA1.31:1 Fail

الخزامي (الثالثي)

  • Aa
    tertiary-lavender-25#fefcff
    1.02:1 Fail17.73:1 AAA
  • Aa
    tertiary-lavender-50#f9f5fa
    1.07:1 Fail16.77:1 AAA
  • Aa
    tertiary-lavender-100#f2e9f5
    1.18:1 Fail15.29:1 AAA
  • Aa
    tertiary-lavender-200#e1cce8
    1.49:1 Fail12.06:1 AAA
  • Aa
    tertiary-lavender-300#ccadd9
    1.99:1 Fail9.08:1 AAA
  • Aa
    tertiary-lavender-400#a57bba
    3.41:1 Fail5.29:1 AA
  • Aa
    tertiary-lavender-500-primary#80519f
    5.84:1 AA3.09:1 Fail
  • Aa
    tertiary-lavender-600#6d428f
    7.43:1 AAA2.43:1 Fail
  • Aa
    tertiary-lavender-700#532d75
    10.49:1 AAA1.72:1 Fail
  • Aa
    tertiary-lavender-800#3d1d5e
    13.67:1 AAA1.32:1 Fail
  • Aa
    tertiary-lavender-900#281047
    16.72:1 AAA1.08:1 Fail
  • Aa
    tertiary-lavender-950#16072e
    19.02:1 AAA1.05:1 Fail

المحايد للوضع الداكن (كود المنصات، بصبغة خضراء)

  • Aa
    neutral-dark-25#f8fbfa
    1.04:1 Fail17.38:1 AAA
  • Aa
    neutral-dark-50#f0f5f3
    1.10:1 Fail16.42:1 AAA
  • Aa
    neutral-dark-100#e4ebe9
    1.20:1 Fail14.95:1 AAA
  • Aa
    neutral-dark-200#d0d8d5
    1.45:1 Fail12.46:1 AAA
  • Aa
    neutral-dark-300#b6c0bd
    1.86:1 Fail9.70:1 AAA
  • Aa
    neutral-dark-400#939e9a
    2.76:1 Fail6.54:1 AA
  • Aa
    neutral-dark-500#6c7873
    4.59:1 AA3.93:1 Fail
  • Aa
    neutral-dark-600#4a5651
    7.66:1 AAA2.36:1 Fail
  • Aa
    neutral-dark-700#37413d
    10.57:1 AAA1.71:1 Fail
  • Aa
    neutral-dark-800#242e2a
    14.00:1 AAA1.29:1 Fail
  • Aa
    neutral-dark-850#1b2421
    15.89:1 AAA1.13:1 Fail
  • Aa
    neutral-dark-900#141b19
    17.49:1 AAA1.03:1 Fail
  • Aa
    neutral-dark-950#0d1311
    18.77:1 AAA1.03:1 Fail

تعرض كل عينة تباين النص الأبيض (text-oncolor-primary، #ffffff) والنص الأسود (text-default، #161616) عليها. تُقاس العينات الشفافة فوق الأبيض.

الحالة

الحالة: Red

  • Aa
    red-25#fffbfa
    1.02:1 Fail17.60:1 AAA
  • Aa
    red-50#fef3f2
    1.08:1 Fail16.64:1 AAA
  • Aa
    red-100#fee4e2
    1.20:1 Fail15.00:1 AAA
  • Aa
    red-200#fecdca
    1.41:1 Fail12.75:1 AAA
  • Aa
    red-300#fda29b
    1.94:1 Fail9.32:1 AAA
  • Aa
    red-400#f97066
    2.78:1 Fail6.49:1 AA
  • Aa
    red-500#f04438
    3.75:1 Fail4.81:1 AA
  • Aa
    red-600#d92d20
    4.83:1 AA3.74:1 Fail
  • Aa
    red-700#b42318
    6.57:1 AA2.75:1 Fail
  • Aa
    red-800#912018
    8.66:1 AAA2.08:1 Fail
  • Aa
    red-900#7a271a
    9.84:1 AAA1.83:1 Fail
  • Aa
    red-950#55160c
    13.94:1 AAA1.29:1 Fail

الحالة: Yellow

  • Aa
    yellow-25#fffcf5
    1.02:1 Fail17.66:1 AAA
  • Aa
    yellow-50#fffaeb
    1.04:1 Fail17.34:1 AAA
  • Aa
    yellow-100#fef0c7
    1.13:1 Fail15.94:1 AAA
  • Aa
    yellow-200#fedf89
    1.30:1 Fail13.90:1 AAA
  • Aa
    yellow-300#fec84b
    1.54:1 Fail11.70:1 AAA
  • Aa
    yellow-400#fdb022
    1.84:1 Fail9.83:1 AAA
  • Aa
    yellow-500#f79009
    2.34:1 Fail7.71:1 AAA
  • Aa
    yellow-600#dc6803
    3.48:1 Fail5.19:1 AA
  • Aa
    yellow-700#b54708
    5.42:1 AA3.33:1 Fail
  • Aa
    yellow-800#93370d
    7.51:1 AAA2.40:1 Fail
  • Aa
    yellow-900#7a2e0e
    9.43:1 AAA1.91:1 Fail
  • Aa
    yellow-950#4e1d09
    13.96:1 AAA1.29:1 Fail

الحالة: Green

  • Aa
    green-25#f6fef9
    1.02:1 Fail17.63:1 AAA
  • Aa
    green-50#ecfdf3
    1.05:1 Fail17.15:1 AAA
  • Aa
    green-100#dcfae6
    1.11:1 Fail16.25:1 AAA
  • Aa
    green-200#abefc6
    1.32:1 Fail13.69:1 AAA
  • Aa
    green-300#75e0a7
    1.61:1 Fail11.18:1 AAA
  • Aa
    green-400#47cd89
    2.02:1 Fail8.92:1 AAA
  • Aa
    green-500#17b26a
    2.75:1 Fail6.56:1 AA
  • Aa
    green-600#079455
    3.90:1 Fail4.63:1 AA
  • Aa
    green-700#067647
    5.69:1 AA3.17:1 Fail
  • Aa
    green-800#085d3a
    7.96:1 AAA2.27:1 Fail
  • Aa
    green-900#074d31
    9.92:1 AAA1.82:1 Fail
  • Aa
    green-950#053321
    13.98:1 AAA1.29:1 Fail

الحالة: Blue

  • Aa
    blue-25#f5faff
    1.04:1 Fail17.23:1 AAA
  • Aa
    blue-50#eff8ff
    1.07:1 Fail16.83:1 AAA
  • Aa
    blue-100#d1e9ff
    1.24:1 Fail14.48:1 AAA
  • Aa
    blue-200#b2ddff
    1.43:1 Fail12.64:1 AAA
  • Aa
    blue-300#84caff
    1.76:1 Fail10.23:1 AAA
  • Aa
    blue-400#53b1fd
    2.31:1 Fail7.82:1 AAA
  • Aa
    blue-500#2e90fa
    3.23:1 Fail5.58:1 AA
  • Aa
    blue-600#1570ef
    4.56:1 AA3.96:1 Fail
  • Aa
    blue-700#175cd3
    5.98:1 AA3.02:1 Fail
  • Aa
    blue-800#1849a9
    8.18:1 AAA2.21:1 Fail
  • Aa
    blue-900#194185
    9.83:1 AAA1.84:1 Fail
  • Aa
    blue-950#102a56
    14.11:1 AAA1.28:1 Fail

تعرض كل عينة تباين النص الأبيض (text-oncolor-primary، #ffffff) والنص الأسود (text-default، #161616) عليها. تُقاس العينات الشفافة فوق الأبيض.

الشفافية

الشفافية: white

  • Aa
    alpha-alpha-white-10#ffffff1a
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-20#ffffff33
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-30#ffffff4d
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-40#ffffff66
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-50#ffffff80
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-60#ffffff99
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-70#ffffffb2
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-80#ffffffcc
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-90#ffffffe5
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-100#ffffff
    1.00:1 Fail18.09:1 AAA
  • Aa
    alpha-alpha-white-0#ffffff00
    1.00:1 Fail18.09:1 AAA

الشفافية: black

  • Aa
    alpha-alpha-black-10#1616161a
    1.23:1 Fail14.66:1 AAA
  • Aa
    alpha-alpha-black-20#16161633
    1.53:1 Fail11.77:1 AAA
  • Aa
    alpha-alpha-black-30#1616164d
    1.96:1 Fail9.18:1 AAA
  • Aa
    alpha-alpha-black-40#16161666
    2.55:1 Fail7.07:1 AAA
  • Aa
    alpha-alpha-black-50#16161680
    3.45:1 Fail5.24:1 AA
  • Aa
    alpha-alpha-black-60#16161699
    4.72:1 AA3.82:1 Fail
  • Aa
    alpha-alpha-black-70#161616b2
    6.65:1 AA2.72:1 Fail
  • Aa
    alpha-alpha-black-80#161616cc
    9.64:1 AAA1.87:1 Fail
  • Aa
    alpha-alpha-black-90#161616e5
    13.62:1 AAA1.32:1 Fail
  • Aa
    alpha-alpha-black-100#161616
    18.09:1 AAA1.00:1 Fail
  • Aa
    alpha-alpha-black-0#16161600
    1.00:1 Fail18.09:1 AAA

الشفافية: الأساسي

  • Aa
    alpha-alpha-600-primary-100#1b8354
    4.74:1 AA3.80:1 Fail
  • Aa
    alpha-alpha-600-primary-90#1b8354e5
    3.96:1 Fail4.56:1 AA
  • Aa
    alpha-alpha-600-primary-80#1b8354cc
    3.34:1 Fail5.41:1 AA
  • Aa
    alpha-alpha-600-primary-70#1b8354b2
    2.80:1 Fail6.44:1 AA
  • Aa
    alpha-alpha-600-primary-60#1b835499
    2.38:1 Fail7.58:1 AAA
  • Aa
    alpha-alpha-600-primary-50#1b835480
    2.03:1 Fail8.88:1 AAA
  • Aa
    alpha-alpha-600-primary-40#1b835466
    1.74:1 Fail10.39:1 AAA
  • Aa
    alpha-alpha-600-primary-30#1b83544d
    1.50:1 Fail12.01:1 AAA
  • Aa
    alpha-alpha-600-primary-20#1b835433
    1.30:1 Fail13.87:1 AAA
  • Aa
    alpha-alpha-600-primary-10#1b83541a
    1.14:1 Fail15.85:1 AAA
  • Aa
    primary-sa-flag-500-alpha-10#25935f19
    1.12:1 Fail16.13:1 AAA

الشفافية: yellow

  • Aa
    alpha-alpha-yellow-10#dc68031a
    1.12:1 Fail16.08:1 AAA
  • Aa
    alpha-alpha-yellow-20#dc680333
    1.26:1 Fail14.31:1 AAA

الشفافية: red

  • Aa
    alpha-alpha-red-10#d92d201a
    1.16:1 Fail15.50:1 AAA
  • Aa
    alpha-alpha-red-20#d92d2033
    1.36:1 Fail13.28:1 AAA

الشفافية: blue

  • Aa
    alpha-alpha-blue-10#1570ef1a
    1.14:1 Fail15.80:1 AAA
  • Aa
    alpha-alpha-blue-20#1570ef33
    1.31:1 Fail13.79:1 AAA

الشفافية: green

  • Aa
    alpha-alpha-green-10#0794551a
    1.13:1 Fail15.97:1 AAA
  • Aa
    alpha-alpha-green-20#07945533
    1.28:1 Fail14.11:1 AAA
  • Aa
    alpha-alpha-green-30#1b83544c
    1.49:1 Fail12.08:1 AAA
  • Aa
    alpha-alpha-green-40#1b835466
    1.74:1 Fail10.39:1 AAA
  • Aa
    alpha-alpha-green-50#1b83547f
    2.02:1 Fail8.93:1 AAA
  • Aa
    alpha-alpha-green-60#1b835499
    2.38:1 Fail7.58:1 AAA
  • Aa
    alpha-alpha-green-70#1b8354b2
    2.80:1 Fail6.44:1 AA
  • Aa
    alpha-alpha-green-80#1b8354cc
    3.34:1 Fail5.41:1 AA
  • Aa
    alpha-alpha-green-90#1b8354e5
    3.96:1 Fail4.56:1 AA
  • Aa
    alpha-alpha-green-100#1b8354
    4.74:1 AA3.80:1 Fail

تعرض كل عينة تباين النص الأبيض (text-oncolor-primary، #ffffff) والنص الأسود (text-default، #161616) عليها. تُقاس العينات الشفافة فوق الأبيض.

الموسَّع

تأتي هذه اللوحات مع CSS الموقع design.dga.gov.sa وليست في Figma. أُبقيت للتوافق.

موسَّع (من CSS الموقع فقط): green-light

  • Aa
    green-light-25#fafef5
    1.02:1 Fail17.71:1 AAA
  • Aa
    green-light-50#f3fee7
    1.04:1 Fail17.35:1 AAA
  • Aa
    green-light-100#e3fbcc
    1.10:1 Fail16.31:1 AAA
  • Aa
    green-light-200#d0f8ab
    1.18:1 Fail15.24:1 AAA
  • Aa
    green-light-300#a6ef67
    1.38:1 Fail13.06:1 AAA
  • Aa
    green-light-400#85e13a
    1.63:1 Fail11.05:1 AAA
  • Aa
    green-light-500#66c61c
    2.17:1 Fail8.32:1 AAA
  • Aa
    green-light-600#4ca30d
    3.20:1 Fail5.64:1 AA
  • Aa
    green-light-700#3b7c0f
    5.15:1 AA3.51:1 Fail
  • Aa
    green-light-800#326212
    7.26:1 AAA2.49:1 Fail
  • Aa
    green-light-900#2b5314
    8.93:1 AAA2.02:1 Fail
  • Aa
    green-light-950#15290a
    15.51:1 AAA1.16:1 Fail

موسَّع (من CSS الموقع فقط): blue-light

  • Aa
    blue-light-25#f5fbff
    1.04:1 Fail17.34:1 AAA
  • Aa
    blue-light-50#f0f9ff
    1.06:1 Fail16.97:1 AAA
  • Aa
    blue-light-100#e0f2fe
    1.14:1 Fail15.77:1 AAA
  • Aa
    blue-light-200#b9e6fe
    1.32:1 Fail13.62:1 AAA
  • Aa
    blue-light-300#7cd4fd
    1.65:1 Fail10.93:1 AAA
  • Aa
    blue-light-400#36bffa
    2.10:1 Fail8.60:1 AAA
  • Aa
    blue-light-500#0ba5ec
    2.76:1 Fail6.55:1 AA
  • Aa
    blue-light-600#0086c9
    3.99:1 Fail4.52:1 AA
  • Aa
    blue-light-700#026aa2
    5.85:1 AA3.09:1 Fail
  • Aa
    blue-light-800#065986
    7.55:1 AAA2.39:1 Fail
  • Aa
    blue-light-900#0b4a6f
    9.44:1 AAA1.91:1 Fail
  • Aa
    blue-light-950#062c41
    14.53:1 AAA1.24:1 Fail

موسَّع (من CSS الموقع فقط): blue-dark

  • Aa
    blue-dark-25#f5f8ff
    1.06:1 Fail17.02:1 AAA
  • Aa
    blue-dark-50#eff4ff
    1.10:1 Fail16.41:1 AAA
  • Aa
    blue-dark-100#d1e0ff
    1.32:1 Fail13.63:1 AAA
  • Aa
    blue-dark-200#b2ccff
    1.61:1 Fail11.18:1 AAA
  • Aa
    blue-dark-300#84adff
    2.23:1 Fail8.10:1 AAA
  • Aa
    blue-dark-400#528bff
    3.23:1 Fail5.59:1 AA
  • Aa
    blue-dark-500#2970ff
    4.32:1 Fail4.18:1 Fail
  • Aa
    blue-dark-600#155eef
    5.41:1 AA3.34:1 Fail
  • Aa
    blue-dark-700#004eeb
    6.38:1 AA2.83:1 Fail
  • Aa
    blue-dark-800#0040c1
    8.38:1 AAA2.15:1 Fail
  • Aa
    blue-dark-900#00359e
    10.48:1 AAA1.72:1 Fail
  • Aa
    blue-dark-950#002266
    14.78:1 AAA1.22:1 Fail

موسَّع (من CSS الموقع فقط): orange-dark

  • Aa
    orange-dark-25#fff9f5
    1.04:1 Fail17.33:1 AAA
  • Aa
    orange-dark-50#fff4ed
    1.08:1 Fail16.73:1 AAA
  • Aa
    orange-dark-100#ffe6d5
    1.19:1 Fail15.10:1 AAA
  • Aa
    orange-dark-200#ffd6ae
    1.35:1 Fail13.34:1 AAA
  • Aa
    orange-dark-300#ff9c66
    2.05:1 Fail8.78:1 AAA
  • Aa
    orange-dark-400#ff692e
    2.87:1 Fail6.30:1 AA
  • Aa
    orange-dark-500#ff4405
    3.45:1 Fail5.24:1 AA
  • Aa
    orange-dark-600#e62e05
    4.41:1 Fail4.09:1 Fail
  • Aa
    orange-dark-700#bc1b06
    6.36:1 AA2.84:1 Fail
  • Aa
    orange-dark-800#97180c
    8.56:1 AAA2.11:1 Fail
  • Aa
    orange-dark-900#771a0d
    10.83:1 AAA1.66:1 Fail
  • Aa
    orange-dark-950#57130a
    13.97:1 AAA1.29:1 Fail

موسَّع (من CSS الموقع فقط): orange

  • Aa
    orange-25#fefaf5
    1.03:1 Fail17.41:1 AAA
  • Aa
    orange-50#fef6ee
    1.06:1 Fail16.91:1 AAA
  • Aa
    orange-100#fdead7
    1.17:1 Fail15.44:1 AAA
  • Aa
    orange-200#f9dbaf
    1.33:1 Fail13.59:1 AAA
  • Aa
    orange-300#f7b27a
    1.80:1 Fail9.99:1 AAA
  • Aa
    orange-400#f38744
    2.51:1 Fail7.20:1 AAA
  • Aa
    orange-500#ef6820
    3.14:1 Fail5.74:1 AA
  • Aa
    orange-600#e04f16
    3.96:1 Fail4.56:1 AA
  • Aa
    orange-700#b93815
    5.77:1 AA3.13:1 Fail
  • Aa
    orange-800#932f19
    7.89:1 AAA2.29:1 Fail
  • Aa
    orange-900#772917
    9.93:1 AAA1.82:1 Fail
  • Aa
    orange-950#511c10
    13.78:1 AAA1.31:1 Fail

تعرض كل عينة تباين النص الأبيض (text-oncolor-primary، #ffffff) والنص الأسود (text-default، #161616) عليها. تُقاس العينات الشفافة فوق الأبيض.