# Djasha System

> The agent-first index of design systems and skills. Originals + curated public design systems + agent workflows + visual directions. Machine-readable bundles, MCP server, OpenAPI. Built for AI agents to read first.

## Components

- [AnimatedText](https://system.djasha.me/components/animated-text): Word-by-word or character-by-character staggered text reveal.
- [CharacterReveal](https://system.djasha.me/components/character-reveal): Character-by-character text reveal with spring-animated masking.
- [CustomCursor](https://system.djasha.me/components/custom-cursor): Custom branded cursor replacement with smooth trailing motion.
- [EmeraldButton](https://system.djasha.me/components/emerald-button): DealDash's flagship button — Linear-style 36px control, tokenized elevation, brand glow on hover, 1px press sink. Six variants, six sizes.
- [Expandable](https://system.djasha.me/components/expandable): Click-to-toggle disclosure with smooth height animation.
- [Figure](https://system.djasha.me/components/figure): Semantic figure with image + caption + optional click-to-expand lightbox.
- [HeroGallery](https://system.djasha.me/components/hero-gallery): Multi-image hero arrangement — grid or asymmetric collage with entrance reveal.
- [MagneticButton](https://system.djasha.me/components/magnetic-button): Button with cursor-proximity magnetic pull for subtle attention in primary CTAs.
- [ParallaxImage](https://system.djasha.me/components/parallax-image): Image that translates at a fraction of the scroll speed for depth.
- [ProjectCard](https://system.djasha.me/components/project-card): Case-study card with hover-state image reveal — image, title, description, tag chips.
- [ScrollMarquee](https://system.djasha.me/components/scroll-marquee): Horizontally-scrolling marquee for announcements, brand ribbons, or feature tickers.
- [ScrollProgress](https://system.djasha.me/components/scroll-progress): Thin top/bottom bar tracking scroll position as percentage of page height.
- [SparkCta](https://system.djasha.me/components/spark-cta): DealDash's signature CTA effect — a comet of light orbiting the button edge. Pure CSS, GPU-cheap, one per view, reduced-motion safe.
- [StackingCards](https://system.djasha.me/components/stacking-cards): Scroll-pinned stack of cards that layer on top of each other as the user scrolls.
- [StatusChip](https://system.djasha.me/components/status-chip): DealDash's sanctioned soft status chip — 10% tint fill, full-strength text, 20% border, mapped to exactly four semantic tokens.
- [TextMaskReveal](https://system.djasha.me/components/text-mask-reveal): Editorial typographic intro that reveals from a full-block mask wiping in one of four directions.
- [TiltCard](https://system.djasha.me/components/tilt-card): Card with 3D perspective tilt that follows the cursor.
- [ToolTicker](https://system.djasha.me/components/tool-ticker): Horizontal scrolling ticker of tools, technologies, or skills.
- [TypeRoles](https://system.djasha.me/components/type-roles): The seven DealDash t-* typography roles — one named Inter scale with display optical sizing and Linear-tight tracking. Never hand-roll a title.

## Patterns

- [CaseStudyBody](https://system.djasha.me/patterns/case-study-body): Long-form case-study layout — hero figure, scroll-pinned process steps, expandable footnotes.
- [EditorialHero](https://system.djasha.me/patterns/editorial-hero): Magazine-style landing hero — TextMaskReveal headline + magnetic CTA + asymmetric image collage.
- [EmeraldDirection](https://system.djasha.me/patterns/emerald-direction): The DealDash Emerald design direction — Linear-grade calm with an emerald signature. Elevation as a surface ramp, hairline borders, one green, choreographed motion, and error≠empty≠loading as law.
- [FilterableWorkGrid](https://system.djasha.me/patterns/filterable-work-grid): Work index page composition — heading + tools ticker + responsive grid of ProjectCards.

## Tokens

- [color.accent](https://system.djasha.me/tokens#color.accent): `#E8462C` — Primary accent color. Use sparingly for focal points, CTAs, focus rings, and selection.
- [color.bone](https://system.djasha.me/tokens#color.bone): `#F5F1EC` — Body text on dark. Background in light theme.
- [color.dd-accent](https://system.djasha.me/tokens#color.dd-accent): `#e7f6ef` — DealDash Emerald — soft green tint for hover surfaces (ghost/outline hover, menu item hover). Dark mode `#15241e`.
- [color.dd-accent-foreground](https://system.djasha.me/tokens#color.dd-accent-foreground): `#0f6a4f` — DealDash Emerald — text on accent tint surfaces. Dark mode `#34d399`.
- [color.dd-background](https://system.djasha.me/tokens#color.dd-background): `#ffffff` — DealDash Emerald — page background, bottom of the elevation ramp. Dark mode `#0a0d0c` (near-black with a whisper of green).
- [color.dd-border](https://system.djasha.me/tokens#color.dd-border): `#e6e9e7` — DealDash Emerald — the hairline. Borders carry ALL structure (no gray slabs, no heavy shadows). Dark mode `#212824`.
- [color.dd-card](https://system.djasha.me/tokens#color.dd-card): `#fafbfa` — DealDash Emerald — card surface, one step above background on the elevation ramp. Dark mode `#121615`. Structure comes from hairline borders, not shadows.
- [color.dd-destructive](https://system.djasha.me/tokens#color.dd-destructive): `#dc2626` — DealDash Emerald — danger status. Dark mode `#f87171` (lighter hue for dark surfaces). Soft chip recipe bg-destructive/10 text-destructive border-destructive/20.
- [color.dd-foreground](https://system.djasha.me/tokens#color.dd-foreground): `#0e1512` — DealDash Emerald — primary text. Dark mode `#f4f6f5`.
- [color.dd-info](https://system.djasha.me/tokens#color.dd-info): `#1d4ed8` — DealDash Emerald — info status. Dark mode `#60a5fa` (with dark text `#082f49` on fills). Soft chip recipe bg-info/10 text-info border-info/20.
- [color.dd-input](https://system.djasha.me/tokens#color.dd-input): `#f6f8f7` — DealDash Emerald — form control fill, slightly raised from background. Dark mode `#161c19`.
- [color.dd-muted-foreground](https://system.djasha.me/tokens#color.dd-muted-foreground): `#66716c` — DealDash Emerald — secondary text; must stay AA on card surfaces in both modes. Dark mode `#8f9a94`.
- [color.dd-popover](https://system.djasha.me/tokens#color.dd-popover): `#ffffff` — DealDash Emerald — floating surfaces (dialogs, dropdowns, popovers), top of the elevation ramp. Dark mode `#151a18`. Pair with shadow.dd-overlay.
- [color.dd-primary](https://system.djasha.me/tokens#color.dd-primary): `#1a7a5e` — DealDash Emerald — THE brand accent. Buttons, active states, brand moments, focus ring (--ring shares this value). Same in light and dark. Use sparingly; color is a signal, not decoration.
- [color.dd-primary-foreground](https://system.djasha.me/tokens#color.dd-primary-foreground): `#ffffff` — DealDash Emerald — text/icon color on primary fills. Same in light and dark.
- [color.dd-secondary](https://system.djasha.me/tokens#color.dd-secondary): `#f1f3f2` — DealDash Emerald — secondary/muted fill (shares value with --muted). Dark mode `#1a201d`.
- [color.dd-sidebar](https://system.djasha.me/tokens#color.dd-sidebar): `#fafbfa` — DealDash Emerald — sidebar surface. Dark mode `#0c0f0e` — one step BELOW the background, separated by a hairline divider.
- [color.dd-spark](https://system.djasha.me/tokens#color.dd-spark): `#34d399` — DealDash Emerald — bright mint accent for dark surfaces, charts, glows, and the spark comet head. Same in light and dark.
- [color.dd-warning](https://system.djasha.me/tokens#color.dd-warning): `#b45309` — DealDash Emerald — warning status. Dark mode `#fbbf24` (with dark text `#451a03` on fills). Soft chips use a 15% fill for warning (10% elsewhere).
- [color.elevated](https://system.djasha.me/tokens#color.elevated): `#1A1210` — Elevated surfaces — cards, tabs, modals.
- [color.ink](https://system.djasha.me/tokens#color.ink): `#0A0606` — Background / foreground in dark theme. The deep neutral.
- [motion.dd-duration-base](https://system.djasha.me/tokens#motion.dd-duration-base): `180ms` — DealDash Emerald — hover and transform transitions. Pair with motion.dd-ease-standard.
- [motion.dd-duration-fast](https://system.djasha.me/tokens#motion.dd-duration-fast): `120ms` — DealDash Emerald — press and color feedback. Pair with motion.dd-ease-standard.
- [motion.dd-duration-slow](https://system.djasha.me/tokens#motion.dd-duration-slow): `260ms` — DealDash Emerald — enter and overlay transitions. The ceiling: anything longer is a hero-only, deliberate moment.
- [motion.dd-ease-standard](https://system.djasha.me/tokens#motion.dd-ease-standard): `cubic-bezier(0.22, 1, 0.36, 1)` — DealDash Emerald — ONE standard easing for the whole app. Never inline a bezier; in JS use EASE/DUR constants from a shared motion module.
- [motion.duration-base](https://system.djasha.me/tokens#motion.duration-base): `300ms` — Base animation duration.
- [motion.ease-out-quart](https://system.djasha.me/tokens#motion.ease-out-quart): `cubic-bezier(0.165, 0.84, 0.44, 1)` — Default easing for outgoing motion.
- [radius.dd-base](https://system.djasha.me/tokens#radius.dd-base): `0.5rem` — DealDash Emerald — base radius. Cards/dialogs 8px (--radius), controls 6px (--radius - 2px), chips 4px or full. No rounded-2xl+ outside marketing hero art.
- [radius.md](https://system.djasha.me/tokens#radius.md): `8px` — Default border-radius.
- [shadow.dd-btn-drop](https://system.djasha.me/tokens#shadow.dd-btn-drop): `0 1px 2px 0 #0a140f40` — DealDash Emerald — drop shadow for filled buttons (default/destructive). Dark mode `0 1px 2px 0
- [shadow.dd-btn-drop-subtle](https://system.djasha.me/tokens#shadow.dd-btn-drop-subtle): `0 1px 2px 0 #0a140f0d` — DealDash Emerald — whisper drop shadow for outline/secondary buttons. Dark mode `0 1px 2px 0
- [shadow.dd-btn-highlight](https://system.djasha.me/tokens#shadow.dd-btn-highlight): `inset 0 1px 0 0 #ffffff2e` — DealDash Emerald — the "lit" top inner edge of every filled button. Dark mode `inset 0 1px 0 0
- [shadow.dd-overlay](https://system.djasha.me/tokens#shadow.dd-overlay): `0 12px 50px -12px #0a140f38, 0 2px 8px -2px #0a140f1f` — DealDash Emerald — ONE deep soft shadow shared by dialogs, dropdowns, popovers, and select menus so every floating surface feels identical. Dark mode `0 16px 70px -12px
- [space.1](https://system.djasha.me/tokens#space.1): `0.25rem` — Smallest spacing unit.
- [space.4](https://system.djasha.me/tokens#space.4): `1rem` — Default body-copy spacing.
- [space.8](https://system.djasha.me/tokens#space.8): `2rem` — Section-gap spacing.

## API

- [Manifest](https://system.djasha.me/api/index.json): All entries (components, references, skills, tokens, voice, directions, patterns).
- [Per-component](https://system.djasha.me/api/components/<slug>.json): Full component record + resolved tokens + source.
- [Per-reference](https://system.djasha.me/api/references/<slug>.json): Full reference record + attribution chain.
- [Per-skill](https://system.djasha.me/api/skills/<slug>.json): Skill prompt + example + design-system requirements.
- [Bundles](https://system.djasha.me/bundles/<slug>.md): Markdown bundle ready to paste into any AI agent.
- [MCP server](https://system.djasha.me/mcp): Model Context Protocol endpoint.
- [OpenAPI 3.1 spec](https://system.djasha.me/openapi.json)
- [Search index (Fuse.js)](https://system.djasha.me/search-index.json)

## Optional

- [Voice: CTAs](https://system.djasha.me/voice#ctas): Calls to action — the primary verbs that move users forward.
- [Voice: Empty states](https://system.djasha.me/voice#empty-states): What to say when there's nothing to show — the moment a user wonders if it's broken.
- [Voice: Error messages](https://system.djasha.me/voice#error-messages): How to acknowledge a failure, explain what happened, and offer a path forward.
- [Voice: Headlines](https://system.djasha.me/voice#headlines): How to write headings that carry weight without shouting.
- [Voice: Microcopy](https://system.djasha.me/voice#microcopy): Button labels, link text, form hints — the words you hardly notice.
- [Voice: Onboarding copy](https://system.djasha.me/voice#onboarding-copy): The first words a user reads — welcome, setup, and the path to first value.