Brand Guidelines

Hamster is product delivery for AI natives. These guidelines keep our identity consistent — fast, direct, and engineered. This is a living document; today it covers the foundations: logo, colour, and typography.

Version 0.1 Updated June 2026 Source Hamster Design System (Figma)

Foundations

Logo

The Hamster identity is a four-part organic mark — four paths orbiting a central node — paired with the Agrandir wordmark. The mark may be used on its own once brand recognition is established. Give it room: keep clear space of at least the height of one mark dot on all sides.

Primary lockup — on dark shell

Primary lockup — on light / paper

Icon mark — app icon, favicon, avatar

Do

Keep the mark monochrome — ink on light, white on dark.
Maintain minimum clear space and a 24px minimum mark height.
Use the supplied SVG so the mark stays crisp at any size.

Don't

Recolour, add gradients, or apply shadows to the mark.
Stretch, rotate, or rearrange the four paths.
Place the lockup on a busy or low-contrast background.

Foundations

Colour

Hamster runs on a dark, high-contrast OKLCH palette — a terminal-like focus for AI-native builders. Neutrals carry the interface; accents are reserved for high-signal status. Colours are defined in OKLCH (with HSL for the core neutral shells) to match the production design tokens.

Core / Neutrals

Shell (neutral-990)

hsl(0 0% 8%)

Panel (neutral-980)

hsl(0 0% 9%)

Border (neutral-970)

hsl(0 0% 13%)

Muted ink

oklch(0.705 0.015 286.067)

Ink / Foreground

oklch(0.985 0 0)

Paper (light shell)

hsl(60 9.1% 97.8%)

Stone — warm greyscale (brand base)

Our greyscale is intentionally warm. In light mode the lightest stones read as soft off-white rather than pure white; the dark scale carries a subtle warm tint. This is the foundation for the Topo device while the brand stays greyscale. Sourced from the Hamster Studio default tokens.

Stone 50 (off-white)

hsl(60 9.1% 97.8%)

Stone 800

oklch(0.27 0.01 34)

Stone 850

oklch(0.245 0.01 45)

Stone 900

oklch(0.22 0.01 56)

Stone 925

oklch(0.185 0.01 53)

Stone 940

oklch(0.167 0.01 51)

Stone 950

oklch(0.15 0 49)

Status / Accent

Reserved for high-signal status only — used sparingly against the greyscale base. Intentional brand colour will be added later.

Success

oklch(0.72 0.19 145)

Warning

oklch(0.78 0.16 55)

Info

oklch(0.65 0.2 255)

Destructive

oklch(0.704 0.191 22.216)

Foundations

Typography

Two typefaces carry the brand. Agrandir sets display and headline type — bold, confident, with tighter tracking and font-stretch: 80% for founder energy. Everything functional uses the native system UI stack for speed and maximum legibility.

Agrandir

Display & headlines · weight 500 · font-stretch 80% · line-height 1.2

System UI

Titles, body & labels · -apple-system, Segoe UI, Roboto, Helvetica Neue, sans-serif

Display · Agrandir · 500 · 36–56px · 1.2 · stretch 80%

Deliver the last mile

Headline · Agrandir · 500 · 24–36px · 1.2 · stretch 80%

Product delivery for AI natives

Title · System UI · 500 · 18px · 1.4

Get clear on exactly what to build

Body · System UI · 400 · 16px · 1.75

Hamster focuses on the inputs — customer, team, analytics, strategy — and on team alignment before building software, so the last 20% of delivery stops being the hard part.

Label · System UI · 500 · 14px · 1.25

Connect GitHub

Brand device

Topo device

Hamster takes the wheel so you can focus on the thinking. The Topo device is the visual expression of that idea — a topographic field you read like a map: it shows the terrain, the contour, the route through.

It works as orienteering for Product Engineering teams across the three things Hamster helps you do. The same contour system stretches and re-renders across media — flat 2D, 3D relief, fingerprint, soundwave, ASCII — but it always reads as one terrain.

◈

Direction

Maps, compasses, the topographic device itself — knowing where you're headed and why.

◌

Discovery

Scouting the terrain — researching, thinking, finding the path before you commit.

▸

Delivery

Movement and alignment — covering ground together and leaving artifacts behind.

Colourways

Greyscale only at this stage, built on the warm stone palette. Three approved treatments cover light and dark contexts. Colour will be introduced later, intentionally.

Light · Tonal

Subtle backgrounds, large surfaces

Light · Bold Ink

Hero moments, print, merch

Dark · White Topo

Dark shell, app backgrounds

Treatments

The device is a system, not a static graphic. These are early explorations of how the terrain can move and re-render across the product and brand.

Movement / wave

Contours drift like a slow current — ambient motion for headers and loading states.

3D relief

Embossed hills — the same contours read as raised terrain under raking light.

...:      -:    %.   %    :     +:   +:    *        .%   +:   %      @   @    
       .:          -+   #    --    *:     .    :   :%   +#    *     :+  .*   +
:.         -+    :@.       #=   ++     #-    *    *-   #=   .       %   =-   @
    ..         =%.        :          =:    =:   :+         #.       @   *:   @
            -+=         =   *      *:   -     =+     :   .*   :     %   *.  .+
     .:-=+=           #   -.     +.  :#     *.    =#    +    #:@   +-   -   * 
            ---:@   =+   *     =   :#     #     =*    +:   *: --   @    %   @ 
  :--- .=:     *   =#   #    -=   #.    .     *=    *=    %   @   :+        % 
               *   @        %    .    +.   .#:   .*-    .    @    %    @      
  -..:=+=-@   -   @    *   @    :   :-   -%    #*     :.  .+-    @    @   .+  
   .      @   .   @   +   #    +.  +:   %:   @.     *@====     =*    @    @   
          @   @  .*   @   .    @   @    *   *.               --   :@-    =   *
.:::          @  .*   *   %    @   @    .-   :   :----: .-      +%.    :     %
     ::.      *   .    %  =-   :*   :    :#=                :+=.     +-      %
 =++:    .---:++  :.   #:  @    -=   =       :--------+**=-       :-          
     .=*+.              %.  %     -.    *#-                   :::     ---     
-:.       :=+:      #    =:  .+     ==:     .::.      .:-=-.      -.          
              :+-    *         .=:                           ....       .  .  
-:               :-   :*    :#.   .+ ..           .:--===-.        :       @  
  -#%*=.      :    =+   =+     ==        ----.              .-==+-         @  
:       :++    #:    @:   -#-     -==                             :-: @   *.  
   -+=-    =#   :*    .##=.  -*-      :=+++*=-               .        #   @   
:##-   -@-   ++   -.        .--  .::             .-------:           .+   @   
    *-    %             ..      *+   :+@%+                       =+   @   @   
.+-        %     ::        .+-                       :.           @   +.   .  
   *:   @   #:        -**-    -+        :-------                  @    @      
-   :*   %=     = -.      :*-                         .=-       :#@.   %      
 %    -    :.         .::    .         :---  .:  :         -++=         #   = 
  +   :@.      ....      =+    ==.. .               :=-:.       :--.    @    @
   :=   .***+:       .-    %            :---------        .-==       :-:%    @
     ::         :+*     -   @    **:               .-++:       .+#-         =%
 =%.        :+     =*    @   --:     :.            .                :--   ++  
    **:         @   %    *        ++                 .=+*=      .+.           
 ==      =*     -=  #    @      .     :: .:-=+**#*-        .++.    ==      -#.

ASCII

A nod to our technology roots — the terrain rendered in characters for patterns and backgrounds.

Adaptations under exploration: fingerprint (identity / signature), soundwave (a moment captured), and full orienteering route maps. Source variants live in research/topo/.