Zum Inhalt springen
Aracle

Brand

Brand guidelines.

Wie Aracle aussieht, klingt und sich bewegt. Für alle, die mit der Marke arbeiten, und für alle, die wissen wollen, warum die Seite so aussieht.

Stand Oktober 2026

Swiss precision meets creative technology.

Aracle ist ein Creative & Technology Studio aus Glarus. Wir entwickeln eigene Produkte und Marken, produzieren Content und betreiben die Infrastruktur dahinter.

Angefangen hat es 2017 mit einem YouTube-Kanal und einem Minecraft-Server. Seit Mai 2023 heisst das Ganze Aracle. Der Anspruch ist geblieben: kreativ denken, technisch sauber umsetzen.

Leitsatz

Create. Connect. Inspire.

Werte

  • PräzisionBis ins Detail. Raster, Abstände und Höhenangaben stimmen, auch dort, wo es niemand nachmisst.
  • EhrlichkeitNur echte Angaben. Keine erfundenen Kunden, Zahlen oder Erfolge, und ein Konzept heisst Konzept.
  • Selbst gemachtWas wir für andere bauen, setzen wir zuerst bei uns um. Bis zur eigenen Hardware.
  • HerkunftAus dem Glarnerland. Die Berge auf der Website sind echte Gipfel, aus Höhendaten berechnet.

Tonalität

So klingen wir

  • Headlines auf Englisch, kurz, mit Punkt am Ende.
  • Fliesstext auf Hochdeutsch, in der Du-Form, mit «ss».
  • Konkret sagen, was da ist: «In Entwicklung», «Konzept».
  • Kommas und Punkte statt Gedankenstrichen.

So nicht

  • Headlines in Mundart oder als halbe Sätze ohne Schluss.
  • Schweizerdeutscher Dialekt oder steifes Sie im Fliesstext.
  • Leere Versprechen, Superlative, erfundene Zahlen.
  • Gedankenstriche als Trenner im Satz.

Colors.

Die Farben kommen aus dem Glarnerland: Schiefer, Gletscherwasser, Firn und das Licht am Abend. Alle Werte sind Tokens in der Website.

Grundfarben

Nachtschiefer trägt jede Seite. Gletscherblau vom Klöntalersee ist der einzige laute Ton.

  • Nachtschiefer

    --color-bg

    Hintergrund jeder Seite

  • Gletscherblau

    --color-aqua

    Hauptaktion, aktive Zustände, Kicker

  • Firn

    --color-ink

    Text und Linienzeichnungen

Akzente

Sparsam. Alpenglühen markiert, was nicht im Normalbetrieb ist. Rot gehört nur dem Kreuz.

  • Alpenglühen

    --color-glow

    Status ausser «Aktiv», Highside

  • Schweizer Rot

    --color-swiss

    Nur das Schweizer Kreuz

  • Hinweis

    --color-danger

    Fehler in Formularen

Flächen und Linien

Stufen desselben Schiefers. Tiefe entsteht über Helligkeit, nicht über Schatten.

  • Feld

    --color-field

    Eingabefelder, tiefe Flächen

  • Fläche

    --color-surface

    Kacheln, Platzhalter

  • Erhöht

    --color-raised

    Felder, erhöhte Flächen

  • Linie

    --color-line

    Haarlinien, Raster

  • Gedämpft

    --color-muted

    Sekundärtext, Beschriftungen

  • Akzent-Tinte

    --color-accent-ink

    Text auf Gletscherblau

Im Logo

Das Zeichen hat eigene Farbvarianten. Sie gehören zum Logo und nicht zur Website-Palette.

  • Logo-Blau

    Farbvariante des Zeichens

  • Logo-Rot

    Farbvariante des Zeichens

  • Logo-Grün

    Farbvariante des Zeichens

Im Einsatz

Kicker in Gletscherblau

Titel in Firn.

Sekundärtext in Gedämpft, auf Nachtschiefer.

HauptaktionNebenaktion

Fläche

Status: In Entwicklung

Made in Switzerland

Typography.

Zwei Schriften mit klaren Rollen. Satoshi gibt den Titeln Charakter, Helvetica hält alles andere ruhig.

Titel und grosse Zahlen

Aa

Satoshi

Schnitte 400, 500, 700, 900 · über Fontshare

Text, Bedienung, Beschriftung

Aa

Helvetica Neue

Systemschrift, Ersatz Helvetica und Arial

Hierarchie

  • Mega

    48 bis 160 px

    Zeile 0.9 · Laufweite -0.04em

    Let’s build something.

  • Display

    40 bis 112 px

    Zeile 0.95 · Laufweite -0.035em

    Selected work.

  • Head

    32 bis 56 px

    Zeile 1 · Laufweite -0.03em

    Built with purpose.

  • Lead

    19 bis 24 px

    Zeile 1.33 · Laufweite -0.015em

    Wir melden uns mit einer ehrlichen Einschätzung.

  • Text

    17 px

    Zeile 1.5 · Laufweite -0.005em

    Wir filmen, gestalten, entwickeln und betreiben unsere eigenen Server.

  • Klein

    14 px

    Zeile 1.43 · Laufweite -0.01em

    Tödi vom Schilt aus, 30 km entfernt

  • Kicker

    13 px, Versalien

    Zeile 1.5 · Laufweite 0.06em

    Create. Connect. Inspire.

Technische Beschriftungen

Höhen

3'614 m

Hochkomma als Tausendertrennung, wie in der Schweiz üblich.

Koordinaten

47°02′ N 9°04′ E

Grad und Minuten, Ziffern in Tabellenbreite.

Jahre und Zahlen

2017 · 11 · 3

Immer tabellarische Ziffern, damit Spalten stehen.

Design language.

Ein Raster, feine Linien und echte Berge. Alles Weitere ist Zurückhaltung.

Linien und Raster

12 Spalten · Haarlinie 1 px

  • 12 Spalten ab Tablet, 4 auf dem Handy.
  • Linien sind 1 px stark und in Linie (#26323A) gehalten.
  • Ein Segment in Gletscherblau auf einer Linie heisst: hier bist du.

Formen

6 px

Bilder, Kacheln, Buttons

Pille

Filter und Status

Kreis

Punkte im Verlauf

Abstände und Layout

  • --margin20 bis 48 pxSeitenrand, wächst mit dem Bildschirm
  • --section80 bis 136 pxAbstand zwischen Abschnitten
  • Spaltenabstand32 pxZwischen Rasterspalten
  • Textbreitebis 44 ZeichenFür Fliesstext neben Bildern und Titeln
  • --radius6 pxEcken von Bildern, Kacheln und Buttons

Alpine Motive

Die Silhouetten sind echte Glarner Gipfel, aus Höhendaten berechnet. Jeder Bereich hat seinen festen Berg, damit die Berge etwas bedeuten und nicht als Dekoration wiederholt werden.

  • Tödi3'614 m · vom Schilt

    Kanäle

  • GlärnischVrenelisgärtli 2'904 m · vom Schilt

    Marken & Produkte

  • Kärpf2'794 m · Höhenlinien

    Cloud & Hosting

  • Wiggis2'282 m · von Glarus

    Communitys & Server

Interaktion

Projekt anfragenProjekte ansehenThe Aracle Journey
  • Ein Gletscherblau-Button pro Bereich, für die eine Hauptaktion.
  • Textlinks in Gletscherblau unterstreichen sich beim Überfahren.
  • Jedes Bedienelement hat Hover, Fokus und Druck.

Motion.

Bewegung antwortet auf das, was jemand tut, oder zeichnet einmal eine Linie. Sie dekoriert nicht.

Auslaufen

900 ms

Einblenden, Hover, Linien-Segmente

--ease-out

Gleiten

1800 ms

Panorama zeichnen, grosse Wechsel

--ease-in-out

Weich

1200 ms

Bilder, Zoom beim Laden

--ease-soft

Grundsätze

  • Nur transform und opacityDer Browser muss nichts neu zeichnen. Bewegung bleibt flüssig, auch auf dem Handy.
  • Kurz für Antworten, lang für LinienDruck 140 ms, Farbe 180 ms, Segment 420 ms. Panorama-Linien dürfen sich 1.8 bis 2.4 s Zeit nehmen.
  • Einmal pro ElementTitel und Inhalte erscheinen beim ersten Sichtkontakt und bleiben dann stehen.
  • Reduzierte Bewegung respektierenWer das im System einstellt, sieht alle Inhalte sofort, ohne Animation und ohne weiches Scrollen.

Downloads.

Alle Logo-Dateien in voller Grösse, PNG mit transparentem Hintergrund.

Vektordateien (AI, SVG) für Druck und grosse Formate gibt es auf Anfrage: info@aracle.ch