Headings & type scale Use now
Use the real heading levels — H1 for the page title, H2 for sections, H3 for subsections. They render at the brand's golden-ratio (φ) scale, a clear step from one level to the next. Don't fake a heading with bold text — use the level, so structure survives for screen readers.
Body text follows the smallest heading, in the serif family.
Section header — a thin underline marks a new section
<h2>Your application</h2>
<p>Tell us about your goals…</p>
<h3>Personal information</h3>Body & prose Use now
Ordinary paragraphs render in the YaleNew serif at a comfortable reading measure. Just write paragraphs — the brand handles the spacing and line length. Don't use blank lines or <br> for spacing between ideas; use separate paragraphs.
We read every application closely. Tell us what you want to do and why Yale SOM is where you want to do it — in your own voice.
Each paragraph is its own block, so spacing and rhythm hold up on a phone and for a screen reader.
<p>We read every application closely…</p>
<p>Each paragraph is its own block…</p>Pull-quote — <blockquote> Use now
The one content pattern witnessed on a real Yale SOM portal page. A blockquote renders as an indented pull-quote with a left rule (weight, not colour) and automatic quotation marks — you don't type the quote marks.
We educate leaders for business and society.
— Yale School of Management
<blockquote>
<p>We educate leaders for business and society.</p>
<span class="quote-attribution">— Yale School of Management</span>
</blockquote>Lists Use now
Use a real list for anything you'd bullet or number — don't type bullet characters at the start of paragraphs. Real lists announce their length and structure to screen readers.
- A résumé or CV
- Two recommendations
- Transcripts from every institution
<ul>
<li>A résumé or CV</li>
<li>Two recommendations</li>
</ul>Dividers — <hr> Use now
A plain horizontal rule renders as a 2px black divider — weight, not colour (never a blue line). Use it where one topic genuinely ends and another begins; a heading usually carries structure better, so keep rules rare.
…end of the deadlines section.
Start of the requirements section…
A heavier .hr--thick rule, for a deliberate strong break.
<hr>
<hr class="hr--thick">Links Use now
Links are brand blue and underlined — colour is reserved for interaction, so a blue underline always means "this is a link." Write link text that describes its destination; never "click here."
Review the application requirements before you begin.
Review the <a href="/apply/requirements">application requirements</a> before you begin.Tables Use now
Use a table for real data (deadlines, requirements) — with a header row marked as <th> so screen readers can read it by column. Don't use tables for layout, and avoid fixed pixel widths — they break on phones (let the table size itself).
| Round | Deadline | Decision |
|---|---|---|
| Round 1 | September 10 | December 10 |
| Round 2 | January 5 | March 25 |
<table class="apply-dates-table">
<thead><tr><th scope="col">Round</th><th scope="col">Deadline</th></tr></thead>
<tbody><tr><td>Round 1</td><td>September 10</td></tr></tbody>
</table>Callouts — .alert--grey Coming
A neutral "Note:" callout exists in the stylesheet but isn't yet proven to render correctly on the apply surfaces, so it's held behind a quick render-proof. When it lands, the neutral variants will be .alert--grey / .alert--status — not .alert--secondary (solid brand blue, high-emphasis), and .alert--warning / .alert--error stay for true validation messages. Until then, write the note as a normal paragraph.
Preview only — this pattern is not yet available for content. The render-proof is the gate.
<div class="alert alert--grey">
<div class="alert__message">The official résumé template is required.</div>
</div>Colour & weight
A governed working subset of the official Yale SOM palette, in the Storybook names. Colour = interaction: Vibrant Blue marks links and focus, never decoration. Weight = structure: dividers and emphasis use Black; Gray is secondary text. Yale gold and green are reserved for print and are withheld from the web entirely.
Storybook names, verified vs the live som_2025 source. (“Vibrant Blue” is sometimes called “Action Blue.”)
Using this in Slate
In the Form Builder, paste a snippet into a content block's Source HTML (the <> view). Everything here is plain semantic HTML or a real shipped brand class — no inline styles to fight the brand. Run it through AFINA first to clean any pasted-in cruft.
For the byte-faithful, maintainer-facing source of truth — every token, the full palette, the responsive rails — see the Design System reference. For the written rationale behind every pattern here, see CONTENT_PATTERNS_FOR_EDITORS.md.