---
name: Atlason
description: "A masterclass in using typography and whitespace to create a premium, gallery-like feel."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#B0B0B0"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 230px
    lineHeight: 0.77
    fontWeight: 400
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 106px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A high-end design studio portfolio showcasing furniture and product work.

*An upscale design gallery that lets the work speak for itself.*

## Colors

Strict monochrome foundation relying on high-contrast photography for color.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#B0B0B0`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use tight letter-spacing for large display headings
- Maintain strict left-alignment for all text blocks
- Avoid drop shadows or decorative treatments on text

## Layout

Asymmetric multi-column grid on desktop; single column stacking on mobile.

*Rhythm:* Asymmetrical with large gaps between major sections and tighter grouping within content blocks.

## Elevation & Depth

- Borders: None visible on the main interface elements; relies on whitespace for separation.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Text-only links with subtle opacity transitions on hover.
- **card:** Grid of images with minimal or no borders, relying on proximity to captions.
- **hero:** Massive typography paired with a large full-bleed or split-screen image.

## Do's and Don'ts

**Don't:**
- don't use bright accent colors — screenshot shows a strict black and white palette
- don't add drop shadows to images — screenshot shows clean, flat presentation
- don't use centered text alignment — screenshot shows strong left-aligned typography
- don't use rounded corners on containers — screenshot shows sharp, rectangular edges
- don't use serif fonts for headlines — screenshot shows a bold, modern grotesque sans-serif
- don't clutter the UI with icons — screenshot relies on text and imagery for navigation

---

## System Prompt (paste into AI agent)

```
This design represents a premium, minimalist design studio portfolio. It utilizes a strict monochromatic palette of pure black (#000000) and white (#FFFFFF) to create high contrast and focus. The typography is a bold, modern grotesque sans-serif used at massive scales for impact. The layout is an asymmetric grid that prioritizes large, high-quality photography. Critical constraints: avoid all bright accent colors, do not use rounded corners or drop shadows, and maintain strict left-alignment for all text. The interaction model is subtle, relying on smooth 300ms transitions for hover states.
```