Effect is a powerful TypeScript library designed to help developers easily create complex, synchronous, and asynchronous programs.
Design Analysis
Design developer-tool pages that feel credible on both the marketing and documentation sides. The dark hero should feel polished and ambitious, while the docs shell should flip into a highly usable light product without...
Design developer-tool pages that feel credible on both the marketing and documentation sides. The dark hero should feel polished and ambitious, while the docs shell should flip into a highly usable light product without breaking the overall identity.
Use dark media frames, blue-highlighted text, and code surfaces as the main visual language. Product artifacts should look like tools: video windows, editors, playground panes, and clean docs cards. Keep decorative imagery secondary to the utility story.
Use near-black and charcoal for the hero shell, then switch to cloud-gray and white inside the docs environment. Keep blue as the throughline across both modes, with indigo as a supporting brand note.
Use a softer geometric display face for major claims and a neutral sans everywhere else. Mono should sit exactly where code and developer affordances appear, not as a general branding voice.
Core identity and authoring metadata from the refto.one design model.
A developer-library system balancing midnight hero contrast, cobalt highlights, and documentation-grade light surfaces.
developer-focused, polished, and dual-shell with dark launch energy and light product utility
Fields outside the primary renderer remain visible here as structured fallback content.
Primitive palettes and resolved token colors for the active preview mode.
Spacing scales rendered as tokens with a simple length specimen.
Corner radii tokens with a live surface sample.
Font families from the current design YAML, including fallback stacks and usage character.
Top-level typography scale rendered as live text specimens.
Fields outside the primary renderer remain visible here as structured fallback content.
Motion tokens rendered as resolved values for timing and personality.
Resolved motion token values.
| Property | Value |
|---|---|
duration | 160ms-240ms |
easing | cubic-bezier(.2,.8,.2,1) |
spring | stiffness 115, damping 20 |
Low-complexity component tokens rendered as design-system specimens.
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Compact list of patterns the design system explicitly avoids.