Nonlinear Programming Methods

    vasilenka-invoker

    1.0.15 • Public • Published

    Invoker

    Craft you page, faster! 🚀

    alt text

    license

    Table of Contents

    1. Colors
    2. Typography
    3. Space

    Install

    NPM

    npm install --save vasilenka-invoker

    Primitives

    The basic building blocks for every components and pages we created.

    Colors

    A11y first

    Semua produk yang kita buat harus memenuhi tingkat kontras WCAG AA. Kontras yang rendah akan menyulitkan orang yang memiliki daya penglihatan yang rendah, buta warna, atau ketika penggunaan dalam situasi yang tidak optimal (e.g. outdoor ketika matahari sangat cerah).

    Semua palet warna di bawah ini memiliki label rasio kontras warna yang sudah diuji dengan warna putih. Untuk penggunaan pada warna selain putih, kamu dapat melakukan validasi sendiri dengan menggunakan tools berikut:

    1. https://colorable.jxnblk.com
    2. https://contrastchecker.com
    3. http://accessible-colors.com
    4. https://usecontrast.com - macOS desktop app

    Tingkat kontras minimum yang dibutuhkan bergantung pada text-size dan text-weight. Text yang berukuran besar (large scale text) dan bold akan lebih mudah untuk dibaca, sedangkan text yang berukuran kecil dan regular membutuhkan level kontras yang lebih tinggi untuk lebih mudah dibaca.

    Untuk memastikan produk yang kita buat memenuhi a11y, gunakan rasio kontras WCAG AA (>= 4.5) untuk small text dan WCAG AA Large (>=3.00) untuk large text.

    AA Large — Legible untuk large text, yaitu text size >= 18pt untuk text style regular atau text size >= 14pt untuk style bold. Based on WCAG 2.0: https://www.w3.org/TR/WCAG20/#larger-scaledef

    How to read color palette ?

    alt-text alt-text

    Brand Colors

    Primary Colors - Jeans

    Primary link and actions

    $brand-primary-100 // Default for large text 
    $brand-primary-200 // Default for small text 
    $brand-primary-300 // Hover and tap 

    alt-text alt-text alt-text

    Secondary Colors - Scarlet

    Primary actions

    $brand-secondary-100  // Default for large text 
    $brand-secondary-200  // Default for small text 
    $brand-secondary-300  // Hover and tap 

    alt-text alt-text alt-text

    Dark Colors

    Text colors

    Semua dark colors sudah diuji dengan background putih #FFFFFF serta dan memenuhi standar contrast ratio WCAG AA. Untuk penggunaan dengan background selain warna putih silahkan lakukan pengujian lagi.

    $dark-hex-70 // Heading
    $dark-hex-60 // Heading and Body text in text-heavy page such as blog post
    $dark-hex-50 // Body text
    $dark-hex-40 // Caption and subtitle
     
    // Alternaive colors using alpha value.
    // Preferable!
    $dark-alpha-70
    $dark-alpha-60
    $dark-alpha-50
    $dark-alpha-40
     

    alt-text alt-text alt-text alt-text

    System Colors

    Danger - Rose

    $sys-danger-100 // Use for Danger Background or Large text 
    $sys-danger-200 // Default for small text 
    $sys-danger-300 // Hover, active, focus and tap 

    alt-text alt-text alt-text

    Warning - Amber

    Only use these palettes as background color and use at least $dark-60 as text for the warning.

    $sys-warning-100 
    $sys-warning-200 
    $sys-warning-300 

    alt-text alt-text alt-text

    Success - Verdant

    $sys-success-100 // Use for success background 
    $sys-success-200 // Default for small text 
    $sys-success-300 // Hover, active, focus and tap 

    alt-text alt-text alt-text

    Background

    Use these colors for background only.

    Semua background color sudah diuji dan memenuhi standar contrast WCAG AA untuk penggunaan pada warna teks $dark-50, $dark-60, dan $dark-70. Untuk penggunaan dengan teks $dark-40, dapat mengacu pada contrast ratio pada gambar masing-masing warna.

    Dust

    $bg-dust-100 
    $bg-dust-200 
    $bg-dust-300 

    alt-text alt-text alt-text

    Rose

    $bg-rose-100 
    $bg-rose-200 
    $bg-rose-300 

    alt-text alt-text alt-text

    Scarlet

    $bg-scarlet-100 
    $bg-scarlet-200 
    $bg-scarlet-300 

    alt-text alt-text alt-text

    Sea

    $bg-sea-100 
    $bg-sea-200 
    $bg-sea-300 

    alt-text alt-text alt-text

    Plump

    $bg-plump-100 
    $bg-plump-200 
    $bg-plump-300 

    alt-text alt-text alt-text

    Sage

    $bg-sage-100 
    $bg-sage-200 
    $bg-sage-300 

    alt-text alt-text alt-text

    Sky

    $bg-sky-100 
    $bg-sky-200 
    $bg-sky-300 

    alt-text alt-text alt-text

    Verdant

    $bg-verdant-100 
    $bg-verdant-200 
    $bg-verdant-300 

    alt-text alt-text alt-text

    Banana

    $bg-banana-100 
    $bg-banana-200 
    $bg-banana-300 

    alt-text alt-text alt-text

    Sand

    $bg-sand-100 
    $bg-sand-200 
    $bg-sand-300 

    alt-text alt-text alt-text

    Space

    Spacing tokens are used for padding, margins, and position coordinates. Semua nilai spacing dihitung berdasarkan 16px sebagai basis.

    Space Step

    alt-text

    Space Inset

    alt-text

    Space Inline

    alt-text

    Space Stack

    alt-text

    Space Squish

    alt-text

    Space Stretch

    alt-text

    Typography

    Text is one of the main way we can deliver the information to the user. Keeping consist and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.

    Here's a list of type scale and it's property that we used across the brand.

    alt-text

    Install

    npm i vasilenka-invoker

    DownloadsWeekly Downloads

    17

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    788 kB

    Total Files

    94

    Last publish

    Collaborators

    • bhmantan