SETUP

Getting Started

Install dependencies, set up fonts, and start using the design system in your project.

Installation

Terminal

npm install clsx tailwind-merge
npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer

Font Setup (Next.js)

Load Noto Sans and Noto Sans Mono via next/font for optimal performance:

app/layout.tsx

import { Noto_Sans, Noto_Sans_Mono } from "next/font/google";

const notoSans = Noto_Sans({
subsets: ["latin"],
variable: "--font-sans",
weight: ["300", "400", "500", "600", "700"],
});
const notoSansMono = Noto_Sans_Mono({
subsets: ["latin"],
variable: "--font-mono",
weight: ["400", "500", "600", "700"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
  <html className={`${notoSans.variable} ${notoSansMono.variable}`}>
    <body>{children}</body>
  </html>
);
}

Font Setup (React Native / Expo)

Terminal

npx expo install expo-font @expo-google-fonts/noto-sans @expo-google-fonts/noto-sans-mono
npx expo install react-native-safe-area-context

App.tsx

import { useFonts, NotoSans_400Regular, NotoSans_500Medium, NotoSans_600SemiBold, NotoSans_700Bold } from "@expo-google-fonts/noto-sans";

export default function App() {
const [fontsLoaded] = useFonts({
  NotoSans: NotoSans_400Regular,
  "NotoSans-Medium": NotoSans_500Medium,
  "NotoSans-SemiBold": NotoSans_600SemiBold,
  "NotoSans-Bold": NotoSans_700Bold,
});
if (!fontsLoaded) return null;
return <Navigation />;
}

Importing Components

Web

import { Button, Input, Card } from "@/components/ui";

Mobile

import { Button, Input, Card } from "@/components/mobile";

Using Tokens Directly

When Tailwind classes or StyleSheet aren't enough (e.g., chart libraries):

Web

import { colors, spacing } from "@/lib/tokens";
// colors.primary.default → "#2F5BFF"

Mobile

import { colors, spacing } from "@/tokens";
// spacing[4] → 16 (dp)

Project Structure

src/
├── tokens/           ← Shared (platform-agnostic)
├── components/
│   ├── ui/           ← Web (Next.js + Tailwind)
│   └── mobile/       ← Mobile (RN + StyleSheet)
├── lib/
│   ├── cn.ts         ← Tailwind merge utility
│   └── tokens.ts     ← Web token re-exports (rem)
└── styles/
    └── globals.css   ← Tailwind directives