# The Skyfallen Company brand guide Canonical site: https://brand.skyfallen.com/ Asset manifest: https://brand.skyfallen.com/brand-assets.json Design tokens: https://brand.skyfallen.com/design-tokens.json Brand enquiries: brand@skyfallen.com This is the canonical text-first companion to the visual brand guide. It is intended for people and coding agents implementing Skyfallen-branded websites, interfaces and communications. ## How to use this guide - Read the complete guide before implementing a branded surface. - Use the exact values in `design-tokens.json` or `brand-tokens.css`. - Select artwork only from `brand-assets.json`. - Never recreate a logo with text, redraw it, recolour it, crop it or alter its proportions. - When this guide does not cover a requested treatment, contact `brand@skyfallen.com` instead of inventing a new rule. ## Principles The Skyfallen Company identity is direct, intelligent and human. It makes complex work feel considered without making it feel distant. The central expression is: **Clear in thought. Expansive in possibility.** ### Exact Use strong hierarchy and precise language. Make every element necessary. ### Open Leave room for ideas. Space is part of the identity, not an absence of it. ### Human Be assured without becoming institutional. Intelligence should remain inviting. ## Company identity The name is the mark. The primary company logo is set in Dashiell Fine. Its compact three-line form works without an additional symbol. ### Approved company marks - `company-primary-dark`: primary artwork for dark contexts. It may also appear as deliberately framed black artwork on a white surface. - `company-primary-light`: white-backed artwork for white or light surfaces only. - `company-primary-transparent-light`: transparent artwork for white or light surfaces. - `company-square-black`: square black-background artwork when a square format is required. Consult `brand-assets.json` for exact filenames, stable URLs and usage metadata. ### Clear space Keep a clear field around the company mark equal to the height of the word “The” in the supplied artwork. Do not place type, imagery, borders or interface controls inside that field. ### Logo usage - Use white outlines and accents on dark backgrounds only. - Use black outlines and accents on white backgrounds only. - Black-background artwork may create deliberate contrast on a white surface. - Never use white-background artwork on a dark surface. - Preserve the supplied aspect ratio and internal spacing. - Do not add shadows, gradients, outlines, effects, masks or animation to the mark. - Do not extract or rearrange elements from a supplied lock-up. ## Brand architecture The company, Foundation and Research identities belong to one system but represent distinct fields of work. Foundation and Research inherit the company’s typographic character while keeping their own purpose legible. Use only the supplied lock-ups: - Foundation black artwork for light surfaces. - Foundation light artwork over Foundation Navy/Exos. - Foundation white artwork for dark surfaces. - Skyfallen Research horizontal lock-up. - Skyfallen Research purpose line, “In pursuit for humans.” - Skyfallen Research square artwork in the supplied light and dark variants. - Skyfallen Research banner. Do not rebuild, retype or recombine these identities. ## Colour The palette is deliberately restrained. Colour establishes hierarchy and atmosphere, not decoration. | Token | Hex | RGB | Role | | --- | --- | --- | --- | | Black | `#000000` | `0 0 0` | Company identity and maximum contrast | | White | `#FFFFFF` | `255 255 255` | Company identity and clear surfaces | | Exos | `#0F1320` | `15 19 32` | Authority and primary actions | | Stratos | `#3F5070` | `63 80 112` | Structure and emphasis | | Tropos | `#B2C4DC` | `178 196 220` | Spacious supporting fields | | Paper | `#F5F5F2` | `245 245 242` | Neutral editorial surface | Use black and white for the company identity. Maintain accessible contrast for text and controls. Supplied artwork must remain unchanged. ## Typography ### Dashiell Fine Use Dashiell Fine for display typography, identity and slogans. It carries the expressive character of the brand. A suitable generic fallback is Georgia, serif, but fallback text must never be used to recreate a logo. ### Articulat CF Use Articulat CF for information, navigation and utility content. Supported weights shown by the system are 300, 400, 500, 600, 700, 800 and 900. Suitable generic fallbacks are Arial and sans-serif. ### Inter Use Inter for quiet utility titles, compact controls and navigation where the implementation calls for a neutral UI treatment. It is not a substitute for Articulat CF in general editorial copy. ### Hierarchy - Display: expressive Dashiell Fine, used sparingly for high-impact statements. - Headline: clear, assertive Articulat CF. - Body: legible Articulat CF with comfortable line spacing. - Utility: compact Inter with direct labels. The site loads licensed brand fonts through Adobe Fonts. The brand site does not distribute font files or grant a separate font licence. Confirm that the destination project is authorised to use the Adobe Fonts kit before depending on it; otherwise use the declared fallbacks and ask the brand team for direction. ## Interface elements Controls are rectangular, legible and explicit. States rely on contrast, borders and movement—not softened shapes or decorative effects. ### Structure - Use straight edges. - Use one-pixel rules to establish structure. - Do not round corners on controls, panels or navigation. - Keep controls content-sized when practical. - Keep data tools attached to the dataset they affect. ### Interaction states - Every interactive element needs an obvious hover state. - Every interactive element needs a keyboard-visible focus state. - Disabled controls must be visibly and semantically disabled. - Do not change a control’s dimensions between states. - Use contrast, borders and restrained movement to communicate state. ### Input fields - Standard field height: `52px`. - Standard horizontal content inset: `12px`. - A floating label moves from `16px` to `6px` when raised. - The interaction sequence is resting, hover, focus, then filled. - Focus may use an Exos fill where sufficient contrast is maintained. ### Buttons - Use rectangular, content-sized buttons. - Primary actions use Exos. - Hover may invert the surface and text without changing dimensions. - Include a clear focus outline. ### Tables - Place search, filters and pagination with the dataset. - Use compact headers, horizontal rules and full-row hover feedback. - Use semantic table markup and explicit action labels. ## Movement Motion should explain where content comes from, what belongs together or where attention should go next. If it serves none of those purposes, leave the element still. - Reveal sections once, in reading order, as they approach the viewport. - Large editorial type may move subtly with scrolling to reinforce depth. - Interaction motion should confirm that input was received, settle promptly and leave the control still. - Interface response should feel immediate. - Content reveal should feel measured. - Slow editorial movement must be linked to scrolling. - Always respect `prefers-reduced-motion`; remove nonessential animation and smooth scrolling when reduction is requested. The standard interface transition used by the guide is `180ms ease`. This is a practical implementation token, not permission to animate every property. ## Voice Skyfallen speaks with conviction, not volume. The voice is: - Direct - Human - Assured - Specific Prefer clear statements such as: “Make every identity decision confidently.” Avoid inflated or abstract corporate language such as: “Our innovative solution enables identity decision optimisation.” The company slogan is: **A worldful of opportunity.** Preserve its wording and punctuation. ## Accessibility - Preserve semantic headings and landmark structure. - Provide meaningful alternative text for informative artwork; use empty alternative text only when an adjacent label conveys the same information. - Maintain accessible colour contrast. - Provide visible keyboard focus. - Do not rely on colour or motion alone to communicate meaning. - Respect reduced-motion preferences. - Ensure controls remain usable with keyboard, touch and assistive technology. ## Implementation checklist Before delivery, verify that: 1. All colours come from the supplied tokens. 2. All logos come from the approved asset manifest. 3. Logo background and clear-space rules are satisfied. 4. No logo has been recreated, cropped, recoloured or distorted. 5. Typography uses the correct role and licensed fonts or declared fallbacks. 6. Controls have square corners, explicit states and visible focus. 7. Motion is purposeful and reduced-motion behaviour is present. 8. Copy is direct, human, assured and specific. 9. The implementation is responsive and accessible.