UI Library

Conjunction of design patterns, components and resources used across our products.

Design

CSS Variables

VariableValue
var(--main-color)#06c
var(--text-color)rgba(0,0,0,.86)
var(--border-radius)8px
var(--link-color)#008EFF
var(--bg-gray-light-1)#F5F4F9
var(--bg-gray-light-2)#f6f6f6
var(--bg-gray-light-3)#F5F9FA
var(--box-shadow)0 20px 60px -10px rgba(0,0,0,.2)
var(--color-primary)#00B8F4
var(--color-accept)#7ED321
var(--color-reject)#EB5424
var(--color-transcription)#FF866E
var(--color-ocr-transcription)#38E8BA
var(--color-categorization)#FF9BEE
var(--color-data-collection)#4A7AFA
var(--color-comparison)#DA57C8
var(--color-image-recognition)#F9B25F
var(--font-family)"HarmoniaSans W01", -apple-system, Arial, Sans-Serif
var(--font-family-code)Menlo, Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif

List of color-adjuster

  • [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] )
  • [red( | green( | blue( | alpha( | a(] '*' <percentage> )
  • [hue( | h(] ['+' | '-' | '*']? <angle> )
  • [saturation( | s(] ['+' | '-' | '*']? <percentage> )
  • [lightness( | l(] ['+' | '-' | '*']? <percentage> )
  • [whiteness( | w(] ['+' | '-' | '*']? <percentage> )
  • [blackness( | b(] ['+' | '-' | '*']? <percentage> )
  • tint( <percentage> )
  • shade( <percentage> )
  • blend( <color> <percentage> [rgb | hsl | hwb]? )
  • contrast( <percentage>? )
.whatever {
  color: color(red a(10%));
  background-color: color(red lightness(50%)); /* == color(red l(50%)); */
  border-color: color(hsla(125, 50%, 50%, .4) saturation(+ 10%) w(- 20%));
}

Background

var(--bg-gray-light-1)
#F5F4F9
var(--bg-gray-light-2)
#f6f6f6
var(--bg-gray-light-3)
#F5F9FA

Components

Pagination

import {PageLink, Pagination} from 'react-scale/components/global/Pagination';
<div>
  <Pagination>
    <PageLink>
      First
    </PageLink>
    <PageLink>
      1
    </PageLink>
    <PageLink>
      2
    </PageLink>
    <PageLink active>
      3
    </PageLink>
    <PageLink>
      4
    </PageLink>
    <PageLink>
      5
    </PageLink>
    <PageLink>
      Last
    </PageLink>
  </Pagination>
</div>
Props
NameTypeDefaultDescription

Tags

import Tags from 'react-scale/components/global/Tag';
Something
Something
Something
Something
Something
Something
Something
Something
Something
Something
<div className="jsx-3498019187">
  <div className="jsx-3498019187">
    <Tag
      border
      center={false}
      color={1}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={2}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={3}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={4}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={5}
      type="warning"
    >
      Something
    </Tag>
  </div>
  <div className="jsx-3498019187">
    <Tag
      border
      center={false}
      color={6}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={7}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={8}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={9}
      type="warning"
    >
      Something
    </Tag>
    <Tag
      border
      center={false}
      color={10}
      type="warning"
    >
      Something
    </Tag>
  </div>
  <JSXStyle
    css={[
      'div.jsx-3498019187{margin-bottom:20px;}'
    ]}
    styleId="3498019187"
  />
</div>
Props
NameTypeDefaultDescription
type arraywarning
border arraytrue
center arrayundefined

Product Pills

import Product Pills from 'react-scale/components/global/ProductPill';
Categorization
imageannotation
OCR transcription
Comparison
Data collection
Audio transcription
<div>
  <div>
    <Pill type="categorization" />
  </div>
  <div>
    <Pill type="imageannotation" />
  </div>
  <div>
    <Pill type="transcription" />
  </div>
  <div>
    <Pill type="comparison" />
  </div>
  <div>
    <Pill type="datacollection" />
  </div>
  <div>
    <Pill type="audiotranscription" />
  </div>
</div>
Props
NameTypeDefaultDescription

Alert

import Alert from 'react-scale/components/global/alert';
Alert: Warning
Warning: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert
  border
  center={false}
  type="warning"
>
  <strong>
    Warning:
  </strong>
   The important thing is not to stop questioning. Curiosity has its own reason for existing.
</Alert>
Alert: Info
Info: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert
  border
  center={false}
  type="info"
>
  <strong>
    Info:
  </strong>
   The important thing is not to stop questioning. Curiosity has its own reason for existing.
</Alert>
Alert: Success
Success: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert
  border
  center={false}
  type="success"
>
  <strong>
    Success:
  </strong>
   The important thing is not to stop questioning. Curiosity has its own reason for existing.
</Alert>
Alert: Danger
Danger: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert
  border
  center={false}
  type="danger"
>
  <strong>
    Danger:
  </strong>
   The important thing is not to stop questioning. Curiosity has its own reason for existing.
</Alert>
Alert: No border
Warning: The important thing is not to stop questioning. Curiosity has its own reason for existing.
<Alert
  border={false}
  center={false}
  type="warning"
>
  <strong>
    Warning:
  </strong>
   The important thing is not to stop questioning. Curiosity has its own reason for existing.
</Alert>
Props
NameTypeDefaultDescription
type arraywarning
border arraytrue
center arrayundefined

Buttons

import Buttons from 'react-scale/components/global/button';

Types

Button Default
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="default"
>
  Button
</Button>
Button Disabled
<Button
  arrows={false}
  block={false}
  disabled
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="default"
>
  Button
</Button>
Button Primary: Provides extra visual weight and identifies the primary action in a set of buttons.
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="primary"
>
  Button
</Button>
Button Success: Indicates a successful or positive action that advances the user to a next phase or module.
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="success"
>
  Button
</Button>
Button Success (Remotasks): Indicates a successful or positive action that advances the user to a next phase or module.
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="successAlt"
>
  Button
</Button>
Button Danger: Indicates a dangerous or potentially negative action.
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="danger"
>
  Button
</Button>
Button Link: Deemphasize a button by making it look like a link while maintaining button behavior.
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  href="https://scaleapi.com"
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="link"
>
  Go to Scale
</Button>
Button Icon
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  icon={<svg style={{display: 'block', fill: 'white', width: 10}} version="1.1" viewBox="0 0 78 78"><path d="M69.15 30.48H47.52V8.85a8.52 8.52 0 0 0-17.04 0v21.63H8.85a8.52 8.52 0 0 0 0 17.04h21.63v21.64a8.52 8.52 0 0 0 17.04 0V47.52h21.63a8.52 8.52 0 1 0 0-17.04z" /></svg>}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="primary"
>
  Go to Scale
</Button>

Dropdowns

Button Dropdown
<Button
  arrows={false}
  block={false}
  disabled={false}
  dropdownContent={<DropdownContent />}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="dropdown"
>
   Send Feedback
</Button>

Sizes

Button Small
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="sm"
  textTransform="uppercase"
  tooltip={null}
  type="default"
>
  Button
</Button>
Button Medium
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="md"
  textTransform="uppercase"
  tooltip={null}
  type="default"
>
  Button
</Button>
Button Large (default)
<Button
  arrows={false}
  block={false}
  disabled={false}
  green={false}
  size="lg"
  textTransform="uppercase"
  tooltip={null}
  type="default"
>
  Button
</Button>
Props
NameTypeDefaultDescription
type arraydefaultdefault, primary, success, link, dropdown
size arraymdsm, md, lg.
arrows arrayundefined
block arrayundefined
disabled arrayundefined
style arrayundefined
tooltip arrayundefined

Button Group

import {ButtonGroup, Button} from 'react-scale/components/global/Pagination';
<ButtonGroup size="sm">
  <ButtonGroupItem active>
    Cristiano Ronaldo
  </ButtonGroupItem>
  <ButtonGroupItem>
    Lionel Messi
  </ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="md">
  <ButtonGroupItem active>
    Cristiano Ronaldo
  </ButtonGroupItem>
  <ButtonGroupItem>
    Lionel Messi
  </ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="lg">
  <ButtonGroupItem active>
    Cristiano Ronaldo
  </ButtonGroupItem>
  <ButtonGroupItem>
    Lionel Messi
  </ButtonGroupItem>
</ButtonGroup>
<ButtonGroup size="md">
  <ButtonGroupItem active>
    1
  </ButtonGroupItem>
  <ButtonGroupItem>
    2
  </ButtonGroupItem>
  <ButtonGroupItem>
    3
  </ButtonGroupItem>
  <ButtonGroupItem>
    4
  </ButtonGroupItem>
  <ButtonGroupItem>
    5
  </ButtonGroupItem>
</ButtonGroup>
Props
NameTypeDefaultDescription

Product Icons

import {IconCategorization, IconComparison, IconOCRTranscription, IconAudioTranscription, IconDataCollection, IconImageAnnotation} from 'react-scale/components/icons/product-icons/index';
Categorization Icon
<No Display Name width="80" />
Data Collection Icon
<No Display Name width="80" />
Image Recognition Icon
<No Display Name width="80" />
Comparison Icon
<No Display Name width="80" />
Transcription Icon
<No Display Name width="80" />
Categorization Icon
<No Display Name width="80" />

Spinner

import Spinner from 'react-scale/components/global/spinner';
Small
<Spinner size="sm" />
Medium
<Spinner size="md" />
Large
<Spinner size="lg" />
Small
<Spinner size="sm" />
Medium
<Spinner size="md" />
Large
<Spinner size="lg" />
Props
NameTypeDefaultDescription
size arraysmsm, md or lg.

Table

import {Table, Thead, Tr, Th, Tbody, Td} from 'react-scale/components/global/Table';
Table
Donut NamePriceActions
Raised Glazed$0.5Buy Now!
Raised Chocolate$0.5Buy Now!
Chocolate Cake with Sprinkles$0.5Buy Now!
Raised Maple$0.5Buy Now!
Raised Sugar$0.5Buy Now!
<Table>
  <Thead>
    <Tr>
      <Th>
        Donut Name
      </Th>
      <Th>
        Price
      </Th>
      <Th>
        Actions
      </Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>
        Raised Glazed
      </Td>
      <Td>
        $0.5
      </Td>
      <Td>
        <a href="http://www.bobsdonutssf.com/menu/">
          Buy Now!
        </a>
      </Td>
    </Tr>
    <Tr>
      <Td>
        Raised Chocolate
      </Td>
      <Td>
        $0.5
      </Td>
      <Td>
        <a href="http://www.bobsdonutssf.com/menu/">
          Buy Now!
        </a>
      </Td>
    </Tr>
    <Tr>
      <Td>
        Chocolate Cake with Sprinkles
      </Td>
      <Td>
        $0.5
      </Td>
      <Td>
        <a href="http://www.bobsdonutssf.com/menu/">
          Buy Now!
        </a>
      </Td>
    </Tr>
    <Tr>
      <Td>
        Raised Maple
      </Td>
      <Td>
        $0.5
      </Td>
      <Td>
        <a href="http://www.bobsdonutssf.com/menu/">
          Buy Now!
        </a>
      </Td>
    </Tr>
    <Tr>
      <Td>
        Raised Sugar
      </Td>
      <Td>
        $0.5
      </Td>
      <Td>
        <a href="http://www.bobsdonutssf.com/menu/">
          Buy Now!
        </a>
      </Td>
    </Tr>
  </Tbody>
</Table>

Modal

import Modal from 'react-scale/components/global/modal';

This component is extending react-modal.

Modal
<div>
  <Modal
    contentLabel="Example Modal"
    onRequestClose={function noRefCheck() {}}
  >
    <ModalHeader onRequestClose={function noRefCheck() {}}>
      Example Modal
    </ModalHeader>
    <ModalBody>
      <p>
        Donec id elit non mi porta gravida at eget metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
      </p>
      <p>
         Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </p>
    </ModalBody>
    <ModalFooter>
      <Button
        arrows={false}
        block={false}
        disabled={false}
        green={false}
        primary
        size="md"
        textTransform="uppercase"
        tooltip={null}
        type="button"
      >
        Action
      </Button>
    </ModalFooter>
  </Modal>
  <Button
    arrows={false}
    block={false}
    disabled={false}
    green={false}
    onClick={function noRefCheck() {}}
    primary
    size="md"
    textTransform="uppercase"
    tooltip={null}
    type="button"
  >
    Open Modal
  </Button>
</div>

Logos

import Logos from 'react-scale/components/global/Logo';
Logo: BlackDownload
<div className="jsx-3651467050 logo">
  <SvgComponent
    style={{
      width: '120px'
    }}
   />
</div>
Logo: WhiteDownload
<div className="jsx-3651467050 logo">
  <SvgComponent
    style={{
      fill: 'white',
      width: '120px'
    }}
   />
</div>

Forms

import {Form, Label, InputText, Button, InputCheckbox, InputRadio, Select, Textarea} from 'react-scale/components/global/Forms';
Form: Horizontal

<Form mode="horizontal">
  <Label align="right">
    Name
  </Label>
  <InputText
    onBlur={function noRefCheck() {}}
    onChange={function noRefCheck() {}}
    onKeyDown={function noRefCheck() {}}
    placeholder="Your Name"
    size="md"
    type="text"
  />
  <Label align="right">
    Last Name
  </Label>
  <InputText
    onBlur={function noRefCheck() {}}
    onChange={function noRefCheck() {}}
    onKeyDown={function noRefCheck() {}}
    placeholder="Your Last Name"
    size="md"
    type="text"
  />
  <Label align="right">
    Address
  </Label>
  <div className="jsx-191293344 address">
    <InputText
      onBlur={function noRefCheck() {}}
      onChange={function noRefCheck() {}}
      onKeyDown={function noRefCheck() {}}
      placeholder="Your Address"
      size="md"
      type="text"
    />
    <InputText
      onBlur={function noRefCheck() {}}
      onChange={function noRefCheck() {}}
      onKeyDown={function noRefCheck() {}}
      placeholder="Zip Code"
      size="md"
      type="text"
    />
  </div>
  <Label align="right">
    Country
  </Label>
  <div className="jsx-191293344">
    <Select>
      <option className="jsx-191293344">
        United States
      </option>
    </Select>
  </div>
  <Label align="right">
    Do you own a car?
  </Label>
  <div className="jsx-191293344">
    <div className="jsx-191293344">
      <label className="jsx-191293344">
        <InputRadio name="own-car" />
         Yes 
      </label>
    </div>
    <label className="jsx-191293344">
      <InputRadio name="own-car" />
       No 
    </label>
  </div>
  <Label align="right">
    Colors
  </Label>
  <div className="jsx-191293344">
    <div className="jsx-191293344">
      <label className="jsx-191293344">
        <InputCheckbox checked />
         Red 
      </label>
    </div>
    <div className="jsx-191293344">
      <label className="jsx-191293344">
        <InputCheckbox />
         Blue 
      </label>
    </div>
  </div>
  <Label align="right">
    Textarea
  </Label>
  <div
    className="jsx-191293344"
    style={{
      height: 120
    }}
  >
    <Textarea placeholder="Your content goes here" />
  </div>
  <div className="jsx-191293344" />
  <p className="jsx-191293344">
    <Button
      arrows={false}
      block={false}
      disabled={false}
      green={false}
      primary
      size="md"
      textTransform="uppercase"
      tooltip={null}
      type="button"
    >
      Save
    </Button>
  </p>
  <JSXStyle
    css={[
      '.address.jsx-191293344{grid-template-columns:66% 28%;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}'
    ]}
    styleId="191293344"
  />
</Form>
Form: Vertical

<Form mode="vertical">
  <div className="jsx-191293344">
    <Label align="left">
      Name
    </Label>
    <InputText
      onBlur={function noRefCheck() {}}
      onChange={function noRefCheck() {}}
      onKeyDown={function noRefCheck() {}}
      placeholder="Your Name"
      size="md"
      type="text"
    />
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      Last Name
    </Label>
    <InputText
      onBlur={function noRefCheck() {}}
      onChange={function noRefCheck() {}}
      onKeyDown={function noRefCheck() {}}
      placeholder="Your Last Name"
      size="md"
      type="text"
    />
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      Address
    </Label>
    <div className="jsx-191293344 address">
      <InputText
        onBlur={function noRefCheck() {}}
        onChange={function noRefCheck() {}}
        onKeyDown={function noRefCheck() {}}
        placeholder="Your Address"
        size="md"
        type="text"
      />
      <InputText
        onBlur={function noRefCheck() {}}
        onChange={function noRefCheck() {}}
        onKeyDown={function noRefCheck() {}}
        placeholder="Zip Code"
        size="md"
        type="text"
      />
    </div>
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      Country
    </Label>
    <Select>
      <option className="jsx-191293344">
        United States
      </option>
    </Select>
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      Do you own a car?
    </Label>
    <div className="jsx-191293344">
      <div className="jsx-191293344">
        <Label align="left">
          <InputRadio name="own-car" />
           Yes 
        </Label>
      </div>
      <Label align="left">
        <InputRadio name="own-car" />
         No 
      </Label>
    </div>
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      React fan?
    </Label>
    <div className="jsx-191293344">
      <div className="jsx-191293344">
        <Label align="left">
          <InputCheckbox />
           Yes 
        </Label>
      </div>
      <div className="jsx-191293344">
        <Label align="left">
          <InputCheckbox />
           No 
        </Label>
      </div>
    </div>
  </div>
  <div className="jsx-191293344">
    <Label align="left">
      Textarea
    </Label>
    <div
      className="jsx-191293344"
      style={{
        height: 120
      }}
    >
      <Textarea placeholder="Your content goes here" />
    </div>
  </div>
  <p className="jsx-191293344">
    <Button
      arrows={false}
      block={false}
      disabled={false}
      green={false}
      primary
      size="md"
      textTransform="uppercase"
      tooltip={null}
      type="button"
    >
      Save
    </Button>
  </p>
  <JSXStyle
    css={[
      '.address.jsx-191293344{grid-template-columns:66% 28%;display:grid;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}'
    ]}
    styleId="191293344"
  />
</Form>
Props
NameTypeDefaultDescription
mode arrayhorizontal

Banner

BannerDownload

Tabs

import {Tabs, Tab} from 'react-scale/components/global/Logo';
Buy it, use it, break it, fix it,
Trash it, change it, mail, upgrade it,
Charge it, point it, zoom it, press it,
Snap it, work it, quick, erase it,
Write it, cut it, paste it, save it,
Load it, check it, quick, rewrite it,
<Tabs tabColor="#247EFF">
  <Tab label="Pentatonix">
    <div className="jsx-3651467050">
      Buy it, use it, break it, fix it,
      <br className="jsx-3651467050" />
      Trash it, change it, mail, upgrade it,
      <br className="jsx-3651467050" />
      Charge it, point it, zoom it, press it,
      <br className="jsx-3651467050" />
      Snap it, work it, quick, erase it,
      <br className="jsx-3651467050" />
      Write it, cut it, paste it, save it,
      <br className="jsx-3651467050" />
      Load it, check it, quick, rewrite it,
      <br className="jsx-3651467050" />
    </div>
  </Tab>
  <Tab label="Digital Love">
    <div className="jsx-3651467050">
      In this dream I'm dancing right beside you
      <br className="jsx-3651467050" />
      And it looked like everyone was having fun
      <br className="jsx-3651467050" />
      The kind of feeling I've waited so long
      <br className="jsx-3651467050" />
      Don't stop, come a little closer
      <br className="jsx-3651467050" />
      And it looked like everyone was having fun
      <br className="jsx-3651467050" />
    </div>
  </Tab>
</Tabs>

Tooltip

import Tooltip from 'react-scale/components/global/Tooltip';

This component is extending react-tooltip.

<a href="http://www.rosamundesausagegrill.com/">
  <Tag tooltip="You are about to leave the page">
    Rosamunde Sausage Grill
  </Tag>
</a>