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 (¡ ¿)
@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.cl appeals to people tired of the monotonous and asymmetric nature of corporations, our communication is simple, everything in lowercase, being as casual as possible. for spanish text, avoid inverted punctuation marks (¡ ¿)
### SPACING
- USE spacing, we use `-4` (p-4).
- USE either use `text-xl` or `text-2xl`, 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