Skip to content

Styling: design system and responsive design

In this section, we'll build a cohesive design system using CSS variables, set up typography, and make the site responsive across devices.

Setting up CSS variables

CSS variables store reusable values for colors, spacing, and typography. Change the variable once and it updates everywhere.

Create a new CSS variable:

In the left sidebar, click the CSS Variables button (the paint brush icon).

  1. Click + New variable and choose Color. A new line appears in the list.
  2. In the Name field, type color-primary (our brand color)
  3. In the Desktop column, pick a color (e.g., #0047AB for a professional blue)
  4. Click + New variable > Color again for --color-text, value #333333 (dark gray for readable text)
  5. Add --color-background, value #ffffff (white)
  6. Add --color-accent, value #FF6B35 (an accent color for CTAs)

Spacing variables:

These help maintain consistent padding and gaps throughout. Create each one with + New variable > Size, then type the number and choose the unit.

  1. --spacing-small: 8px
  2. --spacing-medium: 16px
  3. --spacing-large: 32px
  4. --spacing-xlarge: 64px

Typography variables:

  1. --font-size-body: 16px (a Size variable)
  2. --font-size-heading: 32px (a Size variable)
  3. --font-family-sans: a Font Family variable. Pick a font in the list. The fonts you added in the Fonts dialog are in the list too.

Now you have a palette to work from. Use these variables in your styles instead of typing values repeatedly.

Using CSS variables in the Style panel

To use a variable on a style property:

  1. Select an element
  2. In the Style panel, find the property (for example Background color)
  3. Click the pencil icon (Use variable) next to the name of the property
  4. Choose color-primary in the list

The pencil icon only shows the variables of the right type: Color variables for colors, Size variables for sizes (each side of Padding and Margin has its own), Font Family variables for Font family.

In the rest of this page, a value like --color-primary means: use this variable with the pencil icon. For Padding and Margin, set the variable on each side.

For a detailed guide, see CSS Variables.

Styling with BEM class names

BEM (Block, Element, Modifier) keeps CSS organized and readable. The format is:

.block {}              /* Main block */
.block__element {}     /* Part of the block */
.block--modifier {}    /* Variation of the block */

Example for an agency card:

  • .agency-card — the card block
  • .agency-card__image — the image inside the card
  • .agency-card__title — the title
  • .agency-card__description — the description text

When you style, use these class names in the editor and reference them consistently.

Styling the header

Select the header (Symbol instance):

  • Font-size: 18px or --font-size-body
  • Color: --color-text (dark text)
  • Background: --color-background (white or light)
  • Padding: --spacing-medium (space inside the header)
  • Border-bottom: 1px solid #e0e0e0 (subtle line separating header from content)

Logo: - Width: 80px (adjust to your logo size) - Object-fit: contain (keeps aspect ratio)

Navigation links: - Color: --color-text - Text-decoration: none (remove the underline) - Padding: 8px 12px (space around each link) - Hover state: select a link and give it the class agency-nav__link (click + in the selector area). Then click Pseudo Class: it shows On mouse hover, and the selector becomes .agency-nav__link:hover. Set Color to --color-accent. See Selectors.

Styling the hero section (homepage)

The hero is the large banner at the top of the homepage. Drag a Container block on the index page for this.

Hero container: - Display: Flex - Flex-direction: Column - Justify-content: center - Align-items: center - Text-align: center - Background: --color-primary (use your brand color) - Padding: --spacing-xlarge (generous padding) - Min-height: 400px (or 60vh for 60% of viewport height; see Responsive design)

Hero headline: - Font-size: --font-size-heading or larger (e.g., 48px) - Font-weight: bold (or 700) - Color: white (white text on the colored background) - Margin-bottom: --spacing-medium

Hero subheading: - Font-size: 18px or 20px - Color: rgba(255, 255, 255, 0.9) (slightly transparent white) - Margin-bottom: --spacing-large

CTA button: - Background: --color-accent - Color: white - Padding: --spacing-medium on top and bottom, --spacing-large on left and right - Border-radius: 4px (slightly rounded corners) - Font-weight: bold - Hover: with the Pseudo Class hover (as for the navigation links), set a darker background (e.g., darker shade of --color-accent) - Cursor: pointer (CSS can set this)

Styling cards

Cards display projects, blog posts, or team members. Use flexbox for consistent alignment.

Card container: - Display: Flex - Flex-direction: Column - Border: 1px solid #e0e0e0 (subtle border) - Border-radius: 8px (rounded corners) - Padding: --spacing-large - Box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) (subtle shadow for depth) - Width: flexible (e.g., Flex-basis 300px, Flex-grow 1 to make cards responsive; see Flexbox)

Card image: - Width: 100% (full width of card) - Height: 200px (fixed height) - Object-fit: cover (crops image to fit without distortion) - Margin-bottom: --spacing-medium

Card title: - Font-size: 20px or --font-size-heading - Font-weight: bold - Color: --color-text - Margin-bottom: --spacing-small

Card description: - Font-size: 14px - Color: #666666 (medium gray) - Margin-bottom: --spacing-medium

Card link/button: - Color: --color-primary - Text-decoration: none (no underline) - Font-weight: bold - Hover: Set Color to --color-accent

Styling typography

Headings (h1, h2, h3): - Font-family: --font-family-sans (or a specific font like Georgia for elegance) - Font-size: Varies by level (h1: 48px, h2: 32px, h3: 24px) - Font-weight: bold (700) - Color: --color-text - Margin-bottom: --spacing-medium - Line-height: 1.2 (tighter line-height for headings)

Body paragraphs: - Font-family: --font-family-sans - Font-size: 16px or --font-size-body - Line-height: 1.6 (more spacious for readability) - Color: --color-text - Margin-bottom: --spacing-medium

Links: - Color: --color-primary - Text-decoration: underline (optional, but helps distinguish links) - Hover: Set Color to --color-accent and perhaps Text-decoration: none

For more on typography, see Typography.

Making it responsive

Use breakpoints to adjust styles for mobile, tablet, and desktop.

In the top toolbar, the device dropdown has four devices: Desktop, Tablet, Mobile Landscape and Mobile Portrait. Use it to test how your site looks at different sizes.

Responsive adjustments:

  1. Choose Mobile Portrait in the device dropdown to preview on a narrow screen
  2. Select an element that looks too cramped
  3. Adjust its properties: make font smaller, reduce padding, change layout
  4. Switch back to Desktop. The changes only apply to smaller screens.
  5. Repeat for Tablet and Mobile Landscape if needed

Common mobile adjustments:

  • Headings: Reduce font-size (e.g., 32px on desktop → 24px on mobile)
  • Padding: Reduce (e.g., 64px → 20px)
  • Column-gap and Row-gap: Smaller gaps on mobile
  • Hero section: Reduce Min-height (e.g., 400px → 300px)
  • Navigation: Stack vertically on mobile (Flex-direction: column)

For detailed guidance, see Responsive design.

Similar to the header, but typically:

  • Background: Slightly darker (e.g., #f5f5f5 or --color-primary)
  • Color: --color-text or white if using a dark background
  • Padding: --spacing-large
  • Font-size: 14px (smaller than body)
  • Text-align: center
  • Border-top: 1px solid #e0e0e0

Next steps

Your site now has a cohesive design system. Head to Publish to put it online.

Edit this page on GitLab