Brand Guidelines

The A.S.F. mark is the primary identifier, shown here with the A.S.F.RECS logo and the texture variant. Keep clear space equal to the height of one square; never redraw, rotate or recolor.

Minimum size: 24px height on screen.

Three families carry the whole brand. Söhne (Klim Type Foundry) speaks every interface voice. Martina Plantijn sets English long-form reading. FOT-Cezanne ProN sets Japanese. Every Latin cut is licensed and self-hosted as woff2 — no foundry CDN, and every weight the stylesheet asks for is mapped to a real file, so the browser never fakes a bold or an italic.

Kräftig stands. Buch reads and lists.

Two weights carry the whole site. One rule decides which, and it is written into the stylesheet and audited against the rendered pages, not left to taste. A third weight is a third opinion; the page is calmer without one.

1. Article 1

   Kräftig (500) is everything that stands. The title of a page or view — the h1, a product name, a display headline such as OUT OF CLUB. Chapter headings at 24/32: section titles, legal block titles, the numbered titles on this page. Artist and DJ names. Eyebrow words such as BIO and the category markers. The top tabs and the black bands in the controller, because each one names a face of the site. Controls that act — buttons, sizes, Join.

2. Article 2

   Buch (400) is everything that reads or queues. Body copy, working lines and leads — a lead stands by its size, not its weight. Data rows: track titles, label names, chart positions. Display dates. The links inside the controller, which are a list of destinations under a band that stands. Meta and captions. Chrome: signatures and practical notes. English words embedded in Japanese.

3. Article 3

   Martina Plantijn is English long-form reading. Label writing and artist biographies. English that is not reading — working lines, data, controls — stays in Söhne. Japanese stays in Cezanne and stays outside the weight argument, because there is no real bold to reach for.

4. Article 4

   An exception must carry its reason. Written next to the declaration, in the stylesheet, at the moment it is made.

In practice

• Page titleKräftig 500
• Chapter headingKräftig 500
• Artist name, BIOKräftig 500
• Top tabKräftig 500
• Controller bandKräftig 500
• Controller linkBuch 400
• Body, data row, dateBuch 400
• English long-formMartina Plantijn 400

Sizes come from one ladder and leading is a multiple of eight. A size that is not on the ladder needs a written reason; without one it is a bug, not a decision.

• 11 / 16Chart label line — one step under Caption
• 12 / 16Captions, labels, chrome — the most common size on the site
• 14 / 21Top tabs, at the Klim lozenge ratio — and the working lines that read at the same rank: price, variant, tracklist, credit
• 14 / 24Chart artist line
• 16 / 24Body
• 24 / 32Chapter headings, category markers, leads
• 40Display — the NEXT PARTY date. 40/40 on a phone, 40/44 on a desktop
• 48 / 80The A.S.F. / A.S.F.RECS wordmark — 48 on a phone, 80 on a desktop

Martina keeps its own two steps — 17/24 for body and 26/32 for a lead — sized so the serif’s x-height matches Söhne at 16.

Two steps are written exceptions. The page title is the one fluid size, running from 30 on a phone to 44 on a desktop. And a single over-long cell in the chart may be shrunk below 11 to hold its line, down to a floor of 8 — one cell at a time, never the column.

Ink

Two tones of black and nothing between them. #000 carries meaning. rgba(0,0,0,.55) is the second rank — signatures, notes, muted meta. White type appears only on solid black. Signal Orange is a single event per screen, never a colour scheme.

Every mark on the page means one thing, and it means it everywhere.

• Frame A border means you can press it. Nothing decorative is ever boxed.
• Rule A hairline divides. Lists and cards carry a top rule instead of a box.
• Arrow An arrow states position or direction. closed, open, ↗ leaves the site. Plus and minus are arithmetic, not opening and closing, so we do not use them.
• Lozenge The current choice inverts into solid black with a 2px radius, and it inverts instantly — no transition. A selected thing is a fact, not an animation.
• Radius Every solid-black rectangle takes the same 2px: buttons, the selected tab, and the bands inside the controller. Photographs, video letterboxing and round controls keep their own shape.

Void Black #0A0A0A. Paper White #F5F5F5. Surface Gray #EAEAEA — the footer ground. Signal Orange #FF5A1F — orange appears once per screen, never more. Hairlines at 15% and 35% black.

Everything sits on an 8px base grid inside a 1400px frame. Whitespace is part of the design — do not fill it.

For logo files, flyer assets or press inquiries: booking@asf3000.com