09

Components

Everything for altec.com.au, quote forms and email — built from the same palette and the same two fonts.

Button

Figtree Black, all caps, fully rounded. One primary (gold) action per screen. Hover darkens 10% over 150ms — no lift, no shadow.

primary
secondary
tertiary
disabled
loading
sm / md / lg
inverse on Blue
Show code
<Button variant="primary">Get a free quote</Button>
<Button variant="secondary">Browse patios</Button>
<Button variant="tertiary">Learn more</Button>
<Button variant="inverse">Get a free quote</Button>

Typography

Display (Figtree, caps), Heading (Inter Bold, title case), Subheading (Inter Semi Bold, caps), Text (Inter Regular, sentence case).

Build it

10 year guarantee

Insulated Patios

Cooler in summer, quieter in the rain. Built to your slab, not to a catalogue.

Show code
<Display size="title">10 year guarantee</Display>
<Heading>Insulated Patios</Heading>
<Subheading>Build it</Subheading>
<Text>Cooler in summer, quieter in the rain.</Text>

TextField

Label always above. Placeholder shows an example. Mark optional fields. Focus is a 2px Blue border, no glow.

So we can send the closest crew.

That email address looks incomplete.

Show code
<TextField label="Postcode" placeholder="e.g. 4051" />
<TextField label="Email" error="That email address looks incomplete." />

Select

Native select with the field styling.

Pick a time so we know when to ring.

Show code
<Select label="What are you after?">
  <option>Patio</option>
</Select>

TextArea

Multi-line field for describing the job.

Show code
<TextArea label="Tell us about the job" optional />

Card

16px radius, no border, no shadow. Cards separate by background colour.

Queenslander with a timber-post carport

Build it

Insulated Patios

Cooler in summer, quieter in the rain. Built to your slab, not to a catalogue.

Learn more
Feature card

10 year guarantee

On workmanship, every job. In writing, before we start.

Read the terms
They did the carport, then the deck, then the roof. Same crew every time.
Jane K. · Everton Park
Show code
<Card surface="pale">
  <CardMedia src={img} alt="Carport" />
  <CardBody>…</CardBody>
</Card>

Badge

Small caps labels. Gold only for a guarantee.

paleImprove it
blueBuild it
navyFeature
gold10yr guarantee
Show code
<Badge variant="blue">Build it</Badge>

Testimonial

Customer quote, first name and suburb.

We had our rear carport finished today with Mike & Bec. Highly recommended.
Mike R. · Redcliffe
Show code
<Testimonial author="Jane K. · Everton Park">…</Testimonial>

Section & Container

Full-width bands on 1320px content. Aim for 40% white, 40% Blue, 15% Pale Blue, 4% Navy.

surface="white"
surface="pale"
surface="blue"
surface="navy"
Show code
<Section surface="blue">
  <Container>…</Container>
</Section>

Checkbox

24px box, 44px touch target. Labels on the right, plain words.

Show code
<Checkbox label="Send me a copy of the quote" />

RadioGroup

Fieldset with a visible legend. Use for one choice from a short list.

Roof type
Show code
<RadioGroup legend="Roof type">
  <Radio name="roof" value="flat" label="Flat" />
</RadioGroup>

Switch

Settings that apply straight away. Inside forms, use Checkbox.

Show code
<Switch label="Text me when the crew is on the way" />

Alert

System messages only. Say what happened and what to do next.

Council approvalMost patios in Brisbane need it. We handle the paperwork.
Quote request sentWe'll call you by Tuesday to book a site visit.
Show code
<Alert tone="success" title="Quote request sent">We'll call you by Tuesday.</Alert>

Stepper

Progress through a multi-step quote.

  1. Your job
  2. Your place
  3. Contact
Show code
<Stepper steps={["Your job", "Your place", "Contact"]} current={1} />

Accordion

FAQs and spec detail. Built on native details, so it works without script.

Do I need council approval?

Usually, yes. We lodge it for you and tell you how long it'll take.

How long does a patio take to build?

Most patios take two to three days once approval is in.

What does the guarantee cover?

Ten years on workmanship and the structure.

Show code
<Accordion>
  <AccordionItem title="Do I need council approval?">…</AccordionItem>
</Accordion>

Tabs

Pill tabs for product options. Arrow keys move between tabs.

Simple, strong and the quickest to build.

Show code
<Tabs label="Roof options" items={[{ id: "flat", label: "Flat", content: … }]} />

Stat

Proof numbers in Figtree Black.

1974Building in SEQ since
10 yrStructural guarantee
Show code
<Stat value="1974" label="Building in South-East Queensland since" />

ProcessSteps

Numbered how-it-works.

  1. Design it

    We visit, measure and draw it up with you.

  2. Approve it

    We handle council and send you a fixed price.

  3. Build it

    Our crew builds it, usually in two or three days.

Show code
<ProcessSteps steps={[{ title: "Design it", description: "…" }]} />

Divider

Hairline between groups.

Patios

Carports

Show code
<Divider />

Figure

Rounded job photo. Alt text is required.

Double carport beside a brick home
Double carport, Everton Park
Show code
<Figure src={img} alt="Double carport in Everton Park" caption="Everton Park, 2025" />

Hero

Full-bleed job photo with a Navy scrim, Display heading and one gold quote button.

Carport on a Brisbane home

More room. Built right.

Patios, carports and enclosures across South-East Queensland since 1974.

Show code
<Hero image={img} imageAlt="…">
  <Display as="h1" size="display">…</Display>
  <ButtonLink variant="primary">Get a free quote</ButtonLink>
</Hero>

Quote form

Composition: one column, labels visible, one gold action.

Get a free quote

That email address looks incomplete. Add the part after the @.

Show code
<TextField label="Your name" />
<Button type="submit" variant="primary" fullWidth>Get a free quote</Button>