Tokens

Design System

Reference for RealFlow tokens, components, and implementation guidance.

Tokens

Components in use

Tokens

Colors, typography, spacing, radii, shadows, and motion used across the product.

Color palette

Brand

primary.600

#FF7A00

primary.500

#FFA940

primary.300

#FFD08A

Neutrals

neutral.900

#1E1E1E

neutral.600

#606060

neutral.300

#C9C9C9

neutral.100

#F6F6F6

neutral.0

#FFFFFF

Semantic

success

#00B578

danger

#E84545

warning

#FFA940

info

#606060

Typography

English / Global

Inter, SF Pro Display, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif

Japanese

Noto Sans JP, Hiragino Kaku Gothic Pro, Meiryo, system-ui, sans-serif

Chinese

HarmonyOS Sans SC, Source Han Sans CN, Noto Sans SC, system-ui, sans-serif

Type scale

xs 12px / 18px

sm 14px / 20px

base 16px / 24px

lg 18px / 28px

xl 20px / 28px

2xl 24px / 32px

3xl 30px / 38px

4xl 36px / 44px

Spacing scale

0px

2px

4px

6px

8px

10px

12px

16px

20px

24px

#10

32px

#11

40px

#12

48px

#13

64px

#14

80px

Radii & shadows

8px

12px

16px

24px

full

9999px

0 1px 2px rgba(0,0,0,0.06)

0 4px 12px rgba(0,0,0,0.08)

0 12px 24px rgba(0,0,0,0.12)

glow_primary

0 0 0 3px rgba(255,122,0,0.15)

Motion & breakpoints

Durations

fast 150ms

normal 250ms

slow 400ms

Easing

standard cubic-bezier(0.2, 0, 0, 1)

emphasized cubic-bezier(0.2, 0, 1, 1.2)

Breakpoints

sm 640px

md 768px

lg 1024px

xl 1280px

2xl 1536px

Components in use

Shadcn-svelte and Bits UI primitives standardized for the CRM experience.

Button

shadcn-svelte

Primary, secondary, ghost, outline, and destructive variants with sm/default/lg/icon sizes.

Dropdown

shadcn-svelte

Dropdown

Menu trigger with grouped actions, built on shadcn-svelte dropdown primitives.

Command Menu

shadcn-svelte

Palette preview

⌘K Enter some text

Dropdown /
Toast ↵
Dialog ↵

Palette-style search/action menu powered by Bits UI dialog + list primitives.

Sheet

Bits UI

Sheet

Side drawer for create/edit flows with overlay, header/footer, and focus trapping.

Card

shadcn-svelte

Card

Layered surface with rounded corners and md shadow for dashboards and detail panels.

Tokens

Colors, typography, spacing, radii, shadows, and motion used across the product.

Layered surface with rounded corners and md shadow for dashboards and detail panels.

Input

shadcn-svelte

Input

Form fields with focus ring in brand color and support for error/disabled states.

Select

Bits UI

Select

Bits UI-based select with trigger/content/items for filters and form controls.

Checkbox

Bits UI

Receive updates

Shadcn checkbox with bind:checked support and accessible labels.

Dialog

Bits UI

Bits UI dialog with overlay, content padding, and xl radius for modal flows.

Data Table

TanStack Table

Name	Status
Maple Residences	Active
Harbor Suites	Review

TanStack table integration with sorting, filtering, pagination, and empty states.

Toast

svelte-sonner

Saved! Your changes are synced.

svelte-sonner notifications for lightweight feedback.

Badge

shadcn-svelte

Default Success Warning Critical

Status badges for semantic states: default, success, warning, destructive, outline, secondary.

Native Date/Time

Native HTML

Native datetime-local

Browser native input, simple but limited styling control.

Date input

Native date input for simple date-only selection.

Time input

Native time input for time-only selection.

Date + Time combo

Separate date and time inputs for combined datetime.

Browser native date and time inputs with limited styling control.

Calendar & Date Picker

shadcn-svelte

shadcn Calendar

Su	Mo	Tu	We	Th	Fr	Sa
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

Styled calendar component with Bits UI and Tailwind.

Date Picker (Popover)

Calendar inside a popover with formatted display.

Date + Time Picker

Popover calendar combined with time input.

Styled calendar and date picker components built with Bits UI and Tailwind.