Design

Design Principles

• A design system is a set of rules and opinions that shape the user interface and the experience as a whole.
• Design principles explain why we make specific decisions; implementation explains how they work in code.
• The Components system takes cues from the tools used to solve math and physics problems: paper, pencils, whiteboards, and pencil cases.
• Heavily inspired by Apple design videos.
• The core of digital services is to adapt to their cognitive load and enable their capabilities
• I care deeply about UX/UI design, with references including Apple, Linear, Raycast, Dub, and Vercel.
• Why is it called "Components"?
  • The name makes the purpose of this page clear in navigation.
  • Blue, black, gray, and white keep the visual language focused and familiar.
• Distinguish between link and button, link to navigate, button for action.
  • Both need clear hover, active, and focus-visible states when those states are relevant.
  • A link navigates; a button performs an action. Their visual treatment should reinforce that distinction.
• Prefer the system's basic colors and components to accelerate development while maintaining consistency.
• Use Oklab/Oklch (not RGB or HSV) for random colors, palettes, and gradients to ensure perceptually uniform, balanced results that match human vision.
• Components include responsive behavior and keyboard focus treatment where interaction requires it.
• Controls use subtle shadows; floating controls sit one level higher. Hover raises elevation and pressing lowers it. Disabled controls and selects stay flat, and keyboard focus keeps a visible outline.
• Strive for one line navigation layer on all screen views as possible.
• The system works on mobile and desktop.
• The main grid uses one column on mobile, two on tablets, and four on desktop, with the same gap-5 at every size.
• For Harimaki, supporting-feature modals should use grid-cols-1 and include a button at the bottom to open the full page.
• The mobile tab bar should appear on every Harimaki page except Materi.
• View the component code here
• Browse the lab collection and discontinued history
• Still evolving: typography, use cases, do's and don'ts, and component-specific guidance are next.

UI Components

Index CardIndexCard.tsx

Writing

18 writing posts

Notes and ideas I want to share.

SwitchSwitch.tsx

AccordionAccordion.tsx

What is an accordion?

CheckboxCheckbox.tsx

Accept terms and conditions.

PopoverPopover.tsx

Show Popover

Number inputNumberInput.tsx

Example number

Table

Example data table

Name	Role	Status
Ada	Engineer	Active
Grace	Designer	Away

TabsTabs.tsx

AccountPassword

Update your profile details and account preferences.

ToastToast.tsx

Show Toast

Button: PrimaryButton.tsx

Button

Button: LoadingButton.tsx

Button

Button: SecondaryButton.tsx

Button

Button: With IconButton.tsx

Bookmark

Button: Only IconButton.tsx

Button: DangerButton.tsx

Delete

Button: DisabledButton.tsx

Button

Internal LinkInternalLink.tsx

Internal Link

Database link exampleDBUses a database

Inline Link

API

External LinkExternalLink.tsx

External Link

Input: Text

Text input

Input: Search

Search input

Input: Number

Number input

BoxBox.tsx

• Exercise title

  Use a heading and list item for exercise cards.

• Another exercise

  Cards stretch to the same height within each grid row.

Text Area

ToggleToggle.tsx

State: off

Breadcrumbs

BadgesBadge.tsx

GeneralSuccessDangerAttentionInformation

Back ButtonBackButton.tsx

Labs

TooltipTooltip.tsx

Tooltip

Logo

Harits Syahharitssr.com

Harimakiharimaki.com

ModalDialog.tsx

Open Modal

SelectSelect.tsx

Choose a disciplineDesign

Bottom BarBottomBar.tsx

SliderSlider.tsx

Context MenusContextMenu.tsx

Right-click here

Right-click the panel

Date Picker

Choose a date

Main ColorsColorsDemo.tsx

Hierarchical ColorsColorsDemo.tsx