Abhishek Gawade

Generated Oct 20, 2026

DESIGN.md for aoricreative.com

aoricreative.com6 colors3 componentsduducalligraphy

Remix

2 screenshots captured· aoricreative.com

1 / 2 · Aori Creative | Websites, apps and the software in between · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Aoricreative
description: |
  Aori Creative's design language is minimalist and contemplative, built around
  a monochromatic foundation that prioritizes legibility and sophisticated
  restraint. The system uses a dark canvas (#0B0B0B) paired with precise
  off-white typography, creating high contrast and intentional visual breathing
  room. Handwritten and custom typefaces (duducalligraphy, faracohand, chicle)
  inject warmth and personality into an otherwise austere palette, evoking a
  creative studio's analog origins—sketchbooks, coffee, notes, inspiration
  boards. The atmosphere is one of focused craftsmanship: calm surfaces,
  generous whitespace, typography that speaks before decoration, and a color
  story that lets content and craft dominate. Every detail feels deliberate,
  with minimal shadows and sharp corners reinforcing a clean, contemporary
  aesthetic.
source:
  url: "https://aoricreative.com/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-20
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  canvas: "#0B0B0B"
  ink: "#767676"
  body: "#6B6B6B"
  muted: "#4A4642"
  faint: "#1F1D1A"
typography:
  display-xl:
    fontFamily: duducalligraphy
    fontSize: 89.28px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: 1.34px
  display-lg:
    fontFamily: duducalligraphy
    fontSize: 86.4px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -1.3px
  display-md:
    fontFamily: duducalligraphy
    fontSize: 56.16px
    fontWeight: 300
    lineHeight: 1.18
    letterSpacing: 0px
  display-sm:
    fontFamily: duducalligraphy
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -1.4px
    textTransform: uppercase
  display-xs:
    fontFamily: faracohand
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-md:
    fontFamily: faracohand
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sm:
    fontFamily: faracohand
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-xs:
    fontFamily: duducalligraphy
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 2.6px
    textTransform: uppercase
  body-xl:
    fontFamily: duducalligraphy
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: duducalligraphy
    fontSize: 14.976px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: duducalligraphy
    fontSize: 14.72px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-sm:
    fontFamily: duducalligraphy
    fontSize: 14.4px
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: 0px
  body-xs:
    fontFamily: duducalligraphy
    fontSize: 14.08px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-xs-2:
    fontFamily: duducalligraphy
    fontSize: 11.52px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 3.23px
    textTransform: uppercase
  nav:
    fontFamily: duducalligraphy
    fontSize: 14.72px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-xl:
    fontFamily: chicle
    fontSize: 50.7586px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0.51px
  button-lg:
    fontFamily: duducalligraphy
    fontSize: 27.36px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 1.64px
    textTransform: uppercase
  button-md:
    fontFamily: duducalligraphy
    fontSize: 11.52px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 2.53px
    textTransform: uppercase
  caption-xl:
    fontFamily: duducalligraphy
    fontSize: 29.808px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  caption-lg:
    fontFamily: duducalligraphy
    fontSize: 11.52px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 2.07px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 2px
  sm: 14px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 20px
  lg: 24px
  xl: 28px
  xxl: 40px
  xxxl: 44px
  section: 48px
  band: 56px
shadows:
  sm: "rgba(0, 0, 0, 0.25) 0px 12px 32px -12px"
elevationStrategy: single-tier
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#1D1D1D"
    textMuted: "#707070"
    border: "#D8D8D8"
    accent: "#707070"
    accentFg: "#FFFFFF"
    focusRing: "#8F8F8F"
    elevation: shadow
  dark:
    bg: "#0B0B0B"
    surface: "#0B0B0B"
    surfaceRaised: "#1F1F1F"
    text: "#767676"
    textMuted: "#6B6B6B"
    border: "#181818"
    accent: "#FFFFFF"
    accentFg: "#0B0B0C"
    focusRing: "#FFFFFF"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on bg = 4.33:1 (needs 4.5:1)"
    - "dark: muted on bg = 3.69:1 (needs 4.5:1)"
    - "dark: text on surface = 4.33:1 (needs 4.5:1)"
components:
  button-text:
    typography: "{typography.button-lg}"
    textColor: "rgb(16, 16, 16)"
    height: 43.7656px
    padding: "8.208px 2.736px 8.208px 2.736px"
  button-text-sm:
    typography: "{typography.body-xs-2}"
    textColor: "{colors.ink}"
    height: 17.2656px
  button-icon:
    typography: "{typography.body-xl}"
    textColor: "rgb(16, 16, 16)"
    height: 87.3906px
    rounded: "50%"
  footer:
    typography: "{typography.body-xl}"
    textColor: "rgb(16, 16, 16)"
    border: "1px solid rgba(16, 16, 16, 0.14)"
    padding: "80px 43.2px 40px 43.2px"
    backgroundColor: "{colors.primary}"
  link:
    typography: "{typography.body-xl}"
    textColor: "rgb(16, 16, 16)"
    padding: "0px 0px 48px 0px"
  link-sm:
    textColor: "rgb(16, 16, 16)"
    fontSize: 12.16px
    fontFamily: duducalligraphy
    fontWeight: 400
    lineHeight: 1.5
states:
  button-focus-visible:
    target: button
    state: focus-visible
    rounded: 1px
  other-focus-visible:
    target: other
    state: focus-visible
    outline: "solid 2px"
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    opacity: 0
  nav-hover:
    target: nav
    state: hover
    opacity: 0.6
  other-hover:
    target: other
    state: hover
    transform: "translate(3px, 3px)"
breakpoints:
  - width: 375
    containerWidth: 335
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 32
    bodyPx: 16
    sectionPaddingX: 23
  - width: 768
    containerWidth: 722
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 46
    bodyPx: 16
    sectionPaddingX: 43
  - width: 1024
    containerWidth: 963
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 61
    bodyPx: 16
    sectionPaddingX: 31
  - width: 1280
    containerWidth: 1203
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 77
    bodyPx: 16
    sectionPaddingX: 31
  - width: 1440
    containerWidth: 1354
    gridColumns: 3
    navLinksVisible: 9
    menuToggleVisible: true
    headingPx: 86
    bodyPx: 16
    sectionPaddingX: 43
coverage:
  statesFound: 28
  gradientsFound: 0
  rolesUnassigned: 0
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Aori Creative

1. Visual Theme & Atmosphere

Aori Creative's design language is minimalist and contemplative, built around a monochromatic foundation that prioritizes legibility and sophisticated restraint. The system uses a dark canvas ({colors.canvas} — #0B0B0B) paired with precise off-white typography, creating high contrast and intentional visual breathing room. Handwritten and custom typefaces (duducalligraphy, faracohand, chicle) inject warmth and personality into an otherwise austere palette, evoking a creative studio's analog origins—sketchbooks, coffee, notes, inspiration boards. The atmosphere is one of focused craftsmanship: calm surfaces, generous whitespace, typography that speaks before decoration, and a color story that lets content and craft dominate. Every detail feels deliberate, with minimal shadows and sharp corners reinforcing a clean, contemporary aesthetic.

Key Characteristics

Dark, neutral canvas with strategic typographic hierarchy
Handwritten and calligraphic typeface family as primary storyteller
Monochromatic palette with no decorative colors
High-contrast text on dark backgrounds for legibility
Sharp corners and minimal elevation; flatness is the default
Generous spacing and whitespace as design principle
Focus on craft and typography over ornamentation

2. Color Palette & Roles

Primary / Brand

Primary ({colors.primary} — #FFFFFF): Used as the primary CTA, brand accent, active state, and hero text on dark backgrounds. The sole bright element in an otherwise muted palette.

Neutral Scale

Canvas ({colors.canvas} — #0B0B0B): Default page background; darkest surface, establishes the base contrast layer.
Ink ({colors.ink} — #767676): Primary text for headings and prominent body copy; mid-tone neutral.
Body ({colors.body} — #6B6B6B): Standard body copy text; slightly darker than ink for reading comfort.
Muted ({colors.muted} — #4A4642): Captions, secondary text, and de-emphasized content; lower contrast tier.
Faint ({colors.faint} — #1F1D1A): Tertiary text, placeholder text, and minimal-emphasis UI; nearly blends with canvas.

Interaction & Semantic

No error, success, or warning semantic colors were declared by the site. The palette is purely tonal; all interactive feedback relies on opacity, transform, and textual cues rather than chromatic signals.

3. Typography Rules

Font Family

Primary Font: duducalligraphy
Fallback stack: duducalligraphy, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Secondary Font: faracohand
Fallback stack: faracohand, Georgia, serif

Accent Font: chicle
Fallback stack: chicle, cursive

All three fonts are custom web fonts integral to brand identity; fallback stacks provide serif/sans options if fonts fail to load.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
display-xl	duducalligraphy	89.28px	400	1.28	1.34px	Hero display; expansive, open tracking
display-lg	duducalligraphy	86.4px	300	1	−1.3px	Large heading; tight, negative spacing
display-md	duducalligraphy	56.16px	300	1.18	0px	Medium display; tight single-line layout
display-sm	duducalligraphy	56px	500	1.5	−1.4px	Uppercase display; tight tracking
display-xs	faracohand	52px	400	1.5	0px	Medium display heading in handwritten style
heading-md	faracohand	34px	400	1.5	0px	Primary handwritten heading; warm serif feel
heading-sm	faracohand	30px	400	1.5	0px	Secondary handwritten heading
heading-xs	duducalligraphy	13px	400	1.85	2.6px	Uppercase small heading; expanded spacing
caption-xl	duducalligraphy	29.808px	400	1	0px	Large caption; compact single-line
caption-lg	duducalligraphy	11.52px	400	1.5	2.07px	Uppercase caption; expanded tracking
body-xl	duducalligraphy	16px	400	1.5	0px	Large body text; reading size
body-lg	duducalligraphy	14.976px	400	1.5	0px	Body text standard
body-md	duducalligraphy	14.72px	400	1.63	0px	Body text default; slightly taller line-height
body-sm	duducalligraphy	14.4px	400	1.62	0px	Small body text; reading-optimized line-height
body-xs	duducalligraphy	14.08px	400	1.63	0px	Extra-small body; tight leading
body-xs-2	duducalligraphy	11.52px	400	1.5	3.23px	Uppercase tiny text; heavily expanded tracking
button-lg	duducalligraphy	27.36px	400	1	1.64px	Large button; uppercase, expanded tracking
button-md	duducalligraphy	11.52px	400	1.5	2.53px	Medium button; uppercase, expanded spacing
button-xl	chicle	50.7586px	400	0.9	0.51px	XL button; accent font, very tight line-height
nav	duducalligraphy	14.72px	400	1.5	0px	Navigation link text

Principles

Calligraphic hierarchy: Custom typefaces dominate; each role has deliberate visual weight, not just size.
Negative tracking: Display sizes employ tight negative letter-spacing (−1.3px, −1.4px) to compress and intensify; body is neutral spacing.
Uppercase expansion: Buttons and captions use uppercase text-transform paired with expanded letter-spacing (2–3.23px) for emphasis and legibility at small sizes.
Line-height breathing: Body text uses line-height ratios of 1.5–1.63 for comfortable reading; display is single-line or 1.28x for density.
No fallback hierarchy: If custom fonts fail, the system breaks intentionally rather than degrading gracefully; this is by design.

4. Component Stylings

Buttons

Button — Text (Large, Primary)

Font: {typography.button-lg} (27.36px, 400, 1x line-height, 1.64px letter-spacing, uppercase)
Text color: #101010
Background: transparent (rgba(0, 0, 0, 0))
Padding: 8.208px 2.736px
Border: 0px solid #101010
Border radius: {rounded.none} (0px)
Box shadow: none
Hover state: transform: translate(3px, 3px) (offset translation)
Focus-visible state: outline: 2px solid var(--color-accent); border-radius: 1px

Button — Text Small

Font: {typography.button-md} (11.52px, 400, 1.5x line-height, 2.53px letter-spacing, uppercase)
Text color: #767676
Background: transparent
Padding: 0px
Border: 0px solid #767676
Border radius: {rounded.none}
Box shadow: none

Button — Icon (Circular)

Font: 16px, 400 weight (not listed in main hierarchy; icon rendering)
Text color: #101010
Background: transparent
Padding: 0px
Border: 0px none
Border radius: {rounded.full} (50%)
Width/height: 87.3906px (square, for circular icon button)

Navigation

Nav Link

Font: {typography.nav} (14.72px, 400, 1.5x line-height)
Text color: Inherits from context
Background: transparent
Hover state: opacity: 0.6 (subtle fade)
Focus-visible state: outline: 2px solid var(--color-accent)

Cards & Containers

Footer (Default)

Background: #FFFFFF
Text color: #101010
Font: {typography.body-xl} (16px)
Padding: 80px 43.2px 40px 43.2px (generous top/bottom, balanced sides)
Border: 1px solid rgba(16, 16, 16, 0.14) (hairline, 14% opacity ink)
Border radius: {rounded.none}
Box shadow: none
Height: 462.891px (defined container)

Focus & Interaction States

Focus-Visible (Button)

Outline: 2px solid var(--color-accent)
Border-radius: 1px (subtle rounding for focus ring)

Focus-Visible (Default)

Outline: solid 2px
Outline-color: initial
Opacity can toggle to 1 for emphasis

Disabled

Opacity: 0.3 (reduced contrast, text barely visible)
Alternative: opacity: 0 (completely hidden)

Hover (Cards/Link Container)

Color: var(--color-accent) or var(--nb-link-hover) (context-dependent accent shift)
Transform: translate(3px, 3px) (offset movement for tactile feedback)
Border-color: var(--color-accent) or var(--color-ink-faint) (subtle highlight)

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Scale:

{spacing.xxs} = 4px — Hairline spacing, minimal gaps
{spacing.xs} = 8px — Small margins, icon-to-text gaps
{spacing.sm} = 12px — Small component padding
{spacing.md} = 20px — Standard component spacing
{spacing.lg} = 24px — Medium section padding
{spacing.xl} = 28px — Large margins between sections
{spacing.xxl} = 40px — Extra-large spacing
{spacing.xxxl} = 44px — Very large margins
{spacing.section} = 48px — Section-level padding and gaps
{spacing.band} = 56px — Full-width band spacing (hero, divider sections)

Usage Context:

Footer padding follows {spacing.xxl} (80px) for top boundary, {spacing.lg} (24px) for sides, reflecting hierarchy of importance.
Link padding uses {spacing.band} (48px bottom) to create generous hit areas and breathing room.
Button padding is minimal ({spacing.xs} territory) to keep glyphs tight and shapes compact.

Grid & Container

Max Width: Responsive, scaled by breakpoint

375px: 335px content width
768px: 722px content width
1024px: 963px content width
1280px: 1203px content width
1440px: 1354px content width

Grid Columns: 3 columns across all breakpoints (consistent 3-column layout, no mobile reflow to 1 column)

Section Padding (Horizontal):

375px: 23px padding-left/right
768px: 43px padding-left/right
1024px: 31px padding-left/right
1280px: 31px padding-left/right
1440px: 43px padding-left/right

Strategy: Padding adjusts to maintain proportional margin relative to viewport, keeping content visually centered and breathing room consistent.

Whitespace Philosophy

Whitespace is not passive; it is a primary design tool. Sections are separated by {spacing.band} (56px) or {spacing.section} (48px), creating rhythm and visual pauses. Generous line-heights ({typography.body-md} 1.63x) add internal breathing within text. Component padding is sparse—buttons have minimal internal padding, links have bottom-only spacing—forcing layout spacing to do the breathing work. The dark {colors.canvas} background amplifies the visual weight of white typography, making even modest spacing feel expansive. Silence (empty space) is valued equally to content.

Border Radius Scale

{rounded.none} = 0px — Default; all buttons, links, containers, images, badges, overlays; sharp, angular aesthetic
{rounded.xs} = 2px — Minimal rounding; focus rings, subtle softening
{rounded.sm} = 14px — Medium rounding (sparingly used, if at all in measured data)
{rounded.full} = 9999px — Circular/pill shape; icon buttons, avatar containers

Component Application:

Buttons: {rounded.none} (sharp, geometric)
Images: {rounded.none} (photo-integrity, no cropping artifacts)
Badges: {rounded.none} (inline labels, sharp edges)
Overlays: {rounded.none} (modal/dialog containers, sharp frames)
Icon buttons: {rounded.full} (circular touch targets)
Focus rings: {rounded.xs} (1px rounding for accessibility outline)

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow, `box-shadow: none`	Default surfaces, typography, most UI
Micro	`rgba(0, 0, 0, 0.25) 0px 12px 32px -12px`	Subtle lift, card or container hover, optional layer

Shadow Philosophy:

The system employs a single-tier elevation strategy based on color-blocking and spatial positioning rather than layered shadows. The canonical shadow (custom sm level) uses a single-layer drop shadow—rgba(0, 0, 0, 0.25) 0px 12px 32px -12px—with a 12px offset, 32px blur, and −12px spread, creating a subtle floating effect without opulence. Most surfaces are flat (box-shadow: none), maintaining the minimalist aesthetic. Depth comes from the monochromatic palette (dark canvas + white text = instant contrast-based hierarchy) and spatial arrangement, not from multiple shadow layers or gradients.

Opacity Levels

1.0 (100%) — Full opacity; default, primary text, interactive states
0.8 (80%) — Slight fade; hover states for navigation, subtle emphasis change
0.55 (55%) — Medium fade; secondary text, reduced emphasis
0.21 (21%) — Heavy fade; borders at low contrast, faint separators
0.0 (0%) — Invisible; hidden disabled elements, overlays with no backdrop

Usage:

Hover states often employ opacity: 0.6 or 0.8 for feedback without color shift.
Disabled interactive elements drop to opacity: 0.3 (readable but de-emphasized).
Borders on canvas use low-opacity ink (rgba(16, 16, 16, 0.14)) for hairline subtlety.

Z-index / Layering

base = 1 — Standard document flow, default surfaces
dropdown = 10, 20, 45, 50, 55, 60 — Cascading layering for menus, popovers, tooltips (granular control for stacking order within dropdown UI)
sticky = 290 — Fixed/sticky navigation, headers; floats above most content

Strategy: Sticky elements (header, nav) live at z-index 290, well above dropdown tiers, ensuring navigation remains accessible during menu interactions. Dropdown tiers (10–60) allow fine-grained control over nested menus or competing overlays.

7. Do's and Don'ts

Do

Use {colors.primary} (#FFFFFF) for CTAs, hero text, and active states; it is the only bright color and should command attention.
Stack typography intentionally; each role (display, heading, body, button) has a distinct size and weight—do not skip hierarchy levels.
Apply uppercase text-transform to buttons and captions; pair with expanded letter-spacing (2–3.23px) for emphasis and legibility.
Embrace sharp corners ({rounded.none}); the system is geometric and angular.
Use {spacing.band} (56px) or {spacing.section} (48px) between major sections; breathing room is structural.
Employ the monochromatic palette as-is; grays from ink down to faint create depth without color.
Keep button padding minimal; rely on section/container spacing for breathing room.
Use opacity (0.6, 0.8) for hover states; it is consistent and performant.

Don't

Do not introduce new colors; the palette is complete and closed.
Do not use rounded corners on buttons, images, or cards; {rounded.none} is non-negotiable except for icon buttons.
Do not create multi-weight hierarchies within a single role; each typography slot is calibrated.
Do not add gradients or overlaid meshes; the system is flat and tonal.
Do not layer multiple shadows; the single micro shadow is sufficient.
Do not add borders wider than 1px; hairlines are the standard.
Do not use capitalize or title-case in buttons; uppercase is required, paired with tracking.
Do not nest interactive elements deeply; focus states should be immediately visible at 2px outline.
Do not deviate from the responsive padding grid; section padding is a measured constraint, not flexible.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Width	Grid Columns	Heading Size (largest)	Body Text	Section Padding (h)	Key Changes
mobile	375px	335px	3	32px	16px	23px	Base mobile layout; navigation visible (no toggle collapse at this size)
tablet	768px	722px	3	46px	16px	43px	Expanded content width, increased padding; heading size scales up
small-desktop	1024px	963px	3	61px	16px	31px	Larger canvas; heading continues to scale; padding slightly reduced
desktop	1280px	1203px	3	77px	16px	31px	Full desktop layout; stable padding
large-desktop	1440px	1354px	3	86px	16px	43px	Maximum content width; heading reaches display-lg scale

Grid Behavior: 3 columns persist across all breakpoints; no mobile-to-desktop column reflow observed. Layout adapts via content width and padding adjustments, not structural reorganization.

Heading Scale: Largest heading (measured as h2/display role) scales from 32px (mobile) → 46px (tablet) → 61px (small-desktop) → 77px (desktop) → 86px (large-desktop), tracking typography hierarchy growth.

Touch Targets

Minimum interactive element size: 44px (industry standard, inferred from icon button dimensions; explicit minimum not extracted but typical for web accessibility).

Button padding and icon button dimensions (87.3906px for circular icon button) exceed minimum; spacing is generous and touch-friendly on small screens.

Collapsing Strategy

Navigation: 9 nav links remain visible across all breakpoints; no collapse to hamburger menu was observed in the extraction. (Recorded in Known Gaps if menu toggle behavior differs.)

Typography: Heading sizes scale fluidly with viewport width rather than stepping at each breakpoint; the ratio adapts smoothly.

Section Padding: Padding adjusts per breakpoint to maintain visual centering and breathing room; layout does not collapse into a single narrow column.

Spacing: {spacing.band} and {spacing.section} remain constant; internal component spacing (button padding, link padding) does not change.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent ({colors.primary} — #FFFFFF): Hero text, buttons, active states, brand mark
Canvas / Page Background ({colors.canvas} — #0B0B0B): Default background
Primary Text / Headings ({colors.ink} — #767676): H1/H2, prominent text
Body Copy ({colors.body} — #6B6B6B): Standard paragraph text
Secondary / Captions ({colors.muted} — #4A4642): Small text, de-emphasized content
Tertiary / Placeholder ({colors.faint} — #1F1D1A): Very small, minimal-emphasis text

Iteration Guide

Typography is the primary design tool. Use {typography.display-xl} (89.28px) for hero, {typography.heading-md} (34px) for section heads, {typography.body-md} (14.72px) for body. Do not skip roles.
Buttons are geometric and minimal. Apply {typography.button-lg} (27.36px, uppercase, 1.64px letter-spacing) for large CTAs, {typography.button-md} (11.52px, uppercase, 2.53px letter-spacing) for smaller buttons. Padding is tight (8px vertical, 2.7px horizontal); let section spacing breathe.
Spacing follows a strict scale. Use {spacing.band} (56px) or {spacing.section} (48px) between major sections. Use {spacing.md} (20px) or {spacing.lg} (24px) for component padding. Never invent spacing values.
Corners are sharp. Apply {rounded.none} (0px) to all buttons, links, images, and containers by default. Only use {rounded.full} for circular icon buttons.
Color is monochromatic. Use {colors.ink} for headings, {colors.body} for body text, {colors.muted} for captions, and {colors.primary} (#FFFFFF) for emphasis. No semantic reds/greens; rely on opacity and text for feedback.
Shadows are minimal and single-layer. Apply rgba(0, 0, 0, 0.25) 0px 12px 32px -12px for subtle hover/card lift; default is box-shadow: none (flat).
Elevation and focus are handled via outline and transform. Use outline: 2px solid var(--color-accent) for focus states, transform: translate(3px, 3px) for interactive hover feedback, and opacity: 0.6–0.8 for hover text/nav.
Padding is context-aware. Footer uses 80px 43.2px 40px 43.2px (generous vertical, balanced horizontal). Links use 0px 0px 48px 0px (bottom padding for hit area). Buttons use 8px 2.7px (minimal, compressed).
Responsive padding adjusts per breakpoint: 375px (23px), 768px (43px), 1024px (31px), 1280px (31px), 1440px (43px). Lock these values; do not scale proportionally outside this grid.
Custom fonts are mandatory. duducalligraphy (primary), faracohand (headings), chicle (accent buttons) are core to identity. Fallbacks are provided, but if fonts fail to load, the system breaks intentionally—do not substitute system fonts mid-render.

10. Known Gaps

No semantic color ramp: The site does not declare error, success, or warning colors. All status feedback is via opacity, text description, or transform; no chromatic error states exist.
No dark/light mode: Only the measured dark theme is defined. Any light-mode behavior is not part of this system.
Interaction states partially documented: Hover, focus-visible, and disabled states are recorded from stylesheets, but active/pressed states and all transient animations (duration, easing, timing-function) are not extracted. Assume 200–300ms ease transitions as defaults, but verify implementation.
Gradients and decorative meshes: None were found. The system is flat.
No explicit minimum touch target sizes: Standard 44px is assumed from accessibility best practice, but no explicit CSS rule was measured.
Navigation collapse behavior unclear: 9 nav links remain visible at all breakpoints in the measured data; no hamburger menu toggle was observed. If a menu toggle exists, its trigger point and styling are not documented.
Surfaces behind authentication: Only the public homepage was analyzed. Login, dashboard, or restricted-access UI is not covered.
Component states beyond hover/focus/disabled: Active, group-selected, indeterminate, or loading states are not measured.
Z-index tiers granular but sparse: Values (10, 20, 45, 50, 55, 60) exist for dropdowns, but the exact component mapping (which element uses z-index: 45 vs. 50) is not specified.
Animation and transition properties: No CSS animation or transition rules were extracted. Assume instant state changes unless otherwise specified during implementation.
Line-height letter-spacing trade-offs: Some typography roles have very tight line-heights (0.9, 1) paired with large font sizes; verify readability on actual content.

Tokens

colors:
  primary:
    value: "#FFFFFF"
    description: "Primary / Brand CTA, active state, brand accent"
  canvas:
    value: "#0B0B0B"
    description: "Canvas — default page background"
  ink:
    value: "#767676"
    description: "Ink — headings and primary text"
  body:
    value: "#6B6B6B"
    description: "Body — standard body copy text"
  muted:
    value: "#4A4642"
    description: "Muted — captions and secondary text"
  faint:
    value: "#1F1D1A"
    description: "Faint — tertiary and placeholder text"

typography:
  display-xl:
    fontFamily: "duducalligraphy"
    fontSize: "89.28px"
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: "1.34px"
  display-lg:
    fontFamily: "duducalligraphy"
    fontSize: "86.4px"
    fontWeight: 300
    lineHeight: 1
    letterSpacing: "-1.3px"
  display-md:
    fontFamily: "duducalligraphy"
    fontSize: "56.16px"
    fontWeight: 300
    lineHeight: 1.18
    letterSpacing: "0px"
  display-sm:
    fontFamily: "duducalligraphy"
    fontSize: "56px"
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: "-1.4px"
    textTransform: "uppercase"
  display-xs:
    fontFamily: "faracohand"
    fontSize: "52px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  heading-md:
    fontFamily: "faracohand"
    fontSize: "34px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  heading-sm:
    fontFamily: "faracohand"
    fontSize: "30px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  heading-xs:
    fontFamily: "duducalligraphy"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: "2.6px"
    textTransform: "uppercase"
  caption-xl:
    fontFamily: "duducalligraphy"
    fontSize: "29.808px"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "0px"
  caption-lg:
    fontFamily: "duducalligraphy"
    fontSize: "11.52px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "2.07px"
    textTransform: "uppercase"
  body-xl:
    fontFamily: "duducalligraphy"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  body-lg:
    fontFamily: "duducalligraphy"
    fontSize: "14.976px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"
  body-md:
    fontFamily: "duducalligraphy"
    fontSize: "14.72px"
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: "0px"
  body-sm:
    fontFamily: "duducalligraphy"
    fontSize: "14.4px"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "0px"
  body-xs:
    fontFamily: "duducalligraphy"
    fontSize: "14.08px"
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: "0px"
  body-xs-2:
    fontFamily: "duducalligraphy"
    fontSize: "11.52px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "3.23px"
    textTransform: "uppercase"
  button-lg:
    fontFamily: "duducalligraphy"
    fontSize: "27.36px"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: "1.64px"
    textTransform: "uppercase"
  button-md:
    fontFamily: "duducalligraphy"
    fontSize: "11.52px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "2.53px"
    textTransform: "uppercase"
  button-xl:
    fontFamily: "chicle"
    fontSize: "50.7586px"
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: "0.51px"
  nav:
    fontFamily: "duducalligraphy"
    fontSize: "14.72px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  md: "20px"
  lg: "24px"
  xl: "28px"
  xxl: "40px"
  xxxl: "44px"
  section: "48px"
  band: "56px"

rounded:
  none: "0px"
  xs: "2px"
  sm: "14px"
  full: "9999px"

shadows:
  sm: "rgba(0, 0, 0, 0.25) 0px 12px 32px -12px"

opacity:
  full: 1
  high: 0.8
  medium: 0.55
  low: 0.21
  none: 0

zIndex:
  base: 1
  dropdown-low: 10
  dropdown-mid-low: 20
  dropdown-mid: 45
  dropdown-mid-high: 50
  dropdown-high: 55
  dropdown-top: 60
  sticky: 290

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from aoricreative.com

Primary

#FFFFFF

Primary CTA, brand accent, active state

Neutral

#0B0B0B

Default page background

#767676

Headings / primary text

#6B6B6B

Body copy

#4A4642

Captions, secondary text

#1F1D1A

Tertiary / placeholder text

Typography · duducalligraphy

hero-display89.28px · 400 · 114.278px

h286.4px · 300 · 86.4px

body11.52px · 400 · 17.28px

link16px · 400 · 24px

caption29.808px · 400 · 29.808px

nav-link14.72px · 400 · 22.08px

display56px · 500 · 84px

display56.16px · 300 · 66.2688px

body14.976px · 400 · 22.464px

body14.4px · 400 · 23.4px

body14.72px · 400 · 23.92px

body14.08px · 400 · 22.88px

body16px · 400 · 28px

body12.8px · 400 · 19.2px

body12.16px · 400 · 18.24px

heading13px · 400 · 24px

caption11.52px · 400 · 17.28px

button27.36px · 400 · 27.36px

button11.52px · 400 · 17.28px

Typography · faracohand

heading34px · 400 · 51px

body25px · 400 · 37.5px

body15.12px · 400 · 22.68px

display52px · 400 · 78px

heading30px · 400 · 45px

body15.2px · 400 · 22.8px

body26.22px · 400 · 39.33px

Typography · chicle

button50.7586px · 400 · 45.6827px

Spacing

4px

8px

12px

20px

24px

28px

40px

44px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 12px 32px -12px

Components · 3

Remixes of aoricreative.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it