Skip to content
by Bhargav Tibadiya
Browse catalog
Bhargav Tibadiya

Ink

DarkSerifEditorial

Dark editorial night-paper UI. Dual serifs (Libre Baskerville + Crimson Pro), desaturated slate-blue accent, moderate 6px radius.

← Back to catalog
Design systemInstructions
Foundation — Typography

This system uses the following font families. Every sample below is rendered live — not a screenshot.

display
Libre Baskerville

Headings, buttons, labels, badges, table headers

body
Crimson Pro

Body copy, italic subheads, form fields

label
Libre Baskerville

Field labels, eyebrows, captions

Display / Hero — 48px
The quick brown fox
Page title — 32px
Component library overview
Section heading — 24px
Form controls and inputs
Body large — 18px

Base body copy at large size for lead paragraphs and introductory content blocks.

Body base — 15px

Standard body text for descriptions, helper copy, and long-form content within cards and panels.

Caption — 13px

Captions, timestamps, and supplementary metadata rendered at reduced size.

Label / EyebrowSection label sample
Foundation — Color Palette
Background
Surface
Primary
Text primary
Text muted
Border
Success
Error
Foundation — Divider / SectionLabel
This page uses SectionLabel to open every section
Button

Variants

Sizes

Use cases

Badge

Variants

SuccessWarningErrorInfoNeutralNew

Use cases

Ada LovelaceActiveDesign Lead
NewProduct launch flag on a release note
P0Blocked3 openSeverity + count on an issue row
v2.4StableBreaking
DesignBetaInternalUrgent
Avatar

Sizes & shapes

Ada LovelaceGrace HopperAlan TuringSquare ShapeBroken ImageBroken Image

Status dots

Online UserAway UserOffline User

Use cases

Margaret Hamilton
Margaret Hamilton

Profile header — large avatar + status

Katherine JohnsonRadia PerlmanBarbara LiskovHedy LamarrSquare team strip
Ada LovelaceGrace HopperAlan TuringMargaret Hamilton+2Group with overflow
Donald KnuthEdsger DijkstraFrances AllenLinus Torvalds
Card

Default card

Static container, no interaction.

Clickable card

Click me — fires a real handler.

FeaturedTheme

Ink highlights

Card with badge header for featured content.

Grace Hopper
Grace Hopper

Engineer · Online

Avatar + meta composition for people cards and directory rows.

Actions footer

Card that ends with a real action row.

Input
We'll only use this for account updates.
Appears on invoices and invites.
At least 8 characters.
Read-only identifier.
Textarea
0 / 120
0 / 280Visible to your team only.
Checkbox
Radio

Plan

Billing cycle

Switch
Channel
Tooltip
Select
Role
Timezone
MultiSelect
Tags (1/3)
Beta
Skills (2/4)
ReactTypeScript
DatePicker
TimePicker
15 minutes before the meeting by default.
Modal
Table

With data — sortable + selection

Status
Ada LovelaceDesign LeadActive
Grace HopperEngineerActive
Alan TuringResearcherPending
Margaret HamiltonEngineerActive
Katherine JohnsonAnalystIdle
Radia PerlmanArchitectActive

Showing page 1 of 2 from 12 rows — use Pagination below.

Loading

Status

Empty

Status
No rows to show.
Pagination

Paired with table dataset

Drives the “With data” table above.

Mid-range (page 3 of 8)

Near the end (page 5 of 5)

Skeleton

Avatar + lines

Card block

Table row placeholders

Form field stack

List items

Media / thumb row

Button row placeholders

Graph

Sample dataset for Ink — values scale relative to the highest bar in the series.

Toast
Tabs

Horizontal

Overview panel — summary copy for Ink. Use arrow keys to move between tabs.

Vertical

Ada Lovelace
Ada Lovelace

Vertical tabs keep navigation beside the panel.

Composed Flow — Register a Record

A realistic product moment: open the modal, fill fields with validation, submit, and see a toast plus a new table row. Secondary paths prove confirm and info modals stay reachable from the same section.