Creative Yadley Design System
v2.4.0
Sections

Components

Shared contracts for buttons, form fields, navigation, cards, badges and feedback.

Buttons

Geometry & Labels

  • Geometry: Fully pill-shaped (border-radius: var(--cy-radius-pill) / 999px).
  • Labels: Use explicit, action-oriented verbs: “Contact Us”, “Save Changes”, “Create Booking”, “Complete Order”, “View Details”. Avoid vague labels such as “Submit” or “Click here”.

Variants

  • Primary: one dominant action per decision area; signature lime #AFE139 fill with dark #0B0D0E text and lime action glow (box-shadow: 0 0 16px var(--cy-action-glow)). Keep the number of lime primary actions visually limited.
  • Secondary: neutral structural surface (var(--cy-surface-2)) with visible border (var(--cy-border-strong)).
  • Tertiary / text: low-emphasis action, no filled container.
  • Destructive: semantic danger treatment; never use lime.
  • Icon-only: only for universally recognizable actions; must have an accessible name and tooltip where helpful.

States

Default, hover, focus-visible, pressed, disabled, loading. Loading preserves button width where practical and exposes a status to assistive technology.

Sizes

  • Standard: 48–52px minimum height (50px nominal). This is the touch target.
  • Small (.cy-button--sm): 36px minimum height, padding: 0 16px, caption type, gap: 8px. Reserved for table action cells (users, payment methods, invites, invoice row actions) where a 50px button would make rows 110px tall. Never use the small variant for a page-level primary action, and never stack several small buttons into a de-facto primary decision.

Rules

  • Minimum height 48–52px for touch interfaces (standard button height 50px).
  • Do not place multiple competing primary buttons together.
  • Buttons are always fully pill-shaped.

Forms and inputs

  • Single-line form fields: Fully pill-shaped (border-radius: var(--cy-radius-pill) / 999px), with at least 52px height (min-height: 52px;) and generous horizontal padding (padding: 12px 24px;).
  • Multi-line inputs (textarea): Styled with purposeful 12px–16px radius; never use pill geometry on multi-line text areas.
  • Always show a persistent label; placeholder text is not a label.
  • Provide help text before an error occurs where needed.
  • Associate error text with the control using aria-describedby; set aria-invalid.
  • Do not rely on border color alone to communicate invalid state.
  • Preserve entered values after validation errors.
  • Provide clear required/optional conventions.
  • Include focus, hover, disabled, read-only, error and success states.
  • Use suitable input types and autocomplete attributes.

Navigation & Left Rail

  • Rail width & structure: Fixed 256px rail (--cy-rail-width: 256px), #0D0F14 background in dark mode, #FFFFFF in light mode, with 10px gutters and hidden scrollbar.
  • Navigation items: 13.5px typography, 12px border radius (--cy-radius-md), 10px 14px padding.
  • Active indicator: Solid signature lime #AFE139 pill with dark #0B0D0E text and lime action glow (0 0 20px rgba(175, 225, 57, 0.45)).
  • Clearly distinguish active location from hover and keyboard focus.
  • Use text labels for unfamiliar destinations.
  • Mobile navigation must be keyboard accessible and expose expanded/collapsed state.

Cards, panels and structural surfaces

Cards and structural containers must never use pill rounding.

  • No unnecessary 999px radii: Cards, panels, modal dialogs, and sections retain purposeful 8–24px rounding:
    • 8px: Menus, toolbars, micro-controls, dropdown panels.
    • 12px: Sub-panels, nested secondary card containers.
    • 16px: Standard cards, dashboard KPI tiles, checkout review summaries, modal dialogs.
    • 24px: Top-level hero panels and expressive showcase wrappers.
  • Surfaces & borders: Deep obsidian surfaces (#111317, #16191F) with subtle 1px 11% white hairlines (rgba(255, 255, 255, 0.11)) and lime hairlines (rgba(175, 225, 57, 0.24)).
  • Use elevation sparingly.
  • Interactive cards must have a clear hover lift (translateY(-2px)) and focus treatment.
  • Do not nest multiple clickable regions without clear interaction boundaries.

Badges and status pills

  • Typography: 14px font size with weight 500–600 (font-size: 14px; font-weight: 500;).
  • Geometry: Fully pill-shaped (border-radius: 999px), compact padding (4px 12px), paired with a recognizable icon.
  • 6 Semantic Tiers (v2.2.1):
    • Success: #16865B | Light bg #E8F5EE | Dark bg #123B2B | Icon check-circle
    • Warning: #D99A24 | Light bg #FFF4D6 | Dark bg #422F12 | Icon clock
    • Danger / Error: #C43D4D | Light bg #FCEBED | Dark bg #431C24 | Icon alert-circle
    • Information: #2563A6 | Light bg #EAF2FC | Dark bg #172D49 | Icon calendar-check
    • In Progress: #7653B5 | Light bg #F1ECFA | Dark bg #2C2144 | Icon loader-circle
    • Neutral / Inactive: #64706D | Light bg #EEF0EF | Dark bg #2C3231 | Icon ban
  • Rule 3: Never communicate status by color alone; pair with an icon and explicit text label.

Data display

  • Align numeric values consistently and use tabular numerals.
  • Provide units, labels and time ranges.
  • Charts require text summaries or accessible data alternatives.
  • Status labels must include text or an icon plus text.
  • Empty states explain what is absent and the next useful action.
  • Loading states should preserve layout to reduce visual shift.

Dialogs and overlays

  • Use dialogs for focused decisions, not routine navigation.
  • Provide a visible title and clear close/cancel action.
  • Manage focus on open and return focus to the trigger on close.
  • Support Escape where appropriate.
  • Prevent background interaction while modal.
  • On small screens, consider a full-screen or bottom-sheet presentation.

Tables and lists

  • Use semantic table markup for tabular data.
  • Keep headers visible and properly associated.
  • Support horizontal scrolling or responsive transformation on small screens.
  • Do not make every row a card on desktop.
  • Use compact density only when the task benefits from it.

Feedback and notifications

  • Success: confirm the completed action and next step when relevant.
  • Warning: explain what needs attention and how to resolve it.
  • Error: state what failed, whether data was saved, and the recovery path.
  • Toasts should not be the only place where critical information appears.
  • Announce asynchronous updates accessibly.

Component acceptance checklist

  • Uses semantic tokens
  • Works in both themes
  • Keyboard accessible
  • Visible focus
  • Touch target appropriate
  • Contrast validated in all states
  • Reduced-motion safe
  • Loading, empty, error and disabled states covered
  • Responsive behavior documented
  • Accessible name and instructions present