Theming
shincn uses CSS custom properties (design tokens) for colors, radii, and fonts. Customize these in your globals.css to match your brand.
Color Tokens
Colors are defined as oklch values in the :root selector. The base palette uses neutral tones:
Here are the core tokens. See your globals.css for the full set including card, popover, chart, and sidebar tokens.
:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--radius: 0.375rem;
/* ... chart-1 through chart-5, sidebar-* tokens */
}Typography
shincn uses SF Pro Rounded as the primary sans-serif font and SF Mono for code. These are defined in the Tailwind theme:
@theme inline {
--font-sans: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "SF Mono", ui-monospace, monospace;
}Border Radius
Radius values are restrained and intentional:
rounded-md(6px) for buttons and inputsrounded-lg(8px) for cards and panelsrounded-xl(12px) for modals and dialogsrounded-fullfor avatars and status dots
Customizing
To customize the theme for your brand, override the CSS custom properties in your globals.css. For example, to use a blue primary:
:root {
--primary: oklch(0.55 0.2 250);
--primary-foreground: oklch(0.985 0 0);
}