Elcano Design System

File Upload Dropzone

Reference pattern from Lens and MOC with drag states, browse affordance, and file list.

Number Input Stepper

Explorer pattern: compact + and - controls, centered value, and focus-within ring on wrapper.

Themed Date Picker

Explorer treatment for date inputs and calendar popover theme (Flatpickr-compatible classes).

Accordion (Home Pattern)

Use for grouped navigation or secondary tool catalogs. Plus/minus indicator shows disclosure state.

Custom File Radio Select (Lens)

Use for selecting one uploaded file before running a task.

• q1_publishers.csv
• q2_streaming.csv
• q3_archive.csv (archived)

Common Checkbox

Use this checkbox style for toggles and optional settings across all products.

Email Selection Pills (MOC)

Use this pill selector pattern for choosing one or more notification recipients in task forms.

Click a pill to select/deselect. Click the `x` to remove a custom email.

Code Display (MOC Logs)

Use this tool-call code presentation in log timelines when showing `run_python` or comparable code execution payloads.

import statistics

# Latency samples in milliseconds
samples = [123.4, 128.1, 120.9, 131.7]
average = statistics.mean(samples)
print(f"Mean latency: {average:.2f} ms")

Task Tracker (MOC Logs)

Use this when rendering `task_tracker` tool calls so planning/progress state remains consistent across products.