---
name: Grilli Type
description: "The site serves as a masterclass in restraint, using a minimalist framework to let the typography products themselves be the primary visual focus."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#8C8C8C"
  neutral: "#8C8C8C"
  bg-soft: "#F9F9F9"
  line: "rgba(0,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.7px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.375
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 5px
  lg: 5px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 15px
  xl: 16px
  2xl: 20px
  3xl: 25px

---

## Overview

A minimalist, grid-driven portfolio for a Swiss type foundry.

*A curated gallery for high-end typography*

## Colors

Strict high-contrast monochrome with sparse, intentional use of vibrant color in project imagery.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#8C8C8C`)** — uses `ink-soft` token
- **Muted (`#8C8C8C`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** grotesque-sans

- Typeface names are set in large, tight-spaced transitional or geometric styles
- Body text is set in a neutral grotesque sans-serif
- Font weights are predominantly regular (400)

## Layout

Left-aligned labels with a large multi-column grid for content

*Rhythm:* Consistent 20px to 25px gaps between grid items

## Elevation & Depth

- Borders: 1px solid #000000 or #8C8C8C for horizontal rules

## Shapes

- `sm`: 4px
- `md`: 5px
- `lg`: 5px
- `pill`: 999px

## Components

- **button:** Minimal text link or ghost button with a 1px border
- **card:** Visual project tiles without borders or shadows
- **hero:** Large graphic composition showcasing a typeface in a technical grid

## Do's and Don'ts

**Don't:**
- don't use drop shadows — screenshot shows flat, grid-based layout
- don't use border-radius on large elements — screenshot shows sharp corners (except small 5px radius)
- don't use heavy font weights — screenshot shows predominantly regular weight typography
- don't use centered layouts — screenshot shows strict left-alignment for labels and navigation
- don't use decorative backgrounds — screenshot shows solid white or light gray (#F9F9F9) backgrounds
- don't use multi-colored navigation — screenshot shows black and muted gray text only

---

## System Prompt (paste into AI agent)

```
A Swiss type foundry portfolio characterized by minimalist, grid-driven design and strict monochrome palettes. Key colors include a pure white (#FFFFFF) background, solid black (#000000) ink, and a muted gray (#8C8C8C) for secondary text. Typography is a mix of grotesque sans-serif for UI and transitional or geometric serifs for typeface showcases, with a 48px display scale. Critical design rules: maintain sharp corners (max 5px), use 1px solid borders for separation, and rely on strict left-alignment. Do not use decorative shadows, varied font weights, or vibrant UI colors (save those for project imagery only).
```