Style Guide and Components

Atoms

Atoms are the most basic elements in the system. things like logos, colors, iconography, and styles that set the visual language for your entire product. These foundational assets aren’t functional on their own but are critical for consistency and scalability across the UI. They define your brand’s personality and aesthetic at the most granular level.

Logos, Colors, Typography, Textures, Icons...

Molecules

Molecules start combining those atomic elements into functional UI components. This includes dividers, overlays, buttons, text fields, checkboxes, chips, and toggles—each one designed to serve a clear purpose and be reused throughout the product. These molecules introduce interaction and visual cohesion while remaining flexible building blocks.

Icon Button

console.log('hello world');

Buttons

interface Props extends HTMLAttributes<"button"> {
  variant?: "primary" | "secondary";
  size?: "lg" | "sm";
  icon?: "left" | "right";
}

Text Field

interface Props extends HTMLAttributes<"input"> {
  label?: string;
  helperText?: string;
  state?: "error" | "success";
}

Images

interface Props {
  src: ImageMetadata;
  alt: string;
  type: "portrait" | "square" | "landscape";
  caption?: string;
}

Checkbox

interface Props extends HTMLAttributes<"input"> {
  variant: "md" | "sm";
  label: string;
}

Spinner

Chips

interface Props extends HTMLAttributes<"input"> {
  variant: "primary" | "secondary" | "tertiary";
  size: "md" | "sm";
}

Toggle

interface Props extends HTMLAttributes<"input"> {
  variant: "sm" | "md";
}

Organisms

Organisms bring multiple molecules together into more complex, task-driven components like chevron fields, dropdown menus, multi-selects, pagination controls, widgets, and popups. These organisms manage more user interaction and layout complexity, forming the backbone of key interface moments where multiple parts of the system work together.

Chip Field

Dropdown Menu

interface Props {
  selectMultiple?: boolean;
}

Nav Links

interface Props extends HTMLAttributes<"a"> {
  icon?: "left" | "right";
  size?: "lg" | "sm";
}

Templates

Templates offer layout structure by organizing organisms into repeatable page-level patterns. Think of lists, flows, or navigation structures—these templates don't contain final content yet, but they define how information and functionality are arranged to guide user flow and support various use cases.

Note, templates aren't displayed here because they're big elements that are actively used! Go and see them yourself! Namely a navigation and content card.

Pages

Pages are where it all comes to life with real content and data. Examples like job overview, estimate builder, and multiple estimates show how users actually engage with your product. Pages validate how your system scales, communicates hierarchy, and supports specific tasks—tying everything together into meaningful experiences.

Note, pages aren't displayed here because they're too big. Go check them out yourself!