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, find CSS Variables (or search for it).

  1. Click + to add a new variable
  2. Name: --color-primary (our brand color)
  3. Value: Pick a color (e.g., #0047AB for a professional blue)
  4. Click + 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.

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

Typography variables:

  1. --font-size-body: 16px
  2. --font-size-heading: 32px
  3. --font-family-sans: Pick a font (e.g., "Inter", sans-serif or just sans-serif)

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

When you set a style property:

  1. Select an element
  2. In the Style panel, set (for example) Background to a color
  3. Instead of typing #0047AB, look for a field to use a variable
  4. Choose --color-primary

Some properties accept variables directly in the value field. For example:

  • Background: var(--color-primary)
  • Padding: var(--spacing-medium)
  • Font-size: var(--font-size-body)

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 component */
.block__element {}     /* Part of the component */
.block--modifier {}    /* Variation of the component */

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 var(--font-size-body)
  • Color: var(--color-text) (dark text)
  • Background: var(--color-background) (white or light)
  • Padding: var(--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: var(--color-text) - Text-decoration: none (remove the underline) - Padding: 8px 12px (space around each link) - Hover state: In the Style panel, find pseudo-class :hover, set Color to var(--color-accent) (changes color on hover)

Styling the hero section (homepage)

The hero is the large banner at the top of the homepage. Create a new Div on the index page for this.

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

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

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

CTA button: - Background: var(--color-accent) - Color: white - Padding: var(--spacing-medium) var(--spacing-large) (vertical, horizontal) - Border-radius: 4px (slightly rounded corners) - Font-weight: bold - Hover: 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: var(--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: var(--spacing-medium)

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

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

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

Styling typography

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

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

Links: - Color: var(--color-primary) - Text-decoration: underline (optional, but helps distinguish links) - Hover: Set Color to var(--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, you'll see device previews (Desktop, Tablet, Mobile). Use these to test how your site looks at different sizes.

Responsive adjustments:

  1. Click Mobile 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 mobile
  5. Repeat for Tablet 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 var(--color-primary))
  • Color: var(--color-text) or white if using a dark background
  • Padding: var(--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 CMS Integration to connect a data source and add dynamic content (blog posts).

If you want to skip CMS integration, jump straight to Publish.

Edit this page on GitLab