Product Studio
#1A73E8•oklch(0.548 0.184 254.6)Design System
A comprehensive overview of Hloho Nolo's design tokens, typography, and components.
Color Palette
Our color system uses OKLCH color space for perceptually uniform colors across light and dark modes.
--primary--primary-foreground--background--foreground--card--card-foreground--popover--popover-foreground--secondary--secondary-foreground--accent--accent-foreground--muted--muted-foreground--destructive--border--input--ring--chart-1--chart-2--chart-3--chart-4--chart-5--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ringTypography
Our typography system uses Public Sans for headings and Inter for body text.
Heading 1
h1, text-4xl (36px) font-bold tracking-tightHeading 2
h2, text-3xl (30px) font-bold tracking-tightHeading 3
h3, text-2xl (24px) font-bold tracking-tightHeading 4
h4, text-xl (20px) font-bold tracking-tightHeading 5
h5, text-lg (18px) font-bold tracking-tightHeading 6
h6, text-base (16px) font-bold tracking-tightExtra Large Text
text-xl (20px)Large Text
text-lg (18px)Base Text (Default)
text-base (16px)Small Text
text-sm (14px)Extra Small Text
text-xs (12px)Muted Text - Used for secondary information
text-muted-foregroundMedium Weight - Used for emphasis
font-mediumSemibold Weight - Used for strong emphasis
font-semiboldBold Weight - Used for headings and important text
font-boldItalic Style - Used for emphasis or quotes
italicUnderlined Text - Used for links
underlineStrikethrough Text - Used for deleted content
line-throughMonospace Text - Used for codefont-monoTracking Tighter - The quick brown fox
tracking-tighterTracking Tight - The quick brown fox
tracking-tightTracking Normal - The quick brown fox
tracking-normalTracking Wide - The quick brown fox
tracking-wideTracking Wider - The quick brown fox
tracking-widerTracking Widest - The quick brown fox
tracking-widestFont Weight Preview
Preview of all Tailwind font weights (font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black) with labels and background styling for clarity.
Spacing
Our spacing system uses Tailwind's spacing scale. Each unit increases by 4px (0.25rem).
Padding
p-4, p-6, p-8Gap (Space Between)
gap-2, gap-4, gap-6Margin
m-4, m-6, m-828px416px624px832pxBorder Radius
Our border radius system provides consistent rounded corners throughout the application.
6.4px8.4px10.4px14.4px20pxComponent Examples
Examples of common UI components using our design system.
This is an example of a card component with header and content.
Cards are versatile containers for grouping related content.