Chandra AsriOpen docs

Chandra Asri · Brand Guidelines

One brand,drawn to spec.

Colors, type and components for every Chandra Asri surface, each one specified down to the pixel and shipped as code you can copy.

Read the docsBrowse components
Explore the guidelines
Fig. 1 — Button, rounded · exploded view
Chandra Asri

Project

Chandra Asri Brand Guidelines

Sheet
01 / 04
Rev
v0.1
Scale
1 : 1

Materials

  • Logo blueprimary-70
  • Logo navynavy-70
  • Logo cyancyan-70
components
26
steps / color
13
logo colors
3

What's inside

Everything aChandra Asri screenneeds, in four kits.

Every item is a docs page with a live preview and the real source code beside it. Nothing here is a screenshot.

copy, paste, ship

01start here
Aa

h1 · 48 / 60

h3 · 32 / 44

b2 · 16 / 28

4px6px8pxfull

Style Guide

The logo blue, navy and cyan scales, neutrals and status colors, gradients, type scale, radius, shadows, breakpoints and motion.

  • Colors
  • Gradients
  • Typography
  • Radius & Shadows
  • Layout & Breakpoints
  • Animation

pages6

02
PrimaryOutlineRounded
Email address
Select a business unit
✓CheckboxSwitch

Base Components

Buttons, inputs, selects and every form primitive, with states and variants already decided.

  • Button
  • Badge
  • Input
  • Textarea
  • Select
  • Checkbox
  • Radio Group
  • Switch
  • Label
  • Form
  • Field
  • Input Group
  • Container

pages13

03
DocumentsExport
DocumentStatus
Q3 reportActive
Vendor listReview
Site auditDraft

Archive 3 documents?

They stay searchable for 90 days.

CancelArchiveShortcut ⌘↵
Changes saved

Overlays & Display

Cards, date pickers, dialogs, sheets, popovers, tables and feedback.

  • Card
  • Date Picker
  • Dialog
  • Sheet
  • Popover
  • Tooltip
  • Command
  • Avatar
  • Skeleton
  • Separator
  • Table
  • Callout
  • Scroll Area

pages13

04for devs
~/my-app

$ npx chandra-asri-ui add theme base-button

✓ styles/chandra-asri-theme.css

✓ app/components/ui/button.tsx

✓ lib/utils.ts

+ clsx tailwind-merge class-variance-authority

Done. Import the theme in globals.css

Setup & Utilities

Install the tokens and components with one command, then lean on the shared hooks and layout grid.

  • Installation
  • Architecture
  • Global Theme
  • Hooks
  • Custom Layout Grid Configurations

pages5

Tokens

Logo blue,by the numbers.

Thirteen steps from 10 to 130. Step 70 is the blue from the Chandra Asri logo; navy and cyan, the logo's other two colors, get the same 13-step treatment in the docs.

click a strip to copy ↓

All color scales

Workflow

From brief toon-brand screen.

The same four steps whether it's a new landing page or one more form on an internal tool.

note —

Missing a pattern?

If a screen needs something the kits don't cover yet, build it from the tokens first, then propose it for the guideline so the next team gets it for free.

Open the docs
  1. 01
    Step 01

    Read the tokens

    Start at Global Theme and the Style Guide: colors, type and spacing every component is built on.

    You getA theme you can import

  2. 02
    Step 02

    Pick the parts

    Find the component that fits. ⌘K searches every page.

    You getA short list of components

  3. 03
    Step 03

    Copy the source

    Switch the preview to Source and copy, or add it with the chandra-asri-ui CLI.

    You getEditable files in your repo

  4. 04
    Step 04

    Ship it

    Compose, fill with real content, release. Tokens keep it consistent with every other Chandra Asri surface.

    You getA screen that looks like Chandra Asri