Design System: Yun C. Sawa Academic Portfolio

1. Overview

Creative North Star: “The Research Dossier”

This site uses the Academic Pages visual system as a quiet frame for a focused computational-genomics research story. The design should feel precise, technical, and ambitious without becoming loud: white space, system typography, restrained borders, and a single blue link accent keep attention on evidence such as algorithms, pipelines, publications, and current UCI Ph.D. research.

The system rejects the PRODUCT.md anti-reference, “dense CV dump.” Chronology belongs on the CV page; the homepage should curate fit, technical range, and research direction so faculty, labs, collaborators, and biotech recruiters can quickly see the through-line from long-read genomics and repeat biology to translational cancer research.

Key Characteristics:

• Restrained academic shell with strong editorial hierarchy inside the content.
• Neutral gray typography and borders, with blue reserved for navigational and evidence links.
• Compact, readable sections that turn credentials into a coherent research narrative around long-read genomics, repeat-rich regions, telomeres, spatial biology, and oncology.
• Lightweight interaction states: underlined links, modest hover shifts, and no decorative motion.

2. Colors

The palette is a neutral academic foundation with one practical blue accent for links and navigational affordances.

Primary

• Research Link Blue (#52adc8): Used for links and information actions. It should remain rare enough that every blue item reads as clickable evidence.

Neutral

• Paper White (#ffffff): The main page and content background.
• Code White (#fafafa): Code and low-emphasis technical surfaces.
• Charcoal Text (#494e52): Main readable body text.
• Muted Academic Gray (#7a8288): Secondary text, masthead links, and default button surfaces.
• Hairline Border (#f2f3f3): Dividers, masthead border, avatar frame, and section rules.
• Mid Border Gray (#bcc1c4): Inverse button border and dropdown framing.

Named Rules

The Evidence Blue Rule. Blue is for links and evidence paths only. Do not use the blue accent as decoration.

The White Page Rule. Keep the academic portfolio on white or near-white surfaces. Do not introduce heavy tinted backgrounds unless the whole visual identity is being redesigned.

3. Typography

Display Font: system sans-serif stack, starting with Apple system fonts and falling through Roboto, Segoe UI, Helvetica Neue, Lucida Grande, Arial, sans-serif. Body Font: the same system sans-serif stack. Label/Mono Font: Monaco, Consolas, Lucida Console, monospace, used only for code-like content.

Character: The typography is utilitarian and research-forward. It should read like a clean technical dossier, not a magazine feature or startup landing page.

Hierarchy

• Display (700, 2.441em, line-height 1): Reserved for page titles and major identity moments.
• Headline (700, 1.953em, line-height about 1.2): Used for major page sections.
• Title (700, 1.25em, line-height about 1.3): Used for compact section titles, author names, and cards.
• Body (400, 1em, line-height about 1.5): Used for paragraphs and list content. Keep prose in short paragraphs with a practical 65-75ch reading width.
• Label (700, 0.75em, line-height about 1.4): Used for buttons, metadata, and compact interface text.

Named Rules

The Scan First Rule. Every page must be understandable by headings alone before a reader commits to body text. On the homepage, headings should expose the current research axis: computational genomics, technical range, and translational context.

4. Elevation

The system is flat by default. Depth comes from spacing, borders, dividers, and hierarchy; shadows are reserved for transient overlays such as the mobile author links dropdown.

Shadow Vocabulary

• Dropdown Shadow (0 0 10px rgba(0, 0, 0, 0.25)): Used only for temporary overlay menus where separation from the page is necessary.
• Tiny Shadow (0 1px 1px rgba(0, 0, 0, 0.125)): Available as a legacy token, but should not be used to decorate content blocks by default.

Named Rules

The Flat Evidence Rule. Research content does not need cards or heavy shadows to feel important. Use hierarchy and edited copy first.

5. Components

Buttons

• Shape: Gently squared academic control (4px radius).
• Primary: muted gray background (#7a8288), white text, compact padding (0.5em 1em), bold 0.75em label.
• Hover / Focus: darken the background. Preserve visible focus styling; do not remove browser focus without replacement.
• Inverse: white background, muted gray text, mid-gray border, used for the mobile author “Follow” control.

Cards / Containers

• Corner Style: minimal radius only where a contained control or overlay needs it (4px).
• Background: white by default.
• Shadow Strategy: flat at rest; avoid content cards unless grouping truly improves scanning.
• Border: one-pixel hairline borders (#f2f3f3) for masthead and section dividers.
• Internal Padding: use the existing scale: 0.5em for controls, 1em for page gutters, 2em for major vertical separations.

Navigation

• Style: compact masthead with a one-pixel bottom border, system sans links, and clear spacing.
• Default / Hover: masthead links use muted gray and darken on hover.
• Mobile Treatment: author links collapse behind the existing “Follow” button and open as a bordered dropdown.

Author Profile

• Avatar: circular image, max 175px, with a subtle padded border on desktop.
• Bio: short, role-forward, and kept readable at sidebar scale.
• Links: direct evidence and contact paths. Avoid adding decorative social links that do not help admissions, research, or recruiting readers.

6. Do’s and Don’ts

Do:

• Do lead with current UCI Ph.D. research, technical range, and direction before chronology.
• Do use headings and short paragraphs to turn credentials into a scannable story.
• Do preserve specific evidence from the resume: ONT long-read data, rDNA structural variation, telomere modeling, T2T assembly, spatial/single-cell genomics, and peer-reviewed oncology work.
• Do keep links visibly underlined in content; they are evidence paths.
• Do preserve the restrained academic shell unless a full redesign is explicitly requested.
• Do meet WCAG AA contrast for text and focus states.

Don’t:

• Don’t create a dense CV dump.
• Don’t paste long undifferentiated resume bullets onto the homepage.
• Don’t flatten the profile into generic “bioinformatics” when the resume has stronger specificity: repeat-aware genomics, long-read sequencing, pipelines, and cancer biology.
• Don’t add flashy startup-style gradients, oversized hero claims, or decorative card grids.
• Don’t use blue as ornament; blue means link or action.
• Don’t hide important research evidence behind vague adjectives like “innovative” or “passionate.”