UI Guide

This is a short reference guide on how to use @forge-ui most effectively.

Colors

Colors used by forge-ui are defined in your global.css file. You can find more information here. Do not use hardcoded colors, sich as <span className='text-red-500' />, or <div style={{ color: 'red' }}> in your code, if you want to keep your components consistent with the rest of the UI, in both light and dark mode. Instead be sure to use the provided color variables.

<span className="text-muted-foreground">Hello, world!</span>

<span style="text-zinc-200/80">Hello, world!</span>

Layout

When working with layout, it can be tempting to use margins and paddings to create space between elements. However, this can lead to inconsistent spacing between elements. Instead, a components' parent should be responsible for the spacing between elements. This way, the spacing is consistent across the entire application, and if you choose to reuse the component elsewhere, you don't have conflicting margins and paddings.

<div className="relative flex flex-col space-y-4 py-2">
  <Label>Email</Input>
  <Input type="email" />
  <Button variant="ghost" onClick={submitMethod}>Save</Button>
</div>

<div className="relative">
  <Label className="mb-4 mt-2">Email</Input>
  <Input type="email" className="mb-4" />
  <Button variant="ghost" onClick={submitMethod} className="mb-2">Save</Button>
</div>

Shared components

This issue becomes even more apparent when you have shared components. If you have a component that is used in multiple places, and you have margins and paddings on the component itself, you can end up with conflicting margins and paddings between the shared component and its parent.

Shared components should only style within themselves, and have no knowledge of the layout they are placed in.

function MyComponent() {
  return (
    <div className="flex flex-col gap-4">
      {/* ... */}
    </div>
  )
}

function MyComponent() {
  return (
    <div className="flex flex-col gap-4 my-10">
      {/* ... */}
    </div>
  )
}

Responsive layout

Don't (always) fill the entire screen

It's no surprise that when most of us open our design tool of choice on our high resolution displays, we give ourselves at least 1200-1400px of space to fill. But just because you have the space, doesn't mean you need to use it.

Hierarchy over semantics

Semantics are an important part of button design, but that doesn't mean you can forget about hierarchy. Every action on a page sits somewhere in a pyramid of importance. Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions. When designing these actions, it's important to communicate their place in the hierarchy.

• Primary actions should be obvious. Solid, high contrast background colors work great here.
• Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.
• Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.