marca

@theme {
  --color-*: initial;
  --color-bg: rgb(16, 15, 15);
  --color-bg-2: rgb(28, 27, 26);
  --color-ui: rgb(40, 39, 38);
  --color-ui-2: rgb(52, 51, 49);
  --color-ui-3: rgb(64, 62, 60);
  --color-tx-3: rgb(87, 86, 83);
  --color-tx-2: rgb(135, 133, 128);
  --color-tx: rgb(206, 205, 195);
  --color-og: oklch(0.66 0.18 45);

  --font-sans: 'DINdong', sans-serif;
  --font-serif: 'BIZUDPMincho', serif;
  --font-mono: 'VictorMono', monospace;
}

## DESIGN SYSTEM

indies.la is for people tired of corporate BS. we keep it simple: lowercase everything, casual as hell. for spanish text, avoid inverted punctuation marks (¡ ¿)

### SPACING

- USE `-4` for spacing (p-4, gap-4, etc.).
- USE `text-xl` or `text-2xl` for text sizes, no other values allowed.

### FONTS

- USE font-serif (BIZ UDPMincho) as default with `text-xl`. Both properities inheritet from `text-xl`. body text is lowercase (`lowercase` class) unlike headings.
- USE font-sans (DINdong) for titles and headings with `text-2xl`
- USE font-mono (Victor Mono) for anything engineering or AI related, snippets and terminals.

CONSIDER: these fonts have no weights other than 400. therefore `font-bold` is usable; differenctiate text via colors.

### colors

USE ONLY the following colors:

- `bg`: main background
- `bg-2`: secondary background
- `ui`: borders
- `ui-2`: hovered borders
- `ui-3`: active borders
- `tx-2`: faint text
- `tx-2`: muted text
- `tx`: primary text
- `og`: primary color, signals brand, is bright and attention grabbing