---
title: "Alejandro Mejias design system"
variant: extended
source: https://www.alejandromejias.com.au/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/alejandromejias-com-au)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Alejandro Mejias · Design System

> Quiet editorial structure, punctuated by electric yellow.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.alejandromejias.com.au/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A designer portfolio that pairs spacious, gallery-like case studies with a vivid yellow biography and a dark, sculptural contact close. Monospaced labels and oversized display type give the long page a precise, print-editorial rhythm.

## North star

Keep the page quiet and sharply organized until a deliberate full-width colour or media moment changes its pace.

## Overview

The visual system is built around a white canvas, near-black typography, and a large, uninterrupted #ebff00 biography and secondary-work band. The yellow is a defining structural colour rather than a small decorative accent; it is reserved for the portfolio’s mid-to-late page, small status details, and calls to action. Be Vietnam Pro carries readable body copy, while IBM Plex Mono supplies compact, uppercase labels, navigation, metadata, and award details. A distinctive raster display face gives major headings a pixel-like character and strong contrast against the restrained text. The opening is airy and nearly monochrome, with fine horizontal rules separating project entries and generous space around large media. Case-study images retain their own colour, functioning as framed project evidence rather than a competing site palette. The bio section shifts to bold, oversized type and profile photography. A near-black contact footer reverses the page’s tone and highlights the final invitation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#080707` | `--color-soft-ink` | brand | Primary text, dark contact and footer bands, and selected inverse surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and open background around the featured case studies. |
| Electric Citron | `#ebff00` | `--color-electric-citron` | accent | Large other-work and biography bands, plus compact status and call-to-action accents. |
| Studio Grey | `#c8c8c8` | `--color-studio-grey` | surface | Neutral project-card media surfaces; keep it secondary to actual case-study imagery. |
| Olive Frame | `#505e45` | `--color-olive-frame` | surface | A muted project-card surface seen with the Eclat work, not a dominant site-wide colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#080707` (Soft Ink) · `--color-surface-2` → `#c8c8c8` (Studio Grey) · `--color-surface-3` → `#505e45` (Olive Frame) · `--color-text` → `#080707` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080707` | `#ffffff` | 20.12:1 | AAA |
| `#080707` | `#c8c8c8` | 12.03:1 | AAA |
| `#080707` | `#505e45` | 2.9:1 | fail |
| `#ffffff` | `#080707` | 20.12:1 | AAA |
| `#ffffff` | `#c8c8c8` | 1.67:1 | fail |
| `#ffffff` | `#505e45` | 6.94:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Be Vietnam Pro | `--font-body` | webfont | 400 | Body copy and standard case-study descriptions and links. | Manrope |
| IBM Plex Mono | `--font-mono` | webfont | 600, 500 | Navigation, metadata, captions, section labels, and compact award or service details. | IBM Plex Mono |
| FK Raster Grotesk Compact Trial Sharp | `--font-display` | webfont | 400 | Large display headings, notably the oversized biography title. | Silkscreen |

- **Be Vietnam Pro:** Regular weight and natural sentence case; keep body text compact and easy to scan.
- **IBM Plex Mono:** Medium and semibold; uppercase labels with visibly expanded tracking.
- **FK Raster Grotesk Compact Trial Sharp:** Regular weight; distinctive pixel-like display texture, used sparingly for headline impact.

### Type scale — Custom (ratio ≈ 1.732, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | 0.042em | — | FK Raster Grotesk Compact Trial Sharp | Hero and oversized biography display headings. |
| h2 | 32px | 400 | 1 | 0 | — | FK Raster Grotesk Compact Trial Sharp | Major section headings and featured-work titles. |
| body | 16px | 400 | 1.4 | 0 | — | Be Vietnam Pro | Portfolio summaries, biography copy, and explanatory text. |
| caption | 14px | 600 | 1.2 | 0.086em | uppercase | IBM Plex Mono | Compact uppercase project labels and metadata. |
| link | 16px | 400 | 1.4 | 0 | — | Be Vietnam Pro | Readable case-study and award-related inline links. |
| eyebrow | 14px | 600 | 1.2 | 0.086em | uppercase | IBM Plex Mono | Navigation and small uppercase section identifiers. |
| code | 14px | 600 | 1.2 | 0.086em | uppercase | IBM Plex Mono | Monospaced uppercase labels and terse data-like details. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 16, 24, 48 px.
- Section rhythm 48px · element gap 10px · card padding — · max content width 1397px.

A long, comfortable-density portfolio with a measured maximum content width of 1397px. Navigation and project metadata align to the page edges, while case studies use broad media layouts: paired columns for the first projects and a full-bleed presentation for Crown. Fine rules divide the white editorial sections. A four-column other-work area and asymmetric biography content introduce a more graphic rhythm. Maintain the measured 48px section gap and use the supplied spacing scale rather than inventing new values.

## Shape & elevation

- Radius: button `9999px` · media `24px` · link `4px` · xs `2px` · sm `4px` · md `24px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is mostly flat: white and yellow bands meet cleanly, and fine horizontal hairlines organize content without shadows. Media is presented as broad rectangular panels, with the measured 24px media radius available where appropriate; project cards themselves read as square-edged. Layering comes from overlapping artwork and the 3D hero object, not from elevated interface cards.

## Imagery

Large project imagery is the primary content: interface mockups, app screens, and a broad Crown website presentation sit within clean rectangular media areas. The hero features a dark, dimensional 3D form against white; the contact area repeats that sculptural motif on black. The biography uses a direct portrait, while the other-work band layers project imagery. Preserve the vivid colours inside case-study art as artwork, not as extra brand colours.

## Components

### Utility navigation

A slim white top row with the designer name, centered work/about/contact links, and a compact yellow local-time pill.

### Featured case study

Project title and year sit above a large image arrangement; description, mono category chips, case-study link, and a small pagination cue follow.

### Project category chips

Small uppercase monospaced labels on yellow, used to identify disciplines without turning the page into a dense badge system.

### Other-work gallery

An electric-yellow field with centered, layered project artwork and simple opposing section labels.

### Biography block

Oversized raster-style heading above a ruled, editorial text layout, followed by a centered portrait and service details.

### Contact close

A near-black final section combines a concise invitation, the recurring 3D form, and separated video-call, email, and social rows.

### Measured component styles

- **Primary button** (“BOOK A CALL”): background #ebff00 · text #0000ee · radius 94px · padding 4px 16px 4px 4px · 400 12px sans-serif
- **Secondary button** (“BOOK A CALL”): background #080707 · text #0000ee · radius 4px · padding 4px 16px 4px 4px · 400 12px sans-serif
- **Link** (“WORK ©”): transparent background · text #0000ee · radius 4px · padding 8px 16px · 400 12px sans-serif
- **Card**: background #c8c8c8 · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the default canvas for featured work.
- Reserve Electric Citron (#ebff00) for clear, intentional colour shifts.
- Use IBM Plex Mono for compact uppercase labels and metadata.
- Let case-study media occupy broad, uncluttered areas.
- Separate content groups with restrained hairlines.
- Finish with a high-contrast near-black contact section.

## Don't

- Do not add gradients or decorative shadows.
- Do not spread Electric Citron across every section.
- Do not turn project imagery into generic thumbnails.
- Do not use the raster display face for long paragraphs.
- Do not add rounded cards where the layout is square-edged.
- Do not crowd the open white sections with extra UI.

## Agent prompt

Build a new designer-portfolio page in this visual language. Use Gallery White (#ffffff) as the main canvas and Soft Ink (#080707) for text, rules, and the closing contact band. Introduce Electric Citron (#ebff00) as a deliberate, high-impact section background and a compact CTA accent, not as a constant highlight. Use Be Vietnam Pro for readable copy, IBM Plex Mono for tracked uppercase labels and metadata, and a pixel-like display face for only the largest headings. Arrange work as spacious, media-led editorial entries with thin separators and clear project details. Keep project artwork true to its source colours; treat Studio Grey (#c8c8c8) and Olive Frame (#505e45) as occasional media surfaces. Avoid gradients, heavy shadows, and unnecessary card chrome. End with a dark, concise contact invitation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Spacious white hero with compact top navigation, left-aligned introduction, centered 3D object, and anchored side details. | Primary navigation, Persistent call-to-action, Scroll cue | Mono navigation labels, Yellow time pill, 3D hero object, Floating contact button |
| 2 | product-showcase | Two-column case-study media below a compact project title and year row. | Case-study link, Project metadata | Paired image panels, Thin dividers, Yellow category labels |
| 3 | product-showcase | Two-column project imagery with title and year above and a compact details row beneath. | Case-study link, Project metadata | Olive-toned project imagery, Mono labels, Hairline separators |
| 4 | product-showcase | Full-bleed media with the project name and year, then a compact summary and link. | Case-study link, Project metadata | Wide image presentation, Minimal framing, Rule-separated details |
| 5 | gallery | Four-column section on a full electric-yellow band, with central layered artwork. | Browse additional projects | Electric-yellow backdrop, Overlapping project imagery, Large display heading |
| 6 | team | Full-bleed yellow biography with oversized title, editorial copy, and centered portrait. | Read biography, View service offerings | Raster display typography, Ruled content rows, Portrait photography |
| 7 | other | Compact single-column yellow continuation with four award or mention entries. | Outbound award links | Small inline link marks, Structured text rows, Thin rules |
| 8 | logo-cloud | Four-column logo list across the bottom of the yellow content band. | Scan client names | Monochrome logo marks, Even multi-column alignment |
| 9 | cta | Full-width dark section with left-aligned invitation and a large sculptural visual. | Start a conversation, Contact options | Near-black background, 3D motif, Subtle horizontal dividers |
| 10 | contact | Near-black footer rows for video call, email, social channels, and small closing details. | Book a call, Copy or open email, Social links | Yellow call control, Separated contact rows, Compact footer metadata |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/alejandromejias-com-au