---
name: Pooria Arab website
description: Warm, direct design for a public record of software that ships.
colors:
  cream: "#fffdf7"
  cream-surface: "#fff8e8"
  ink: "#1c1a15"
  ink-muted: "#57503f"
  ink-faint: "#6b6455"
  ink-line: "#e6dcc4"
  yellow-primary: "#ffc72c"
  yellow-hover: "#f5b81a"
  ember-focus: "#ff8a3d"
typography:
  display:
    fontFamily: "Instrument Serif, Georgia, serif"
    fontSize: "clamp(2.75rem, 6vw, 4.5rem)"
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: "-0.02em"
  heading:
    fontFamily: "Instrument Serif, Georgia, serif"
    fontSize: "clamp(2.25rem, 4vw, 3rem)"
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: "-0.02em"
  body:
    fontFamily: "Poppins, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.625
  label:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: "0.75rem"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.18em"
rounded:
  sm: "4px"
  md: "6px"
  control: "8px"
  brand: "14px"
  header: "16px"
  pill: "9999px"
spacing:
  unit: "4px"
  gutter-mobile: "16px"
  gutter-tablet: "24px"
  gutter-desktop: "32px"
  section-mobile: "80px"
  section-desktop: "112px"
  content-max: "80rem"
components:
  button-primary:
    backgroundColor: "{colors.yellow-primary}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.control}"
    padding: "0.625rem 1rem"
    height: "2.75rem"
  button-primary-hover:
    backgroundColor: "{colors.yellow-hover}"
    textColor: "{colors.ink}"
    rounded: "{rounded.control}"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.control}"
    padding: "0.625rem 1rem"
    height: "2.75rem"
  card:
    backgroundColor: "{colors.cream-surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.brand}"
    padding: "1.5rem"
---

# Pooria Arab design system

## Overview

**Creative North Star: "still figuring this out, out loud"**

The site is a public workbench. It feels warm, candid, and active. Shipped work
leads. Hackathons, investing, and personal context support that record without
turning it into a corporate portfolio or a creator course funnel.

The current public surface uses the approved system in [brand.md](brand.md).
It uses a cream field, warm ink, direct lowercase copy, and one yellow marker.

Motion confirms structure. It never delays reading. Every animated element is
visible before animation starts. Reduced-motion mode shows the same complete
content without movement.

**Key characteristics:**

- Real work and specific facts come before status claims.
- Typography creates hierarchy before containers do.
- Yellow marks one decision instead of coating every element.
- Borders and aligned fields create structure without decorative depth.
- Each section has a distinct shape and one clear job.

## Colors

The palette is warm and high contrast. The frontmatter is normative.

### Primary

- **Marker yellow** fills primary actions, selected filters, and the marker
  behind important words. Ink always sits above it.
- **Ember** belongs to focus rings. It does not become a second accent.

### Neutral

- **Cream** is the page field.
- **Cream surface** separates bands, cards, and quiet hover states.
- **Ink** carries headings, body copy, borders, and text on yellow.
- **Muted ink** carries secondary copy while retaining body-text contrast.
- **Ink line** separates content without creating heavy boxes.

**The Ink-on-Yellow Rule.** Ink on yellow has an 11.14:1 contrast ratio.
White on yellow has only 1.56:1 and never appears.

**The One Accent Rule.** A screen gets one yellow focal decision. Repetition
turns the accent into wallpaper.

## Typography

Instrument Serif gives the work a human, editorial voice. Poppins keeps long
copy and controls direct. The pairing stays lowercase on this surface.

### Hierarchy

- **Display** carries the home hero at 44px, then 60px from 640px, and 72px
  from 1024px. It uses a 1.04 line height.
- **Heading** carries section titles at 36px, then 48px from 768px.
- **Lead** uses Poppins at 18px, or 20px on larger introductory copy.
- **Body** uses Poppins at 16px with relaxed leading and a 68-character limit.
- **Label** uses the system monospace stack at 12px with wide tracking.
  Labels name sections, measures, code, and state. They never simulate a
  technical personality.

**The Lowercase Surface Rule.** Public navigation, actions, headings, and
editorial labels use lowercase. Legal names and source data keep their case.

**The Real Type Rule.** Use Instrument Serif for display and Poppins for body.
Do not substitute an available font merely because it looks close.

## Layout

The shared container stops at 80rem. Gutters grow from 16px to 24px and 32px.
Primary sections use 80px vertical padding on small screens and 112px from the
640px breakpoint. Dense utility routes may use a smaller rhythm.

The home hero becomes a twelve-column grid at 1024px. Copy uses seven columns.
The portrait uses five. Repeated content may use a grid, but featured work must
change span or geometry. Equal cards do not replace information hierarchy.

The header floats inside the same 80rem boundary. It is 48px tall on small
screens and 64px from 768px. Mobile navigation remains in document order.

Responsive targets are 480px, 768px, and 1024px. Every route must avoid
horizontal scrolling at each target. Interactive text remains readable without
zoom, and the primary action stays visible in the first viewport.

**The Section Silhouette Rule.** Adjacent sections use different structures.
The current sequence moves through a split hero, band, varied grid, numbered
list, image rail, split evidence, logo wall, selection grid, FAQ, and CTA.

## Elevation & Depth

The public surface is flat by default. Warm fields, ink hairlines, and overlap
show depth. The home portrait uses one offset yellow plane. Cards move upward
by 2px on hover while their border darkens. They do not gain a soft shadow.

Dialogs and operational overlays may use an established shadow because they
must sit above the page. A static marketing card does not earn one.

The sticky header uses a translucent cream field and backdrop blur. Blur
supports the reading layer. It never becomes glass decoration.

**The Flat-at-Rest Rule.** Surfaces use fields and borders at rest. Elevation
appears only when hierarchy or interaction requires it.

## Shapes

Brand cards and media use gently rounded 14px corners. Controls use 8px
corners. The floating header uses 16px corners. Pills are limited to filters,
tags, and compact status. Content sections never become large capsules.

Hairline borders use the ink-line token. Important framed areas may use ink.
Portraits and other media crop inside the same 14px geometry as their frame.

## Components

### Buttons

Primary and secondary buttons share height, border, type, and padding. Only the
fill changes. Hover changes the fill in 150ms. Focus uses a 2px ember ring with
a 2px cream offset. Disabled controls keep their shape and expose a clear
disabled state. Buttons never scale, glow, or gain a gradient.

### Marker highlight

The marker is a yellow pseudo-element behind live ink text. It covers roughly
half the letter height near the baseline. Its only entrance wipes from left to
right. Text color never changes during the wipe.

### Cards

Cards use cream surface, one ink-line border, 14px corners, and 24px padding.
The whole card is the link when it represents one destination. Featured cards
take more grid width. Hover moves the card upward by 2px and darkens its border.

### Navigation

The wordmark and primary links remain visible at 768px and above. The mobile
toggle uses three authored lines. Focus is explicit. The open panel follows the
header geometry and does not trap content behind animation.

### Filters and tags

Filters are real controls with selected, hover, focus, and result-count states.
Selected filters use yellow with ink. Tags use either the same selected style
or a transparent field with an ink-line border.

### Accordions

The summary remains a native keyboard target. Content opens by changing
`grid-template-rows` from `0fr` to `1fr`. It stays opaque. The indicator rotates
without becoming the only state cue.

### Motion

The brand curve is `cubic-bezier(0.16, 1, 0.3, 1)`. Authored entrances use a
420ms duration. Text settles from 10px with 90ms stagger steps. Marquees pause
on hover and focus. Reduced-motion mode removes movement and smooth scrolling.

**The Visible-First Rule.** No entrance starts at zero opacity. Crawlers,
screenshots, reduced-motion users, and late arrivals see complete content.

## Do's and Don'ts

### Do

- **Do** lead with a shipped product, specific event, or verifiable number.
- **Do** use ink for every text treatment on yellow.
- **Do** use the shared container and breakpoint rhythm.
- **Do** keep keyboard focus visible on every control and whole-card link.
- **Do** give each section one job and a distinct silhouette.
- **Do** verify `/design.md` matches this file byte for byte after deployment.

### Don't

- **Don't** use white text on yellow or yellow text on cream.
- **Don't** use gradient text, ornamental glow, or decorative glass.
- **Don't** use monospace as a generic technical costume.
- **Don't** hide readable content behind opacity animation.
- **Don't** repeat equal cards when one item is more important.
- **Don't** mix experimental directions into the approved system.
- **Don't** use a pill for ordinary metadata or a content section.