Edit Page

Overview

Design is a foundational part of Cardstack and how we see the web.

Design domains

Cardstack projects come in many sizes, shapes, and colors! However, the ecosystem itself is made to support some specific design goals:

  1. Card variance - Much like how you might pick a playing card up off a table and hold it closer to see more details, Cards have both a detailed (isolated) and summary (embedded) view. Tying these viewing modes together visually helps new users navigate an app.
  2. Card motion - Animation is an important communication channel. Cards can have motion, such as when you move from a summary to a detailed view, or submit a Card to someone else for review.
  3. Four edges - Data belongs to a Card. Wherever the Card is rendered, it comes with its data and its own information hierarchy. It also comes with tools that help edit the content.
  4. Theming - Cards are extensible. A well-written and designed Card can be dropped into any new environment and still do its job well.

Cards at rest and in motion

Cards have two modes:

A card can be at rest — as something that records some truth, which you can collect, like an article.

A card can be in motion — when you’re submitting an article for a competition, requesting someone to invite you to his organization, or signing a transaction, for example.

The idea of messages and forms, requests and approvals, is a very interesting aspect of cards. Because cards are composed from the bottom up, they can exist in what looks like a website; you double-click on the card and it opens up. But they can also get attached like files in email streams. Let’s say you create a job application form. You can go back and forth via messaging as long as you want, to get the form right; and all that time, you’re actually version-controlling it. This idea that cards can participate in an organizational workflow is extremely important.