-
Notifications
You must be signed in to change notification settings - Fork 10
Design
We bring coherent design to ResearchEquals, such that it feels like a whole even though the functionality may span different areas of research. This means that we use simple base designs that are extensible.
Our design philosophy is grounded in emotions. The base design evokes calm, reliability, and familiarity. Our base design is monochromatic and mimics analog/paper elements. This also helps make things printable.
The vibrancy, energy, and curiosity is brought by people, not by the designs themselves. Colors are for actions that have consequence - more vibrant colors have more consequence. As a result, the design lives - as more people utilize the platform, the more vibrant the platform becomes (and vice versa). We call this momentum design.
Our designs show, they don't tell. This is both in how each element must have a benefit, as well as that direct feedback supports that they evoke emotion and benefit. If we have to choose, we design for accessibility over aesthetics.
- We use the open source design tool Penpot.app
- We only use modals where utterly necessary (e.g., confirmation boxes)
- Every action lives on its own route
- We design for efficiency - to reduce load times, cost to run, and energy usage
- We do not load additional fonts
- Our base color palette is based on Tailwind (remember the monochromatic base colors? Based off of 50, 200, and 950 for lightmode or 950, 800, and 50 for darkmode).
- Icons
- Components
Warning
This following is deprecated and may be removed soon. It is only kept for as long as is needed.
| Category | Element | Currently | Should be |
|---|---|---|---|
| Modals | “Start collecting today” | z-999 (not working) | z-40 |
| Modals | “Confirm publication” | z-10 — too low? | z-40 |
| Modals | Detached search algolia | z-index: 999x (set in CSS) | |
| Slide out | Quick draft | z-10 | z-30 |
| Slide out | Author order | (none set) | z-30 |
| Slide out | Previous & Next module | (none set) | z-30 |
| Profile edit modal | settings.tsx - | z-10 | z-20 |
| Banners | “Looking for Collections?” | z-50 —it's too high | z-10 |
| Navbar & navbar dropdown | Navbar | z-50 —may be too high | z-10 |
| General content | Other content | 0 | 0 |