Cross Angel Street · Design reference

Brand guidelines.

One place to review the rules for every page, design study and future release. The principles below are the standard; the examples show how they should feel in use.

Read the rules
21

rules across
three sections

One service. Two terms.
Light and dark by design.

01 / 03

Identity and expression

The approved visual direction pairs a wing-page symbol with vivid colour, generous space and confident type.

The name and idea

Always use all three words: Cross Angel Street. The literary reference should suggest safekeeping and publishing with a subtle Gothic edge. Avoid literal horror or religious imagery.

The mark

One open-book and angel-wing silhouette, not a separate book inside wings. Each wing has four feather tiers; the spaces between them reveal the background.

P3 · Light mode

Warm publishing paper with a vivid symbol and confident digital colour.

Background · Warm ivory

Primary surface and feather gaps

#FFF8E8

Symbol · Vivid vermilion

Large mark and substantial graphics

#FF3D1F

Primary · Electric cobalt

Wordmark and high-emphasis text

#1747FF

Secondary · Saturated violet

STREET and restrained accents

#7C2CFF

P4 · Dark mode

Near black with acid green and electric magenta; white carries ordinary text.

Background · Near black

Primary surface and feather gaps

#080808

Symbol · Acid green

Wing-page mark and large accents

#BFFF00

Primary · White

Wordmark and essential text

#FFFFFF

Secondary · Electric magenta

STREET and restrained accents

#FF2DAA

Display direction

Keep what matters.

Bold geometric sans-serif · open counters · confident weight

Typography and lockups

Use a bold geometric sans-serif for CROSS ANGEL. Set STREET smaller, widely tracked and uppercase. The final family has not been selected or licensed; this specimen shows the direction, not final typeset artwork.

C2 stacks the mark above the wordmark. C5 places a compact mark to its left for tight horizontal spaces such as the site header. On this website, either lockup belongs only in the header or footer. Use the symbol alone for favicons and social avatars.

2026 · £25 · 100

Use fixed-width digits with a slashed zero wherever numbers appear.

Colour discipline

Use each palette as a complete set. Keep the mark and wordmark fully opaque, with flat colour and open feather gaps. Avoid gradients, glows, metallic effects and shadows. For one-colour production, use solid black or white.

Scale and artwork

Allow clear space around a lockup at least equal to the cap height of STREET. Switch to the symbol alone when STREET is too small to read; keep feather tips clear of avatar crops. Final vector artwork and the licensed font are still to be prepared and checked at small sizes.

Legible by design

In P3, use cobalt or violet for small text; vermilion is for the large mark and substantial graphics. In P4, use white for ordinary text. Keep meaningful words as live HTML text, never baked into artwork.

  1. 01

    Name and placement

    Write Cross Angel Street in full. Keep the complete logo and symbol only in a page header or footer; never repeat them in body content.

  2. 02

    Wing-page identity

    The single mark reads as an open book and uplifted wings, with a central V-shaped spine and exactly four feather tiers per wing. Preserve the open feather gaps.

  3. 03

    Rounded throughout

    Give every visible corner a curve, including panels, fields, decorative shapes and illustrations. Avoid 90-degree angles.

  4. 04

    Pill controls

    Every button and button-styled link has fully rounded ends in every interaction state.

  5. 05

    Numerals

    Set all visible digits in a fixed-width face with a slashed zero, including prices, dates, counts and step numbers. The final brand sans-serif remains to be selected.

  6. 06

    Editorial case

    Write subheadings in sentence or mixed case. Do not set them in all caps. The wordmark retains its established form.

  7. 07

    Page structure

    Use one main H1 and no more than three headed content sections on a page. The H1 is outside that count.

02 / 03

Interaction and access

A visitor should understand what is clickable, move with a keyboard and use the site in either theme.

  1. 08

    Link cues

    Every link is underlined at rest, underlined on both hover and focus, or carries a visible ↗ arrow. A colour change alone is not enough.

  2. 09

    Arrow exception

    Any link may use ↗ in place of an underline, including a button-styled link. The arrow never replaces meaningful link text.

  3. 10

    Native navigation

    Use links for navigation and buttons for page actions. Keep browser back, forward, copy link and open-in-new-tab behaviour.

  4. 11

    No scripted scrolling

    Never use JavaScript to move the page. Native fragment links, including “Skip to content”, are allowed.

  5. 12

    Mobile layouts

    Reflow for narrow mobile through desktop. Avoid horizontal overflow, overlap, clipping and tiny text.

  6. 13

    Two complete themes

    Every page and state works in light and dark. Follow the device setting by default and offer a visible manual switch. Remember the visitor’s choice across visits.

  7. 14

    Accessible by default

    Use a logical heading order, readable contrast, visible focus, keyboard access and layouts that work at 200% zoom.

  8. 15

    One shared footer

    Use the same footer component and core links on every public page, including privacy, sitemap, design studies and 404.

03 / 03

The offer and release check

Pricing needs the same clarity as the interface. One service is offered with two purchase terms.

Annual message A

£20 per year + VAT

Annual message B

£25 per year all in

Separate five-year offer

£100 including VAT

One year free compared with five years at £25 all in.

  1. 16

    One service

    Describe one Cross Angel Street service, offered for an annual or five-year term. Do not imply different feature tiers.

  2. 17

    Signup on every page

    Place a clear signup link beside an annual price on every page. Its destination must be a working form or sheet before it is called a signup.

  3. 18

    Annual copy tests

    Use either “£20 per year + VAT” or “£25 per year all in” as the annual message. Keep the exact price and tax treatment consistent through signup.

  4. 19

    Separate five-year offer

    Present the five-year term on its own offer page at £100 including VAT. “One year free” compares it with five years at £25 per year all in (£125).

  5. 20

    Clear commitment

    Before signup, show both terms, complete prices and tax treatment. Do not suggest that the current interest page accepts a signup or payment.

  6. 21

    Review before release

    Check every rule in both themes, at mobile and desktop sizes, with keyboard navigation and at 200% zoom before publishing.

Open item

The service signup form or sheet has not been supplied yet. This page is a design reference, and the current interest page does not accept a signup.

For now

Annual messaging shown here is for review. See the current interest page