Amino

Strateos Design System

Welcome to the Amino Design System

Amino is an effort to align the many interfaces of Transcriptic behind a single set of standards and principles. This guide serves as both the single source of truth for design decisions, as well as a learning tool so you can build quickly with less review.

Designing

If you're designing new UI view or components, first, familiarize yourself with the resources provided here. These resources are also provided in the form of a UI Kit Sketch File, which you can use to rapidly prototype designs without writing code.

Download the UI Kit

Developing

If you're a developer building out new components or views, or just modifying existing ones, make sure you've put in the proper design work first. Use the resources here to mock out your work, and if you aren't fully certain, run it by a designer before writing code.

The assets in this guide are considered base assets. These are core components and styles that apply to any Transcriptic UI - regardless of context. Base components are found in amino/components and base style settings are found in amino/styling.

The Principles

The Transcriptic Design System is built upon four key principles. These principles inform the structure of the System as a whole, as well as each individual piece itself. Keep these principles in mind while you're using Amino.

Unity

Across Experiences

All Transcriptic UIs should feel unified. Even though each of our many tools accomplish very different tasks, users should be able to move between them with familiarity. When we develop new tools for these users, they should be familiar and useable straight away - thanks to a unified UI/UX system.

Independence

Through Structure

Each piece of Amino performs on its own. This is a UX and engineering ideal. For UX, design guidelines allow components to be endlessly arranged and composed. For engineering, components are usable right away in any React codebase, with no external dependencies.

Autonomy

For Faster Development

The composability and structure of Amino lets developers work autonomously, with minimal design input. Rules and guidelines are enforced with thorough documentation, development tools like linters, and utilities that abstract away design decisions.

Focus

On A Core Audience

We do software and biology, and Amino is made by software developers and biologists, for software developers and biologists. Life Science is an assumed context when it comes to the needs and intents of our users - and as a result the components and layouts defined here build from that assumption.