Show a content layout
Brand · v1.5.0
One brand, two registers.
Paper is how ASF publishes; Ink is how ASF convenes. Both share one logo family, one ink and one teal-to-mint signal family. Use the files below for anything that carries the ASF name.
ASF brand system v1.5.0 · 2c1ccf0
Registers
Which one to use
Pick a register before anything else.
Register A · Paper
How ASF publishes
- Website, publications, reports, PDF
- Accent: teal — text-safe on paper
- Editorial, durable, evidence-first
Register B · Ink
How ASF convenes
- Events, LinkedIn, stage slides, podcast covers
- Accent: mint — on dark grounds only
- Partner events: host template for cover and thank-you only
Colour
Colour tokens
Copy a token name for code, or read the hex value for other tools.
Signal ramp — shared
--asf-signal-600#137B70--asf-signal-400#29DDDA--asf-signal-300#62D7BF--asf-signal-200#16FFBBInk — ground, raised, rule
--asf-ink-900#0B0F19--asf-ink-800#16212C--asf-ink-700#263241--asf-on-ink#EEF5F2--asf-on-ink-muted#B9CBC0Paper
--asf-paper#F4F1E9--asf-surface#FFFFFF--asf-rule#D7D2C7--asf-muted#5F6971Status — Paper / Ink
--asf-positive-paper#137B70--asf-positive-ink#16FFBB--asf-info-paper#1F6FA8--asf-info-ink#37A7E7--asf-warning-paper#8A6100--asf-warning-ink#F1C84B--asf-critical-paper#B3261E--asf-critical-ink#FF8A7ATypography
Type roles
Display serif, humanist body, mono metadata (11px floor) and Spline Sans for the brand.
--asf-text-meta · 11pxDialogue becomes evidence.--asf-text-xs · 12pxDialogue becomes evidence.--asf-text-caption · 13pxDialogue becomes evidence.--asf-text-sm · 14pxDialogue becomes evidence.--asf-text-ui · 15pxDialogue becomes evidence.--asf-text-md · 16pxDialogue becomes evidence.--asf-text-body · 17pxDialogue becomes evidence.--asf-text-lg · 18pxDialogue becomes evidence.--asf-text-xl · 20pxDialogue becomes evidence.--asf-text-2xl · 24pxDialogue becomes evidence.--asf-text-h3 · 28pxDialogue becomes evidence.--asf-text-3xl · 32pxDialogue becomes evidence.--asf-text-4xl · 48pxDialogue becomes evidence.Logo
Logo files
Logo lockups and ring-marks for every register. The ASF Signature r3 avatar below is for social, newsletter and partner avatars only.
Avatar
Social avatar · ASF Signature r3
For LinkedIn, newsletter and partner avatars. Standard ≥ 160px · Compact < 160px · Ink only · 300×300 PNG, circle-crop safe.
Templates
Presentation templates
Editable example decks for ASF presentations: Paper for publishing, Ink for convening. Sample data, photo and contact slots are placeholders, not ASF facts.
Show a content layout
Built on ASF brand v1.2.2. Set in Georgia, Arial and Courier New (used here in place of Consolas for metadata); fonts are not included. ASF marks remain ASF identity assets; use these files for authorised ASF presentations.
Icons
Icon set
24px grid, 1.7 stroke, always paired with a text label.
Links
Action Links
Every operation link carries one leading purpose glyph, its label and a trailing arrow. Downloads keep the download glyph and have no arrow. Purpose is declared per link, never guessed from the address.
The LinkedIn mark is a third-party trademark (LinkedIn Corporation), not an ASF icon: official black file on Paper, white on Ink, unmodified, used only to link to the ASF LinkedIn page.
In code
Using the tokens
Declare a register, then use register-resolved variables.
<link rel="stylesheet" href="asf-tokens-v1.5.0.css">
<section data-register="ink">
<p style="color: var(--asf-kicker)">Session 3</p>
<a style="background: var(--asf-accent); border-radius: var(--asf-radius-control)">Register</a>
</section>