Style guide / layout

Content links

  • Grid System

  • Breakpoints & Responsiveness

  • Spacing & Sizing Scale

  • Alignment & Margins

    • Grid System

    The grid defines rhythm and alignment across the product. All layouts must snap cleanly to the grid.

    If it floats, it’s wrong.

    Layout 1
    Layout 2
    Layout 3
    Layout 4
    Layout 5
    Layout 6

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dark room with glowing futuristic control panels and holographic data displays on walls.

    Open

    Dark room with glowing orange digital circuit patterns on the walls and an illuminated control panel in the center.
    Glowing golden cube suspended in a dark room with illuminated circuit-like lines radiating from it.

    Open

    Glowing orange cube suspended in a dark room with radiant orange circuit-like lines extending outward.

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.
    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.
    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.
    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.
    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.

    Open

    Dimly lit room with retro computer monitors, a desk lamp, plants, a notebook, and a bright vertical blue light near a window.
    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Open

    Silhouette of a person in futuristic armor standing in a dimly lit room with vertical illuminated panels filled with plants.

    Breakpoints & Responsiveness

    Layouts must adapt logically across devices. No custom hacks per screen size.

    Design once. Scale intelligently.

    Spacing & Sizing Scale

    Spacing follows a defined scale. Random spacing is a visual liability.

    Consistency compounds quality.

    An example of the spacing between typographical elements using EM units.An example of the padding used for sections using REM units.

    Alignment & Margins

    Alignment communicates discipline. Margins are intentional, not accidental.

    Alignment mainly stays left starting, but under certain situations will conform to center. Those situations are for larger section headings that correlate to some sort of visual element like a video or a grid of images.

    This website uses both REM and EM in respects to margins.

    REM is mainly used for consistent spacing of side margins or for elements that don't need very dynamic scaling. While most typographical elements use EM to have spacing that is consistent to the font size of those elements without a lot of custom sizing rules.